Hướng dẫn tailwind css tutorial - hướng dẫn css tailwind

Bài viết này giúp bạn cài đặt Tailwind Css vào dự án của mình một cách dễ hiểu dễ thực hiện. Đây là một Framework Css giúp bạn tạo ra giao diện với css có độ tùy biến cao và hiệu suất cao.

Tính năng nổi bật của Tailwind

• Xây dựng giao diện chỉ cần khai báo class trên file html
• Chỉ xuất ra những file css chứa những class đã sử dụng trong giao diện.
• Dễ dàng thiết lập Responsive ngay trên file html
• Hỗ trợ tương tác hover, focus… ngay trên class html
• Tối ưu những cấu trúc html css có tính lặp lại
• Định nghĩa thêm class mới được phối hợp bởi các class có sẵn trong tailwind
• Hỗ trợ chế độ tối Dark Mode
• Dễ dàng mở rộng, chỉnh sửa và biến đổi
• Tăng tốc độ code với Extension thông minh trên VS Code.

Xem thêm: Tailwind là gì? Có nên học Tailwind Css không?

Video hướng dẫn cài đặt Tailwind Css

Để giúp bạn hiểu rõ tư duy cũng như các thao tác rõ ràng nên tôi đã làm video bên dưới. Bạn xem và thực hành để hiểu và sử dụng tailwind css trong quá trình xây dựng giao diện website của mình.

Chuẩn bị

Bạn chuẩn bị những thứ bên dưới để phục vụ cho quá trình cài đặt và sử dụng tailwind css trong dự án.

• nodejs
• VSCode + Extensiton Tailwind CSS IntelliSense, PostCSS Language Support

Các bước cài đặt tailwind Css vào website

Để cài đặt Tailwind Css vào website bạn thực hành từng bước theo video và phần ghi chú các câu lệnh đã sử dụng ở bên dưới.

1. Install Tailwind CSS

> npm install -D tailwindcss

> npx tailwindcss init

2. Configure your template paths

> "./public/**/*.{html,js}"

3. Add the Tailwind directives to your CSS

File: src/tailwind.css

> @tailwind base;

> @tailwind components;

> @tailwind utilities;

4. Start the Tailwind CLI build process

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

5. Start using Tailwind in your HTML

> 

Kết luận

Trong nội dung bài viết bao gồm video hướng dẫn này tôi tin rằng bạn sẽ hiểu và cài đặt được Tailwind Css vào trong dự án của mình.

Tuy nhiên để sử dụng Tailwind Css hiệu quả đầu tiên bạn phải nắm vững nền tảng Css cơ bản trong website, bạn có thể tham khảo Html Css 21 Ngày hoàn thiện kỹ năng Css của mình trước khi đến với Framework Css như Bootstrap, Tailwind Css.

1. Mở đầu

---

Đổi với các bạn làm việc bên phía front-end hoặc thậm chí cả back-end thì cái tên

> "./public/**/*.{html,js}"

6 không còn xa lạ gì với chúng ta. Đây là một trong những framework nổi tiếng hỗ trợ chúng ta trong việc style cho trang web của chúng ta. Framework này cũng đã gắn bó với mình trong rất nhiều các dự án khác nhau cho đến gần đây mình thấy có một cái tên khác bắt đầu được nổi lên đó là

> "./public/**/*.{html,js}"

7 và mình đã có cơ hội để thử sử dụng nó trong dự án mình tham gia. Trong bài viết này mình sẽ chia sẻ với các bạn về những trải nghiệm của mình với nó.

2. TailwindCSS

---

a. Ultility First

Nếu bạn đã từng dùng

> "./public/**/*.{html,js}"

6 thì chắc hẳn sẽ nhận ra phần này:

<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-warning">Warningbutton>

Sở dĩ các button nói trên có giao diện như vậy vì phần style với css của nó đã được Bootstrap viết sẵn vào các class có tên là

> "./public/**/*.{html,js}"

9,

> @tailwind base;

0, ... . Chi tiết khi bạn nhìn nó sẽ có dạng như sau:

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color 
        .15s ease-in-out,border-color 
        .15s ease-in-out,box-shadow 
        .15s ease-in-out;
}

