Hướng dẫn thêm Tailwind CSS vào dự án React JS

Tram Ho

Tailwind CSS và React JS

Tôi thấy Tailwind CSS là 1 thư viện CSS rất được ưa chuộng hiện nay. Với Bootstrap thì khả năng tùy biến thấp hơn nhiều so với Tailwind CSS. Tuy phải nhớ nhiều hơn vì mỗi class của Tailwind sẽ tương ứng với 1 thuộc tính trong CSS.

1. Tạo 1 project React

  • Đi đến thư mục của dự án

2. Cài đặt Tailwind CSS

3. Thêm thông tin vào file tailwind.config.js

file tailwind.config.js

4. Thêm các file của thư viện Tailwin vào file css của dự án

Ví dụ tôi sẽ thêm vào file index.css của React js. Bạn có thể thêm vào các file khác của dự án sau đó add file này vào file gốc index.html

index.css

5. Chạy thử dự án

App.js

Thêm code bên trên vào file App.js và chạy thử. Bạn có thể thấy các kết quả của các class tử tailwind như text-3xl, font-bold

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo