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.
Sử dụng Play CDN để thử Tailwind ngay trong trình duyệt mà không cần bước build nào. Play CDN được thiết kế cho mục đích phát triển, và không dành cho production.
Thêm thẻ script Play CDN vào <head> của file HTML của bạn, 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" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>Sử dụng type="text/tailwindcss" để thêm CSS tùy chỉnh hỗ trợ tất cả các tính năng CSS của Tailwind.
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <style type="text/tailwindcss"> @theme { --color-clifford: #da373d; } </style> </head> <body> <h1 class="text-3xl font-bold underline text-clifford"> Hello world! </h1> </body></html>