reactjs - Turborepo React uygulaması Tailwind'i yüklemekte başarısız oluyor

Şu anda içerisinde 1 React Vite Uygulaması ve tailwind-config paketi bulunan Turborepo ile bir monorepo oluşturdum. Ve şu anki sorunum, uygulamamın tailwind'i hiç yüklememesi. Proje yapımı ve dosyalarımı size açıklamaya çalışayım.

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

tailwind-config modülü temel package.json, tailwind.config.js ve postcss.config.js dosyalarını içerir.

tailwind.config.js:

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

postcss.config.js:

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

Kapsayıcı uygulamamın içinde tailwind-config paketini yerel geliştirme bağımlılığı olarak ekledim, index.css dosyama Tailwind yönergelerini ekledim.

Sonunda konteynerde oluşturduğum tailwind.config.cjs şöyle görünüyor:

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

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

Ve postcss.config.cjs

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

Belirttiğim gibi sorun, container uygulamanın verdiğim hiçbir Tailwind sınıfını uygulamıyor olmasıdır.

Hepinize şimdiden yardım için teşekkür ederim ve umarım güzel bir gününüz olur :)

Cevap #1

tailwind.config.js dosyasında .jsx/.tsx dosyalarının tam konumunu ekleyin, örneğin:

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

Cevap #2

Tailwind yapılandırmalarını paylaşmanın daha iyi bir yolu, ön ayarları kullanmaktır.

1. Paylaşılan yapılandırma klasörünüzde bir tailwind-presets.js dosyası oluşturun
2. Kullanmak istediğiniz tüm yapılandırma seçeneklerini tüm projelere ekleyin

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

3. Her projede, tailwind.config.js dosyasını ön ayarı kullanacak şekilde ayarlayın

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

Her projede herhangi bir seçeneği tek tek geçersiz kılabilirsiniz, ancak bu, yapılandırmayı paylaşmanın oldukça basit bir yoludur.