reactjs - Aplikacja React w Turborepo nie ładuje Tailwind

Stworzyłem monorepo z Turborepo, które na razie ma 1 aplikację React Vite i pakiet tailwind-config. I mój problem na razie polega na tym, że moja aplikacja w ogóle nie ładuje tailwinda. Pozwól, że spróbuję wyjaśnić ci strukturę mojego projektu i pliki.

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

Moduł tailwind-config zawiera podstawowe pliki package.json, tailwind.config.js i postcss.config.js.

tailwind.config.js:

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

postcss.config.js:

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

W mojej aplikacji kontenerowej dodałem pakiet tailwind-config jako lokalną zależność deweloperską i dodałem dyrektywy Tailwind do mojego pliku index.css.

Na końcu w kontenerze utworzyłem plik tailwind.config.cjs, który wygląda tak:

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

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

I plik postcss.config.cjs

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

Jak wspomniałem, problem polega na tym, że aplikacja kontenerowa nie stosuje żadnych klas Tailwind, które podaję.

Dziękuję wszystkim z góry za pomoc i mam nadzieję, że będziecie mieli miły dzień :)

Odpowiedź #1

Dodaj dokładną lokalizację plików .jsx/.tsx w pliku tailwind.config.js, np.:

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

Odpowiedź #2

Lepszym sposobem na udostępnianie konfiguracji Tailwind jest używanie presetów.

1. Utwórz plik tailwind-presets.js w swoim wspólnym folderze konfiguracyjnym
2. Dodaj wszystkie opcje konfiguracyjne, które chcesz używać we wszystkich projektach

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

3. W każdym projekcie skonfiguruj tailwind.config.js, aby używać preset

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

Możesz nadpisać każdą opcję indywidualnie w każdym projekcie, ale jest to dość prosty sposób na udostępnienie konfiguracji.