Hướng dẫn tailwind css vs css - tailwind css so với css

Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu Tailwind CSS là gì, các thuộc tính cơ bản và cách áp dụng chúng vào phát triển dự án thực tế nha.

Tailwind CSS Là Gì?

Tailwind là một utility-first CSS framework giúp bạn có thể nhanh chóng xây dựng giao diện người dùng. Thực ra nó cũng giống với các thư viện khác như Bootstrap, Materialize... nhưng điểm khác biệt chính của nó là khung CSS cấp thấp (low-level CSS framework) cung cấp cho chúng ta nhiều chức năng tuỳ biến phát triển component mà không cần phải viết lại CSS.

Cách Cài Đặt Tailwind CSS

Trước khi đi vào cài tailwind thì bạn phải cài Nodejs trên máy tính đã nha. Nếu bạn chưa cài Nodejs thì có thể truy cập đường dẫn bên dưới để tải về nha.

Nodejs Download

Nếu bạn chưa biết mình đã cài đặt hay chưa thì có thể kiểm tra thông qua terminal của máy tính bằng đoạn code sau:

node -v

Bước tiếp theo chúng ta sẽ tạo file

npm init

npm init

Và video dưới đây là cách mà thực hiện nhé!

Tiếp theo chúng ta sẽ đi vào cài đặt tailwind css bằng terminal thông qua đoạn mã:

npm install tailwindcss

Và dưới đây là video thực hiện nha.

Cách Thêm Tailwind Vào File CSS

Mặc dừ tailwind cung cấp rất nhiều tính năng hữu ích để tinh chỉnh component nhưng đa số trong dự án thực tế thì bắt buộc chúng ta phải viết các mã CSS riêng. Do đó trong phần này mình sẽ hướng dẫn bạn cách để có thể sử dụng tailwind và CSS với nhau nha.

Đầu tiên chúng sẽ tạo thư mục tên

npm init

npm init

Bước tiếp theo mình sẽ đi vào import các hàm cơ bản trong file

npm init

 @tailwind base;
 @tailwind components;
 @tailwind utilities;

Và để dễ hình dung cách Tailwind hoạt động thì bạn xem hình ảnh bên dưới nha.

Như bạn thấy ở hình ảnh trên thì sau khi tạo file lưu trữ CSS với các đoạn mã import tailwind cần thiết thì bước kế tiếp chúng ta sẽ tạo một thư mục

npm install tailwindcss

npm init

Phần cuối cùng chúng ta sẽ đi vào thực hiện biên dịch file

npm init

npm init

 "build-file-css": tailwindcss build src/style.css -o public/style.css

Ở đây mình có một số lưu ý là:

• "build-file-css": là tên khi chạy biên dịch bằng nodejs
• build src/style.css: tìm file biên dịch tại thư mục src với file tên là style.css
• -o public/style.css: sau khi biên dịch thư lưu file tại thư mục public với tên là style.css

Bay giờ chúng ta sẽ chạy biên dịch thông qua đoạn mã:

npm run build-file-css

Và kết quả bạn xem bên dưới nha:

Nếu bạn muốn tham khảo thêm về cách biên dịch tailwind css ở đây nha.

Để giúp bạn có thể thiết lập tailwind css dễ dàng hơn thì mình có tạo file sẵn và chỉ cần tải về là có thể sử dụng rồi nha.Tải File Tailwind
Tải File Tailwind

Tạo Trang HTML Và Liên Kết Tailwind CSS

Trong phần này chúng ta sẽ đi vào tạo file

npm install tailwindcss

npm install tailwindcss

Tiếp theo chúng ta sẽ đi vào tạo cấu trúc trang HTML và liên kết nó với file

npm init

npm install tailwindcss

Phần tiếp theo mình sẽ thêm các code HTML cần thiết để giúp chúng ta thực hiện các ví dụ với tailwind CSS dễ dàng hơn.

Để bạn không phải mất thời gian code thì mình sẽ đặt đường dẫn download ở phía dưới nha.Tải File index.html
Tải File index.html

Font Và Màu Sắc Trong Tailwind CSS

Trong phần này chúng ta sẽ đi vào tìm hiểu cách tạo màu trong tailwind thông qua bảng sau nha:

Như bạn thấy thì mình sẽ thiết lập màu sắc thông qua cú pháp sau:

.text-color(màu sắc)-weight(Độ đậm nhạt)

Nếu bạn muốn tìm hiểu về text-color thì truy cập ở đây nha. Ví dụ khi muốn mình muốn tạo chữ màu đỏ với weight là 400 thì chúng ta sẽ gọi như sau:

.text-red-400

Bây giờ chúng ta sẽ đi vào thiết lập màu sắc cho các thành phần trong file index.html nha.

