reactjs - Aplicativo React do Turborepo falha ao carregar Tailwind

Eu criei um monorepo com Turborepo que por enquanto tem 1 App React Vite e um pacote tailwind-config. E meu problema por enquanto é que meu App não está carregando o tailwind de forma alguma. Deixe-me tentar explicar a você a estrutura do meu projeto e os arquivos.

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

O módulo tailwind-config contém os arquivos básicos 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: {}
  }
}

Dentro do meu aplicativo container eu adicionei o pacote tailwind-config como uma devDependency local, adicionei as diretivas do Tailwind ao meu index.css.

No final, no contêiner, criei o tailwind.config.cjs que se parece com:

/** @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: {},
  }
}

Como mencionei, o problema é que o aplicativo de contêiner não está aplicando nenhuma das classes do Tailwind que forneço.

Obrigado a todos pela ajuda antecipadamente e espero que vocês tenham um bom dia :)

Resposta #1

Adicione a localização exata dos arquivos .jsx/.tsx no arquivo tailwind.config.js, por exemplo:

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

Resposta #2

Uma maneira melhor de compartilhar configurações do Tailwind é usar presets.

1. Crie um arquivo tailwind-presets.js na sua pasta de configuração compartilhada
2. Adicione todas as opções de configuração que você deseja usar em todos os projetos

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

3. Em cada projeto, configure o tailwind.config.js para usar o preset

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

Você pode substituir qualquer opção individualmente em cada projeto, mas esta é uma maneira bastante simples de compartilhar a configuração.