typescript - cara memasang tailwindcss dalam monorepo seperti turborepo

// Nota: Saya tidak mencari penyelesaian. Saya hanya di sini untuk memberitahu anda bagaimana saya menyelesaikan isu ini

npx create-turbo@latest //cipta projek monorepo

cd apps/web  //should be present in you app directory
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

masalah adalah tidak dapat membuat tailwind.config.json

jika anda mampu membuat fail "tailwind.config.json" maka anda boleh menggunakan tailwindcss dengan gembira melalui import

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Untuk memasang tailwind dalam monorepo gunakan langkah-langkah berikut :-

  1. mula-mula pergi ke apps/web dan dalam package.json tambahkan yang berikut secara manual:-
"devDependencies": {
"tailwindcss": "^3.0.0",
"postcss": "^8.0.0",
"autoprefixer": "^10.0.0"
}

kemudian jalankan:-

npm install

selepas ini arahan berikut tidak akan memberikan sebarang ralat..

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Jawapan #1

TailwindCSS v3

Pemasangan TailwindCSS v3 dan v4 adalah berbeza. Anda menjangkakan pemasangan v3, tetapi v4 adalah versi terkini yang baru. Untuk pemasangan v3, gunakan:

npm install -D tailwindcss@3

Setelah ini selesai, langkah-langkah lain kekal tidak berubah:

  • Mula dengan Tailwind CSS - Dokumentasi TailwindCSS v3

TailwindCSS v4 dengan PostCSS

Ikuti panduan TailwindCSS untuk PostCSS:

  • Pasang TailwindCSS v4 dengan PostCSS - Dokumentasi TailwindCSS v4
npm install tailwindcss @tailwindcss/postcss postcss

Kemudian anda boleh dengan mudah mengintegrasikan TailwindCSS ke postcss.config.mjs menggunakan plugin @tailwindcss/postcss yang dikeluarkan sejak v4 seperti ini:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

Dan import TailwindCSS ke dalam global.css utama:

@import "tailwindcss";

Apa yang berubah dari v4?

Dalam v4, pelbagai perubahan yang memecahkan telah diperkenalkan. Sekurang-kurangnya Node.js v20 diperlukan untuk penggunaan. Proses init telah dialih keluar. Fail tailwind.config.js telah ditamatkan kegunaannya bagi memberi keutamaan kepada konfigurasi CSS-pertama. Arahan @tailwind telah digantikan dengan @import "tailwindcss";. Sokongan untuk pemproses Sass, Less, dan Stylus telah dialih keluar. Lihat semua perubahan:

  • Meningkatkan projek Tailwind CSS anda dari v3 ke v4 - Dokumentasi TailwindCSS v4
  • Pengesan Sumber Automatik dari TailwindCSS v4 - StackOverflow
  • Usang: Sokongan pemproses pra-Sass, Less dan Stylus - StackOverflow
  • Menghapus arahan @tailwind - StackOverflow
  • Masalah memasang dengan arahan "npx tailwindcss init -p" - StackOverflow
  • Pilihan konfigurasi CSS-pertama baharu dalam v4 - StackOverflow
  • TailwindCSS v4 serasi dengan v3 - StackOverflow