Tailwind: Giới thiệu về Tailwind CSS - Day 1

Tailwind CSS là gì?

Tailwind CSS được tạo ra bởi Adam Wathan, một lập trình viên người Canada. Ban đầu, Adam chỉ muốn tạo ra một công cụ nội bộ để tăng tốc việc thiết kế UI mà không cần rời khỏi HTML. Nhưng chính triết lý "utility-first" của anh lại mở ra một hướng đi hoàn toàn mới: viết giao diện bằng cách sử dụng các tiện ích nhỏ (utility classes) thay vì viết CSS riêng cho từng component.

Tailwind được giới thiệu lần đầu vào năm 2017, và kể từ đó đã tạo nên một cuộc cách mạng nhỏ trong cách thiết kế web — vừa nhanh, vừa chuẩn, vừa nhất quán. Hệ sinh thái của Tailwind cũng phát triển cực kỳ mạnh, từ Tailwind UI (bộ giao diện trả phí do chính Adam phát triển) đến Headless UI (component UI không phụ thuộc vào style), và giờ là hàng loạt plugin, theme, và công cụ build.

Tailwind Documentation: https://tailwindcss.com/docs/installation/using-vite

Tailwind CSS Github: https://github.com/tailwindlabs/tailwindcss 

Taiwind UI Pricing: https://tailwindcss.com/plus/ui-blocks/marketing/sections/pricing

Headless UI: https://headlessui.com/

Tailwind play: https://play.tailwindcss.com/ 

Tailwind CDN: https://tailwindcss.com/docs/installation/play-cdn

Những tính năng nổi bật của Tailwind (Core concept of Tailwind Framework)

Framework là gì? 

CSS frameworks là những “bộ công cụ giao diện” giúp bạn xây dựng giao diện web nhanh hơn, không cần viết CSS từ đầu. Chúng cung cấp các class, layout, và component có sẵn như nút bấm, menu, thẻ card, v.v. 

Các Framework nổi tiếng: Bootstrap, Tailwind CSS,Bulma, Foundation, Material Design, ...

Phần sau mình sẽ tập trung về Tailwind CSS 

Utility-First Methology

Tailwind CSS sử dụng một cách tiếp cận đặc biệt gọi là "utility-first", nghĩa là thay vì cung cấp một vài công cụ lớn (component). Tailwind CSS cung cấp cho bạn rất nhiều công cụ nhỏ. Ví dụ, bạn có thể dùng bg-blue-500 để tô nền màu xanh, p-4 để thêm khoảng cách đệm (padding), và font-bold để làm chữ in đậm. Bạn phối hợp các class nhỏ này trực tiếp vào phần tử HTML để tạo ra giao diện theo ý muốn.

Cách làm này giúp bạn kiểm soát hoàn toàn thiết kế mà không bị giới hạn bởi các component dựng sẵn. 

Tailwind có hàng trăm class tiện ích như vậy, từ màu sắc, khoảng cách, kiểu chữ... đến các yếu tố nâng cao hơn. Nó còn tự xử lý việc hiển thị tương thích trên nhiều thiết bị và trình duyệt. Ngoài ra, bạn cũng có thể dễ dàng tuỳ chỉnh các giá trị này thông qua file tailwind.config.js để phù hợp với phong cách của riêng bạn.

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-lg">
  Hello Tailwind!
</div>

Responsive

Tailwind giúp việc thiết kế website trở nên cực kỳ dễ dàng, đặc biệt là khi bạn muốn nó hiển thị đẹp trên mọi thiết bị. Nó cung cấp các class tiện ích phản hồi theo kích thước màn hình, ví dụ như md:text-lg sẽ tăng cỡ chữ khi hiển thị trên màn hình trung bình trở lên.

Bạn cũng có thể thêm hiệu ứng khi người dùng tương tác, chẳng hạn như khi rê chuột (hover) lên nút hoặc khi một ô nhập liệu được chọn (focus).

Với Tailwind, bạn có thể xây dựng bố cục phức tạp và các tương tác ngay trong HTML mà không cần viết nhiều CSS. Các thành phần như menu thả xuống, popup trở nên đơn giản hơn bao giờ hết. Framework này còn đi kèm với rất nhiều công cụ hỗ trợ canh chỉnh vị trí, ẩn/hiện phần tử và tạo ra những thiết kế hiện đại, phản hồi tốt trên mọi loại thiết bị. 

<p class="text-sm md:text-base lg:text-xl">
  Display beautifully on all screen sizes
</p>

Common Utilities

Dưới đây là 1 số common class trong Tailwind CSS:

Bạn có thể thay đổi màu nền và màu chữ một cách dễ dàng

<div class="bg-blue-500 text-white">...</div>

Khoảng cách & Kích thước (Spacing & Sizing) 

Điều chỉnh khoảng cách xung quanh phần tử và kích thước của nó

