Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tailwind CSS Dành Cho Bạn Mới Bắt Đầu 2021

Tailwind CSS Dành Cho Bạn Mới Bắt Đầu 2021


Ngày 6 Tháng 9 Năm 2021

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.

tailwind 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
Check Nodejs Version

Bước tiếp theo chúng ta sẽ tạo file package.json thông qua đoạn mã sau nha:

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 src là nơi lưu trữ file style.css nha.

Create file style css

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.

How Tailwind css work

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.

Create Folder Public

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
Add script in package json

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ạ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:

Create File index.html

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:

Color in tailwind

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 in tailwind css

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 in tailwind css

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 weight

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

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 in tailwind css

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:

Border in tailwind css

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.

Breakpoints in tailwind css

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:

Thiết Lập Style Cho Button tailwind css

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.css trong thư mục src
  • Tạo một class btn vớ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:

Thiết Lập Hiệu Ứng Hover Cho Button tailwind css

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.

Result Of Navbar

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:

Google Font import

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.

Google Font import

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:

Google Font import

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ẻ!