reactjs - L'app React di Turborepo non riesce a caricare Tailwind

Ho creato un monorepo con Turborepo che per ora ha 1 App React Vite e un pacchetto tailwind-config. E il mio problema per ora è che la mia App non carica affatto tailwind. Lasciami provare a spiegarti la struttura del mio progetto e i file.

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

Il modulo tailwind-config contiene i file di base package.json, tailwind.config.js e postcss.config.js.

tailwind.config.js:

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

postcss.config.js:

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

All'interno della mia app container ho aggiunto il pacchetto tailwind-config come devDependency locale, ho aggiunto le direttive di Tailwind al mio index.css.

Alla fine, nel contenitore, ho creato tailwind.config.cjs che appare così:

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

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

E postcss.config.cjs

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

Come ho accennato, il problema è che l'app container non applica nessuna delle classi di Tailwind che fornisco.

Grazie a tutti in anticipo per l'aiuto e spero che abbiate una buona giornata :)

Risposta n. 1

Aggiungi la posizione esatta dei file .jsx/.tsx nel file tailwind.config.js ad esempio:

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}"]
}

Risposta n. 2

Un modo migliore per condividere le configurazioni di Tailwind è usare i preset.

1. Crea un file tailwind-presets.js nella tua cartella di configurazione condivisa
2. Aggiungi tutte le opzioni di configurazione che vuoi utilizzare in tutti i progetti

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

3. In ogni progetto, configura il tailwind.config.js per utilizzare il preset

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

Puoi sovrascrivere qualsiasi opzione individualmente in ogni progetto, ma questo è un modo abbastanza semplice per condividere la configurazione.