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ách đơn giản nhất và nhanh nhất để bắt đầu với Tailwind CSS từ đầu là sử dụng công cụ Tailwind CLI. CLI cũng có sẵn dưới dạng một tệp thực thi độc lập nếu bạn muốn sử dụng nó mà không cần cài đặt Node.js.
Cài đặt tailwindcss và @tailwindcss/cli qua npm.
npm install tailwindcss @tailwindcss/cliThêm dòng import @import "tailwindcss"; vào file CSS chính của bạn.
@import "tailwindcss";Chạy công cụ CLI để quét các file nguồn của bạn tìm các class và build CSS của bạn.
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watchThêm file CSS đã biên dịch của bạn vào <head> và 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="./output.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>