Cài đặt
Tailwind CSS hoạt động bằng cách quét tất cả các file HTML, component JavaScript và bất kỳ template nào khác của bạn để tìm tên class, tạo ra các style tương ứng và sau đó ghi chúng vào một file CSS tĩnh.
Nó nhanh, linh hoạt và đáng tin cậy — với zero-runtime.
Cài đặt Tailwind CSS dưới dạng plugin PostCSS là cách liền mạch nhất để tích hợp nó với các framework như Next.js và Angular.
Cài đặt tailwindcss, @tailwindcss/postcss, và postcss qua npm.
npm install tailwindcss @tailwindcss/postcss postcssThêm @tailwindcss/postcss vào file postcss.config.mjs của bạn, hoặc bất cứ nơi nào PostCSS được cấu hình trong dự án của bạn.
export default { plugins: { "@tailwindcss/postcss": {}, }}Thêm một @import vào file CSS của bạn để import Tailwind CSS.
@import "tailwindcss";Chạy quá trình build của bạn với npm run dev hoặc bất kỳ lệnh nào được cấu hình trong file package.json của bạn.
npm run devĐảm bảo CSS đã biên dịch của bạn được bao gồm trong <head> (framework của bạn có thể xử lý việc này cho bạn), sau đó bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/styles.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>