<blockquote>Bạn đang lo lắng vì đặt tên class, sợ bị trùng css không mong muốn, hay muốn một framework hỗ trợ css dễ học mà dễ tùy biến theo ý thích của mình đã có tailwindcss lắng lo cho điều đó.</blockquote>
1. Tailwindcss là gì?
Tailwind css là một utility-first CSS framework nó hỗ trợ phát triển xây dựng nhanh chóng giao diện người dùng, nó cũng có điểm chung giống như Bootstrap &amp; điểm làm nó nổi bật hơn cả đó là chúng ta có thể tùy biến phát triển css theo cách mà chúng ta định nghĩa ra.
2. Cách cài đặt và sử dụng
2.1 Cài đặt với Reactjs (Tailwind CLI)
Cài đặt CSS Tailwind
Cài đặt tailwindcss qua npm, sau đó chạy lệnh init để tạo tệp của bạn: tailwind.config.js
<pre>npm install -D tailwindcss</pre>
<pre>npx tailwindcss init</pre>
Thêm đường dẫn đến tất cả các tệp mẫu trong tailwind.config.js của bạn.
<pre>/** @type {import('tailwindcss').Config} */</pre>
<pre>module.exports = {</pre>
<pre> content: ["./src/**/*.{js,jsx,ts,tsx}"],</pre>
<pre>theme: {</pre>
<pre> extend: {},</pre>
<pre> },</pre>
<pre> plugins: [],</pre>
<pre>}</pre>
Thêm @tailwind chỉ thị cho từng lớp của Tailwind vào tệp của bạn: ./src/index.css
<pre>@tailwind base;</pre>
<pre>@tailwind components;</pre>
<pre>@tailwind utilities;</pre>
Done, bắt đầu sử dụng nó nào.
<pre>export default function App() {</pre>
<pre> return (</pre>
<pre> &lt;h1 className="text-3xl font-bold underline"&gt;</pre>
<pre> Hello world!</pre>
<pre> &lt;/h1&gt;</pre>
<pre> )</pre>
<pre>}</pre>
3. Một số framework được tailwind hỗ trợ
- AngularJS, ReactJS, VueJS, NextJS, Laravel, Gatsby, Nuxt.js.
4. Dưới đây là một số mẹo và kinh nghiệm để sử dụng Tailwind CSS hiệu quả:
- Tìm hiểu các lớp cơ bản: Đầu tiên, hãy nắm vững các lớp cơ bản của Tailwind CSS như bg, text, p, m, w, h, flex, grid, và nhiều lớp khác. Hiểu cách sử dụng chúng sẽ giúp bạn xây dựng giao diện nhanh hơn.
- Tùy chỉnh thiết lập: Tailwind CSS cho phép bạn tùy chỉnh các thiết lập của nó bằng cách chỉnh sửa tệp cấu hình (tailwind.config.js). Bạn có thể thay đổi màu sắc, kích thước, font chữ, và nhiều thứ khác để phù hợp với thiết kế của bạn.
- Sử dụng các plugin: Tailwind CSS có nhiều plugin có sẵn mà bạn có thể sử dụng để mở rộng chức năng của nó. Ví dụ, @tailwindcss/forms cho phép bạn tùy chỉnh giao diện các biểu mẫu dễ dàng hơn.
- Tạo tùy chỉnh lớp: Bạn có thể tạo các lớp tùy chỉnh bằng cách sử dụng directive @layer. Điều này giúp bạn quản lý các lớp tùy chỉnh một cách hiệu quả và giảm nguy cơ xung đột lớp.
- Tìm hiểu về responsive design: Tailwind CSS có hỗ trợ tốt cho responsive design. Sử dụng các lớp như sm, md, lg, và xl để điều chỉnh giao diện của bạn cho các kích thước màn hình khác nhau.
- Sử dụng Dark Mode: Tailwind CSS có hỗ trợ Dark Mode. Hãy tận dụng chúng để cung cấp trải nghiệm tối ưu cho người dùng
5. Tổng kết
- Tailwindcss là framework rất dễ học cho người mới bắt đầu sử dụng css, tuy nhiên để sử dụng tốt thì cần phải nắm vững kiến thức của css thuần trước.
- Trên đây là giới thiệu cũng như cách cài đặt tailwind css cơ bản với Reactjs, mọi người có thể tham khảo cách sử dụng cũng như cách cài đặt trong 1 số framework khác https://tailwindcss.com.

Bạn đang lo lắng vì đặt tên class, sợ bị trùng css không mong muốn, hay muốn một framework hỗ trợ css dễ học mà dễ tùy biến theo ý thích của mình đã có tailwindcss lắng lo cho điều đó.

Hướng dẫn sử dụng tailwind css cơ bản