typescript - วิธีติดตั้ง tailwindcss ใน monorepo แบบ turborepo

// หมายเหตุ: ฉันไม่ได้มองหาวิธีแก้ปัญหา ฉันอยู่ที่นี่เพียงเพื่อบอกคุณว่าฉันแก้ปัญหานี้อย่างไร

npx create-turbo@latest //สร้างโครงการ monorepo

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

ปัญหาคือไม่สามารถสร้างไฟล์ tailwind.config.json ได้

ถ้าคุณสามารถสร้างไฟล์ "tailwind.config.json" ได้ คุณก็สามารถใช้ tailwindcss อย่างมีความสุขผ่านการนำเข้า

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

ในการติดตั้ง Tailwind ในมอนอรีโป ใช้ขั้นตอนดังต่อไปนี้ :-

เริ่มต้นด้วยการไปที่ apps/web และในไฟล์ package.json ให้เพิ่มสิ่งต่อไปนี้ด้วยตนเอง:-

"devDependencies": {
"tailwindcss": "^3.0.0",
"postcss": "^8.0.0",
"autoprefixer": "^10.0.0"
}

แล้วจึงรัน:-

npm install

หลังจากนี้ คำสั่งต่อไปจะไม่แสดงข้อผิดพลาดใดๆ

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

คำตอบ #1

TailwindCSS เวอร์ชัน 3

การติดตั้ง TailwindCSS เวอร์ชัน 3 และ 4 มีความแตกต่างกัน คุณคาดหวังการติดตั้งเวอร์ชัน 3 แต่เวอร์ชัน 4 เป็นเวอร์ชันล่าสุด สำหรับการติดตั้งเวอร์ชัน 3 ให้ใช้:

npm install -D tailwindcss@3

เมื่อทำสิ่งนี้เสร็จ ขั้นตอนอื่นๆ จะยังคงเหมือนเดิม:

เริ่มต้นกับ Tailwind CSS - เอกสาร TailwindCSS v3

TailwindCSS v4 กับ PostCSS

ทำตามคู่มือ TailwindCSS สำหรับ PostCSS:

ติดตั้ง TailwindCSS v4 พร้อม PostCSS - เอกสาร TailwindCSS v4

npm install tailwindcss @tailwindcss/postcss postcss

จากนั้นคุณสามารถรวม TailwindCSS เข้ากับ postcss.config.mjs ได้อย่างง่ายดายโดยใช้ปลั๊กอิน @tailwindcss/postcss ที่ออกมาจากเวอร์ชัน v4 ดังนี้:

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

และนำเข้า TailwindCSS ไปยัง global.css หลัก:

@import "tailwindcss";

มีอะไรเปลี่ยนแปลงจาก v4 บ้าง?

ใน v4 มีการเปลี่ยนแปลงที่ทำให้ไม่สามารถใช้งานร่วมกันได้จำนวนมาก จำเป็นต้องใช้ Node.js อย่างน้อยเวอร์ชัน 20 ในการใช้งาน กระบวนการ init ถูกลบออกไป ไฟล์ tailwind.config.js ถูกยกเลิกเพื่อสนับสนุนการกำหนดค่าแบบ CSS-first คำสั่ง @tailwind ถูกแทนที่ด้วย @import "tailwindcss"; การสนับสนุนสำหรับ Sass, Less และ Stylus preprocessors ถูกลบ ดูการเปลี่ยนแปลงทั้งหมดได้ที่:

การอัปเกรดโปรเจกต์ Tailwind CSS ของคุณจาก v3 เป็น v4 - เอกสาร TailwindCSS v4
การตรวจจับแหล่งที่มาของอัตโนมัติจาก TailwindCSS v4 - StackOverflow
เลิกใช้: การรองรับโปรเซสเซอร์ Sass, Less และ Stylus - StackOverflow
ลบคำสั่ง @tailwind - StackOverflow
ปัญหาในการติดตั้งด้วยคำสั่ง "npx tailwindcss init -p" - StackOverflow
ตัวเลือกการกำหนดค่า CSS-first ใหม่ใน v4 - StackOverflow
TailwindCSS v4 สามารถใช้งานร่วมกับ v3 ได้ - StackOverflow