Và một cái button được style đầy đủ như nói trên được gọi là 1 components. Bạn có thể tìm thấy rất nhiều các components khác mà Boostrap đã định nghĩa sẵn ở đây. Quay lại với Tailwindcss, nếu bạn truy cập vào docs của nó sẽ không có một mục nào là Components giống như Bootstrap vì ở đây thay vì tạo sẵn ra các components cho user thì Tailwindcss chỉ tập chung vào việc phát triển các helper class để giúp đỡ người dùng trong quá trình style cho trang web của mình. Đơn giản hơn bạn có thể hiểu như sau:Components giống như Bootstrap vì ở đây thay vì tạo sẵn ra các components cho user thì Tailwindcss chỉ tập chung vào việc phát triển các helper class để giúp đỡ người dùng trong quá trình style cho trang web của mình. Đơn giản hơn bạn có thể hiểu như sau:

Nếu Bootstrap cung cấp cho bạn luôn 1 class là

> @tailwind base;

1 với rất nhiều style khác nhau sẵn thì Tailwindcss chỉ cung cấp cho bạn các class tương ứng chỉ bằng với 1,2 dòng code css và bọc nó lại vào một class với tên tương tự là

> @tailwind base;

2,

> @tailwind base;

3,

> @tailwind base;

4 như hình minh họa ở trên. Đây giống như một bộ lego với nhiều mảnh ghép khác nhau và việc của bạn là kết hợp các mảnh ghép này để tạo ra bất cứ thứ gì bạn mong muốn.

Chính vì thế Tailwindcss còn được biết đến với phong cách Ultility first.Ultility first.

b. Try tailwindcss

Một điểm mà mình ưa thích ở Tailwindcss là nó có luôn cả document hướng dẫn setup cho một số framework backend hoặc front-end khác mà mình thường dùng:

Nếu bạn đơn giản muốn trải nghiệm thử thì có thể dùng thử Tailwindcss online ngay tại link đây hoặc nếu muốn thử nghiệm nhiều thứ hơn thì bạn có thể clone repo này của mình về và sử dụng.

Để dùng Tailwindcss thì công việc của bạn vô cùng đơn giản, thay vì phải ngồi code một đống code để thu được giao diện như này:

> npx tailwindcss init

0

Thì việc của bạn cần làm là hình dung ra những style mà mình cần thêm vào đoạn code html sau đó vào trong docs của Tailwind để tìm xem style đó sẽ có class tên là gì và sau đó copy paste vào code của bạn và kết quả sẽ như sau:

> npx tailwindcss init

1

Nếu mới lần đầu sử dụng, việc phải qua docs để copy & paste có thể làm bạn cảm thấy không thoải mái và bất tiện vì có thể bạn code tay sẽ nhanh hơn dùng Tailwind. Tuy nhiên nếu bạn cho nó thời gian bạn sẽ tự nhớ được các class hay dùng và sau đấy việc style cho web của bạn sẽ trở nên nhanh chóng và tiện lợi hơn rất nhiều so với tự code thuần. Bản thân mình khi mới tiếp cận cũng mất một chút thời gian cho việc nhớ được các class nhưng sau vài hôm dùng mình đã nhớ đủ để code được hầu hết các giao diện trong công việc và thêm nữa các class của nó cũng dễ nhớ do nó tương tự như nội dung css của nó luôn.

c. State & Selector

Ngoài việc hỗ trợ chúng ta trong việc style các element trên trang web của chúng ta bằng các css tĩnh như mình mới nói ở trên thì Tailwind còn cung cấp cho chúng ta thêm phương pháp dễ dàng để style cả các trạng thái như hover, focus, ... hay cả các selector như

> @tailwind base;

5,

> @tailwind base;

6 với cú pháp như sau:

> npx tailwindcss init

2

Bạn để ý ở đây ngoài màu nền là

> @tailwind base;

7, button của chúng ta có thêm một class là

> @tailwind base;

8 có nghĩa là khi chúng ta hover chuột vào button thì nó sẽ đổi giữa hai màu đỏ nói trên:

Về cách sử dụng thì giống như cách mà chúng ta thêm thêm state vào các element hoặc sử dụng các selector như ở mục trước. Để hiểu rõ hơn thì các bạn có thể nhìn ví dụ như sau:

> npx tailwindcss init

5

Ban đầu giao diện của chúng ta sẽ có dạng như sau ở màn mobile:

Sua đó mình đã thêm một số class mới là

> @tailwind utilities;

