reactjs - L'application React Turborepo ne parvient pas à charger Tailwind

J’ai créé un monorepo avec Turborepo qui pour l’instant contient 1 application React Vite et un paquet de configuration Tailwind. Et mon problème pour l’instant est que mon application ne charge pas du tout Tailwind. Laissez-moi essayer de vous expliquer la structure de mon projet et mes fichiers.

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

Le module tailwind-config contient les fichiers de base package.json, tailwind.config.js et postcss.config.js.

tailwind.config.js :

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

postcss.config.js :

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

Dans mon application conteneur, j'ai ajouté le paquet tailwind-config comme dépendance de développement locale, et ajouté les directives Tailwind à mon index.css.

À la fin, dans le conteneur, j'ai créé tailwind.config.cjs qui ressemble à :

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

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

Et postcss.config.cjs

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

Comme je l'ai mentionné, le problème est que l'application du conteneur n'applique aucune des classes Tailwind que je fournis.

Merci à tous pour votre aide d’avance et j’espère que vous passerez une bonne journée :)

Réponse #1

Ajoutez l'emplacement exact des fichiers .jsx/.tsx dans le fichier tailwind.config.js, par exemple :

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

Réponse #2

Une meilleure façon de partager les configurations de Tailwind est d'utiliser des préréglages.

  1. Créez un fichier tailwind-presets.js dans votre dossier de configuration partagé
  2. Ajoutez toutes les options de configuration que vous souhaitez utiliser dans tous les projets
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui"), require("@tailwindcss/typography")],
};
  1. Dans chaque projet, configurez le tailwind.config.js pour utiliser le preset
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("../../packages/config/tailwind-preset.js")],
};

Vous pouvez remplacer chaque option individuellement dans chaque projet, mais c'est une façon assez simple de partager la configuration.