Tiếp theo mình sẽ đi vào thiết lập font-size cho nội dung trong trang web bằng các class có sẵn trong bảng dưới đây:font-size cho nội dung trong trang web bằng các class có sẵn trong bảng dưới đây:

Khi bạn muốn thiết lập font-size thì chúng ta chỉ cần theo cú pháp sau:

.text-size(kích cỡ bạn muốn)

Nếu bạn muốn tìm hiểu về font-size thì truy cập ở đây nha. Và để giúp bạn dễ hiểu thì mình sẽ đi vào thực hành ví dụ nha.

Trong phần này mình sẽ đi vào tạo font weight cho các tiêu đề bằng các class trong bảng sau đây:font weight cho các tiêu đề bằng các class trong bảng sau đây:

Nếu bạn muốn tìm hiểu về font-weight thì truy cập ở đây nha. Như hình ở trên thì chúng ta rút được cú pháp của font-weight như sau:

npm init

Sau khi nắm đươc cú pháp thì bạn hãy cùng mình đi vào ví dụ sau nha.

Để bạn không phải mất thời gian code phần này thì mình sẽ đặt đường dẫn download ở phía dưới nha.Tải File index.html
Tải File index.html

Margin, Padding Và Border

Bây giờ chúng ta sẽ đi vào tìm hiểu về padding trong Tailwind thông qua bảng sau nha:padding trong Tailwind thông qua bảng sau nha:

Nếu bạn muốn tìm hiểu về padding thì truy cập ở đây nha. Như bạn thấy thì chúng ta sẽ có cú pháp tổng quát cho padding là:

npm init

Ngoài ra nó còn có các thuộc tính padding khác giúp chúng ta có nhiều lựa chọn hơn như:

• px-{size}: Thiết lập padding theo chiều ngang. Ví dụ px-1 tương đương với padding-left: 0.25rem; padding-right: 0.25rem.
• py-{size}: Thiết lập padding theo chiều dọc. Ví dụ py-1 tương đương với padding-top: 0.25rem; padding-bottom: 0.25rem.
• pt-{size}: Thiết lập padding top.
• pb-{size}: Thiết lập padding bottom.
• pl-{size}: Thiết lập padding left.
• pr-{size}: Thiết lập padding right.

Bây giờ chúng ta sẽ đi vào ví dụ để hiểu rõ hơn nhé!

Đối với margin thì cú pháp và cách sử dụng cũng y chang như padding nha. Điểm khác biệt của nó là thay vì sử dụng p thì chúng ta sẽ sử dụng m.margin thì cú pháp và cách sử dụng cũng y chang như padding nha. Điểm khác biệt của nó là thay vì sử dụng p thì chúng ta sẽ sử dụng m.

npm init

Nếu bạn muốn tìm hiểu về margin thì truy cập ở đây nha. Bây giờ mình sẽ đi vào ví dụ chi tiết nha.

Phần tiếp theo chúng ta sẽ đi vào tìm hiểu thuộc tính border thông qua hình ảnh sau:border thông qua hình ảnh sau:

Mình có một số lưu ý khi sử dụng border trong tailwind css là:

• Công Thức tổng quát là : border-size
• border-l-size: Tạo border left
• border-r-size: Tạo border right
• border-t-size: Tạo border top
• border-b-size: Tạo border bottom

Nếu bạn muốn tìm hiểu về border thì truy cập ở đây nha. Bây giờ chúng ta sẽ đi vào ví dụ chi tiết nha.

Để bạn không phải mất thời gian code phần này thì mình sẽ đặt đường dẫn download ở phía dưới nha.Tải File index.html
Tải File index.html

Sử dụng Flexbox Trong TailwindCSS

Trong phần này chúng ta sẽ đi vào tìm hiểu cách áp dụng thuộc tính flexbox trong tailwind css để căn chỉnh vị trí cho phần đăng ký và đăng nhập trong file index.html nha. Nếu bạn muốn tìm hiểu về flexbox thì truy cập ở đây nha.

Sử dụng Breakpoints Trong TailwindCSS

Trong phần này sẽ đi vào tìm hiểu các class giúp chúng ta có thể thiết lập thuộc tính CSS dựa trên các màn hình khác nhau nhé. Nếu bạn muốn tìm hiểu về Breakpoints thì truy cập ở đây nha.

Như hình ảnh ở trên thì các tên class trong tailwind sẽ tương ứng với các màn hình thiết bị khác nhau. Để giúp bạn dễ hình dung thì chúng ta sẽ đi vào ví dụ chi tiết trong video dưới đây nha.

Mình có lưu ý một số điểm ở video trên là:

• text-green-500: Sử dụng màu xanh lá cây mặc định
• sm:text-blue-500: Sử dụng màu xanh da trời khi màn hình có kích thước lớn hơn 640 px
• md:text-red-500: Sử dụng màu đỏ khi màn hình có kích thước lớn hơn 768 px