8 để thay đổi giao diện như trên về như thể này khi min-width là 768 (md):

Ở cỡ màn hình có chiều rộng tối thiêu là 768px mình đã làm cho thẻ

> @tailwind base;

9 và thẻ

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

0 nằm cạnh nhau đồng thời giới hạn chiệu rộng tối đa cho ảnh với class là

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

1. Đó là toàn bộ những gì bạn cần làm để có thể sử dụn tính năng responsive này. Ngoài ra, bạn cũng có thể tự định nghĩa các breakpoint khác theo ý muốn bằng cách sửa đổi file

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

2. Chi tiết bạn có thể xem tại đây.

e. Basic custom

Ngoài việc cung cấp sẵn cho chúng ta các helper class để sử dụng, Tailwind còn cho phép chúng ta chỉnh sửa hoặc thêm mới các class để phù hợp với Style Guide của chúng ta. Giả sử mình không muốn sử dụng các mã màu có sẵn của Tailwind như

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

3, ... thì mình có thể vào file

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

4 và thêm màu của riêng mình như sau:

> npx tailwindcss init

6

Sau đó trong code của mình có thể dùng luôn tất cả các class có thể gắn màu như text, background, ... như sau:

> npx tailwindcss init

7

Và đây là kết quả chúng ta thu được:

Tuy nhiên nếu ta viết màu trực tiếp như nói trên và thực tế ta sẽ phải tái sử dụng mã màu nó ở rất nhiều chỗ trong project của chúng ta thì việc viết trực tiếp như trên sẽ không hay lắm. Thay vào đó, trong file css chúng ta có thể viết như sau:

> "./public/**/*.{html,js}"

1

Và ta sẽ thu được kết quả như mong muốn ban đầu. Ở đây Tailwind cung cấp cho chúng ta thêm một function đặc biệt là

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

8 cho phép chúng ta lấy các giá trị mà ta thêm trong file

> npx tailwindcss -i ./src/tailwind.css -o ./public/css/tailwind.css --watch

4 ra để sử dụng trong file js. Tham số truyền vào cho hàm

> 

0 này bạn có thể hiểu rằng nó giống như đường dẫn trong đến vị trí của màu đó trong file config vậy:

> "./public/**/*.{html,js}"

2

g. Production build

Cuối cùng, khi chúng ta đã hoàn thiện phần code UI của chúng ta và muốn build thành bản production thì Tailwind còn hỗ trợ chúng ta tối ưu lại phần css chúng ta đã sử dụng trong dự án. Giả sử ta không thêm gì trong file config và chạy lệnh:

> "./public/**/*.{html,js}"

3

Thì ta sẽ thu được một folder

> 

1 và trong đó khi bạn mở file

> 

2 lên sẽ thấy như sau:

Và log ở phần chạy command ta sẽ thấy được file size của chúng ta đang khá lớn, hơn 3Mb:

Điều này không tốt chút nào vì nó sẽ làm web của bạn load chậm hơn do cần tải một file css lớn và đồng thời trên thực tế ta hầu như ít khi dùng hết toàn bộ class mà Tailwind cung cấp mà chỉ một phần mà thôi. Để làm điều này thì Tailwind cung cấp cho chúng ta phương pháp config đơn giản để loại bỏ những class mà chúng ta không dùng đến như sau:

> "./public/**/*.{html,js}"

4

Ở trong mục

> 

3, ta sẽ khai báo tên những class mà ta sử dụng Tailwind và dựa vào đây khi build lên thì các class mà chúng ta không dùng đến trong các file được khai báo ở đây sẽ bị loại bỏ khỏi production build. Chạy lại build một lần nữa và đây là kết quả ta thu được:

FIle của chúng ta lúc này chỉ còn có

> 

4 thay vì

> 

5 như ban đầu. Lưu ý ở phần

> 

3 này bạn hoàn toàn có thể khai báo theo dạng partern như sau:

> "./public/**/*.{html,js}"

5

3. Kết bài

---

Bài viết của mình đến đây là kết thúc, mong rằng nó sẽ giúp đỡ bạn phần nào nếu bạn quyết định thử sức với Tailwind. Nếu bạn có bất cứ thắc mắc gì hãy comment ngay ở phía dưới cho mình biết và cũng đừng quên để lại một upvote để ủng hộ mình nhé.