reactjs - Turborepo React -sovellus ei lataa Tailwindia

Olen luonut monorepon Turboren avulla, jossa on tällä hetkellä 1 React Vite -sovellus ja tailwind-config-paketti. Ongelmana tällä hetkellä on, että sovellukseni ei lainkaan lataa Tailwindia. Yritän selittää sinulle projektini rakenteen ja tiedostot.

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

tailwind-config-moduuli sisältää perus package.json-, tailwind.config.js- ja postcss.config.js-tiedostot.

tailwind.config.js:

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

postcss.config.js:

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

Säiliösovellukseni sisällä lisäsin tailwind-config-paketin paikalliseksi kehityssisäiseksi riippuvuudeksi ja lisäsin Tailwind-direktiivit index.css-tiedostooni.

Lopuksi kontissa loin tiedoston tailwind.config.cjs, joka näyttää tältä:

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

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

Ja postcss.config.cjs

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

Kuten mainitsin, ongelma on se, että konttisovellus ei käytä mitään antamiani Tailwind-luokkia.

Kiitos teille kaikille avusta etukäteen ja toivottavasti teillä on mukava päivä :)

Vastaus #1

Lisää .jsx/.tsx-tiedostojen tarkka sijainti tailwind.config.js-tiedostoon, esimerkiksi:

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

Vastaus #2

Parempi tapa jakaa Tailwindin asetuksia on käyttää esiasetuksia.

1. Luo tailwind-presets.js -tiedosto jaettuun konfiguraatiokansioosi
2. Lisää kaikki asetukset, joita haluat käyttää kaikissa projekteissa

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

3. Jokaisessa projektissa, aseta tailwind.config.js käyttämään esiasetusta

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

Voit ohittaa minkä tahansa vaihtoehdon yksitellen jokaisessa projektissa, mutta tämä on melko suoraviivainen tapa jakaa määritykset.