class="p-4 m-2 w-1/2"

Những ví dụ trên cho thấy Tailwind CSS cung cấp cho bạn các “mảnh ghép” nhỏ để bạn có thể tùy biến giao diện gần như bất kỳ phần nào trên trang web của mình.

Getting Started

Bạn có thể bắt đầu dùng Tailwind CSS dễ dàng chỉ với vài bước:

Cài đặt Tailwind qua npm

npm install -D tailwindcss
npx tailwindcss init

Tạo file tailwind.config.js để cấu hình

Dùng class Tailwind trong HTML/JSX

Tối ưu hoá bằng PurgeCSS hoặc JIT mode

Tạo Project với Tailwindcss 3

Tạo thư mục dự án

mkdir tailwind-demo
cd tailwind-demo

Cấu hình project với Tailwindcss 3

npm install -D tailwindcss@3

Lưu ý: với version 4 có nhiều thay đổi, và câu lệnh init không còn tồn tại

Đây là thời điểm bạn tạo file Tailwind CSS configuration

npx tailwindcss init -p

Câu lệnh này sẽ tạo file tailwind.config.js trong project folder của bạn

Mở file tailwind.config.js lên

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Thêm vào content đường dẫn đến file HTML

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Giải thích:

• Trong dự án này, các file .html được đặt trong thư mục src.
• Tailwind sẽ tìm tất cả các file HTML có trong thư mục đó

VD:

Tất cả đều sẽ được Tailwind scan để tìm các class mà bạn dùng, ví dụ như bg-red-500, text-xl… 

src/
├── index.html
├── about.html
├── contact.html

Thuộc tính theme: Trong tệp cấu hình, bạn có thể truy cập và thay đổi các giá trị mặc định của Tailwind CSS hoặc thêm các giá trị mới vào theme.

Ví dụ về tùy chỉnh theme màu sắc:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#1890ff', // Màu xanh dương chính'secondary': '#f50', // Màu đỏ phụ
      },
    },
  },
};

plugins dùng để bổ sung các tính năng không có sẵn trong Tailwind CSS. Bạn có thể dùng plugin chính thức, bên thứ ba hoặc tự viết.

Ví dụ:

// tailwind.config.js
const typography = require('@tailwindcss/typography');

module.exports = {
  plugins: [typography],
};

Tiếp theo, bạn tạo 1 file index.html theo đường dẫn src/index.html với nội dung như sau:

<!doctype html>
<html lang="en">
<head>
    <title>Sample HTML Document</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1 class="text-4xl font-semibold italic">
        This is sample text
    </h1>
</body>
</html>

Bạn dùng class css text-4xl font-semibold italic cho paragraph. Trình duyệt sẽ không tự hiểu nếu bạn chưa nạp file CSS của Tailwind. Vấn đề ở đây là bạn chỉ dùng 3 class CSS, nếu load toàn bộ CSS file sẽ rất tốn kém.

Giải pháp Tailwind: Chỉ biên dịch những class bạn thực sự dùng vào một file CSS nhẹ hơn.

Tạo file ./src/style.css với nội dung:

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

Thực hiện câu lệnh

npx tailwindcss -i ./src/style.css -o ./src/style/output.css --watch

-i: đường dẫn file nguồn
-o: đường dẫn file CSS xuất ra
--watch: theo dõi các file HTML, cập nhật CSS khi có thay đổi class

Sử dụng Tailwind CSS thông qua CDN

Tailwind CSS cũng hỗ trợ sử dụng thông qua CDN (Content Delivery Network)

Thay đổi đường dẫn output.css bằng https://cdn.tailwindcss.com

<!doctype html>
<html lang="en">
<head>
    <title>Sample HTML Document</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="text-4xl font-semibold italic">
        This is sample text
    </h1>
</body>
</html>

Sử dụng Tailwind CSS CLI

Vào tháng 12 năm 2021, Tailwind CSS đã giới thiệu một cơ chế mới cho phép sử dụng Tailwind CLI dưới dạng tệp thực thi độc lập (self-contained executable). Cơ chế này loại bỏ hoàn toàn sự phụ thuộc vào Node.js hoặc npm. Phiên bản này được gọi là Standalone CLI Build.

Tải Tailwind CLI: https://github.com/tailwindlabs/tailwindcss/releases

Thực hiện lại các câu lệnh sau mà không cần gọi npm

./tailwindcss init
./tailwindcss -i ./src/style.css -o ./src/style/output.css --watch

Sử dụng Tailwind CSS trên Production

Chúng ta sử dụng file css minify, giúp giảm kích thước file css khá nhiều

npx tailwindcss -i ./src/style.css -o ./src/output.css --minify

Tham khảo

The Story of Tailwind CSS feat. Adam Wathan

Tailwind CSS Basics for Beginners 

Tạo theme tùy chỉnh và mở rộng Tailwind CSS với plugins