reactjs - Turborepo React-app mislykkes i å laste Tailwind

Jeg har laget et monorepo med Turborepo som foreløpig har 1 React Vite-app, og en tailwind-konfigurasjonspakke. Og problemet mitt akkurat nå er at appen min ikke laster tailwind i det hele tatt. La meg prøve å forklare deg prosjektstrukturen og filene mine.

root
|
|- packages
|   |- tailwind-config
| 
`- apps
    |- container

tailwind-config-modulen inneholder grunnleggende package.json-, tailwind.config.js- og postcss.config.js-filer.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js:

module.exports = {
  plugins: {
      tailwindcss: {},
      autoprefixer: {}
  }
}

Inne i container-appen min la jeg til tailwind-config-pakken som en lokal devDependency, og la til Tailwind-direktiver i index.css-filen min.

Til slutt i containeren opprettet jeg tailwind.config.cjs som ser slik ut:

/** @type {import('tailwindcss').Config} */
const sharedConfig = require("tailwind-config/tailwind.config")

module.exports = {
    ...sharedConfig,
    content: ["./src/**/*.{js,ts,jsx,tsx}", "./public/index.html"]
}

Og postcss.config.cjs

module.exports = {
  plugins: {
      tailwindcss: {},
      autoprefixer: {},
  }
}

Som jeg nevnte, er problemet at container-appen ikke bruker noen av tailwind-klassene jeg gir.

Takk til alle for hjelpen på forhånd, og håper dere får en fin dag :)

Svar #1

Legg til den nøyaktige plasseringen av .jsx/.tsx-filer i tailwind.config.js-filen, f.eks.:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const sharedConfig = require("tailwind-config/tailwind.config")

module.exports = {
    ...sharedConfig,
    content: ["./src/**/*.{js,ts,jsx,tsx}", "./public/index.html", "../apps/**/*.{js,ts,jsx,tsx}"]
}

Svar #2

En bedre måte å dele Tailwind-konfigurasjoner på er å bruke forhåndsinnstillinger.

1. Opprett en tailwind-presets.js-fil i din delte konfigurasjonsmappe
2. Legg til alle konfigurasjonsalternativene du vil bruke i alle prosjekter

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui"), require("@tailwindcss/typography")],
};

3. I hvert prosjekt, sett opp tailwind.config.js for å bruke forhåndsinnstillingen

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("../../packages/config/tailwind-preset.js")],
};

Du kan overstyre hvilken som helst innstilling individuelt i hvert prosjekt, men dette er en ganske enkel måte å dele konfigurasjonen på.