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 Vite là cách liền mạch nhất để tích hợp nó với các framework như Laravel, SvelteKit, React Router, Nuxt, và SolidJS.
Bắt đầu bằng cách tạo một dự án Vite mới nếu bạn chưa thiết lập. Cách tiếp cận phổ biến nhất là sử dụng Create Vite.
npm create vite@latest my-projectcd my-projectCài đặt tailwindcss và @tailwindcss/vite qua npm.
npm install tailwindcss @tailwindcss/viteThêm plugin @tailwindcss/vite vào cấu hình Vite của bạn.
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})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="/src/style.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>