Xây dựng Component Card

Trong phần này chúng ta sẽ đi vào thiết lập component card thông qua các class cơ bản của tailwind css nha. Đầu tiên mình sẽ đi vào thiết lập vị trí, màu nền, shadow... cho card thông qua đoạn mã sau nha:

npm init

Và kết quả bạn xem video dưới đây nha.

Sử Dụng Grid

Trong phần này chúng ta sẽ sử dụng class grid trong tailwind css để chia layout trong website nha. Để giúp bạn dễ hình dung thì chúng ta hãy đi vào ví dụ sau đay nhé! Nếu bạn muốn tìm hiểu về Grid thì truy cập ở đây nha.

Mình có một số lưu ý dành cho bạn là:

• Để sử dụng đươc grid trong css thì ta sẽ gọi class grid.
• lg:grid-cols-3: Sẽ chia 3 cột đối với màn hình lớn hơn 1024px
• md:grid-cols-2: Sẽ chia 2 cột đối với màn hình lớn hơn 768px
• sm:grid-cols-1: Sẽ chia 1 cột đối với màn hình lớn hơn 640px
• gap-10: Là khoảng cách giữa các item trong grid.

Để bạn không phải mất thời gian code phần này thì mình sẽ đặt đường dẫn download ở phía dưới nha.Tải File index.html
Tải File index.html

Sử dụng Flexbox Trong TailwindCSS

Trong phần này chúng ta sẽ đi vào tìm hiểu cách áp dụng thuộc tính flexbox trong tailwind css để căn chỉnh vị trí cho phần đăng ký và đăng nhập trong file index.html nha. Nếu bạn muốn tìm hiểu về flexbox thì truy cập ở đây nha.

Sử dụng Breakpoints Trong TailwindCSS

Trong phần này sẽ đi vào tìm hiểu các class giúp chúng ta có thể thiết lập thuộc tính CSS dựa trên các màn hình khác nhau nhé. Nếu bạn muốn tìm hiểu về Breakpoints thì truy cập ở đây nha.

Như hình ảnh ở trên thì các tên class trong tailwind sẽ tương ứng với các màn hình thiết bị khác nhau. Để giúp bạn dễ hình dung thì chúng ta sẽ đi vào ví dụ chi tiết trong video dưới đây nha.

Mình có lưu ý một số điểm ở video trên là:

text-green-500: Sử dụng màu xanh lá cây mặc định

• sm:text-blue-500: Sử dụng màu xanh da trời khi màn hình có kích thước lớn hơn 640 px
• md:text-red-500: Sử dụng màu đỏ khi màn hình có kích thước lớn hơn 768 px
• Xây dựng Component Card
• Trong phần này chúng ta sẽ đi vào thiết lập component card thông qua các class cơ bản của tailwind css nha. Đầu tiên mình sẽ đi vào thiết lập vị trí, màu nền, shadow... cho card thông qua đoạn mã sau nha:
• Và kết quả bạn xem video dưới đây nha.
• Sử Dụng Grid

Trong phần này chúng ta sẽ sử dụng class grid trong tailwind css để chia layout trong website nha. Để giúp bạn dễ hình dung thì chúng ta hãy đi vào ví dụ sau đay nhé! Nếu bạn muốn tìm hiểu về Grid thì truy cập ở đây nha.

Mình có một số lưu ý dành cho bạn là:

Xây dựng Giao Diện Cho Navbar

Trong phần này chúng ta sẽ sử dụng một số class cơ bản của tailwind css để xây dựng navbar cho website nha.

npm init

Kết quả bạn xem hình ảnh bên dưới nha.

Cách Thiết Lập Font Cho Dự Án

Bước đầu tiên chúng ta sẽ mở terminal và tạo file

 @tailwind base;
 @tailwind components;
 @tailwind utilities;

npm init

Để dễ hiểu hơn bạn xem video sau nha:

Phần tiếp theo chúng ta sẽ đi vào đi vào Google Font để copy đoạn mã import vào file css nha:

Tiếp theo chúng ta sẽ import đoạn mã trên vào file style.css trong thư mục

npm init

Bước kế tiếp chúng ta sẽ đi vào import Roboto Font bằng file tailwind.cònig.js như hình ảnh bên dưới:

Bước cuối cùng mình sẽ chạy lại lệnh biên dịch CSS và thêm class .font-body vào thẻ

 @tailwind base;
 @tailwind components;
 @tailwind utilities;

Nếu bạn muốn tìm hiểu về thiết lập Configuration js thì truy cập ở đây nha.

Nếu bạn muốn tìm hiểu thêm các ví dụ về tailwind css thì truy cập 20 Công Cụ Và Ví Dụ Cho Tailwind CSS.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức cơ bản về Tailwind CSS và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!