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.
Tóm Tắt
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 -vBước tiếp theo chúng ta sẽ tạo file package.json thông qua đoạn mã sau nha:
npm initVà 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 tailwindcssVà 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 src là nơi lưu trữ file style.css nha.
Bước tiếp theo mình sẽ đi vào import các hàm cơ bản trong file style.css thông qua đoạn mã sau:
@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 public dùng để lưu trữ file style.css sau khi đã biên dịch nha.
Phần cuối cùng chúng ta sẽ đi vào thực hiện biên dịch file style.css bằng đoạn script trong file package.json thông qua đoạn code dưới đây nha.
"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-cssVà 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ạ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 index.html và lưu trữ trong thư mục public:
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 style.css đã được biên dịch trong thư mục public nha.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Niem Vui Lap Trinh</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
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
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-400Bâ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:
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:
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:
.font-tên font weightSau 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
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:
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à:
.p-size(kích thước padding)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.
.m-size(kích thước margin)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:
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
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:
<div class="mt-8">
<!-- Card-->
<div class="bg-white shadow rounded overflow-hidden">
<img class="w-full object-cover" src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/tailwindcss/image1.jpg" >
<div class="m-4">
<span class="font-bold">Article Title</span>
<span class="block text-sm">Write By Niem Vui Lap Trinh</span>
</div>
</div>
</div>
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
Cách Sử dụng @apply Directive Trong Tailwind CSS
Thông thường khi một thành phần có nhiều class giống nhau thì việc ghi lại các class trên từng component sẽ làm mất nhiều thời gian viết mã. Để giúp bạn hiểu rõ hơn thì mình sẽ lấy hai button login và signup làm ví dụ nha.
Bây giờ mình sẽ đi vào thiết kế giao diện button thông qua đoạn mã sau nha:
Như hình ảnh phía trên thì bạn có thể thấy rằng hai button này đều có class chung là :
rounded-full px-4 py-2 cursor-pointer tracking-wider font-bold text-xs border-2 border-blue-500
Trong tailwind css cho phép chúng ta có thể gộp nhiều class giống nhau thành một class duy nhất bằng @apply. Để giúp bạn dễ dàng theo dõi thì mình sẽ hướng dẫn thông qua video sau nhé.
Mình sẽ giải thích các bước để giúp bạn hiểu rõ hơn nhé!
- Đầu tiên chúng ta sẽ đi vào copy các class chung của hai button login và signup.
- Tiếp theo truy cập vào file
style.csstrong thư mụcsrc - Tạo một class
btnvới lệnh @apply và dán các thuộc tính chung của hai button này. - Truy cập vào file package.json để chỉnh sửa lại đoạn script biên dịch tailwind css.
- Sau khi chỉnh sửa xong thì chúng ta cần phải chạy lại trình biên dịch để cập nhật file style.css trong public
- Bước cuối cùng là thiết lập class .btn vào hai phần đăng nhập và đăng ký.
Nếu bạn muốn tìm hiểu về @apply thì truy cập ở đây nha. Phần tiếp theo chúng ta sẽ đi vào tạo hiệu ứng hover cho button thông qua đoạn mã sau nha:
Với hover:bg-blue-500: mà nền sẽ chuyển sang màu xanh dương khi hover và hover:text-white: là chữ sẽ chuyển sang màu trắng khi ta hover.
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.
<nav class="flex justify-between">
<div>
<h1 class="font-bold p-6 border-b">
<a href="/" class="text-green-500 sm:text-blue-500 md:text-red-500">Niem Vui Lap Trinh</a>
</h1>
</div>
<ul class="flex p-4 justify-between">
<li class="text-blue-900 ml-4 font-bold">
<a href="#">
<span>Home</span>
</a>
</li>
<li class="text-blue-900 ml-4 font-bold">
<a href="#">
<span> Contact</span>
</a>
</li>
<li class="text-blue-900 ml-4 font-bold">
<a href="#">
<span>About</span>
</a>
</li>
</ul>
</nav>
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.config.js thông qua đoạn mã sau đây nha:
npx tailwindcss 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 src như hình ảnh bên dưới nha.
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ẻ body trong file index.html để thiết lập roboto font cho website.
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ẻ!
