Hướng dẫn Cài đặt và Sử dụng Tailwind CSS cơ bản
TailwindCss là một framework CSS utility-first giúp bạn dựng giao diện người dùng nhanh chóng, hiệu quả cho website.
Các công cụ và framework phát triển web ngày càng đa dạng và phong phú. Trong đó, Tailwind CSS là một trong những framework phát triển web được nhiều lập trình viên ưa chuộng hiện nay.
Được ra mắt vào năm 2017, Tailwind CSS đã nhanh chóng trở thành một trong những công cụ quan trọng giúp việc xây dựng giao diện web trở nên dễ dàng hơn. Vậy Tailwind CSS là gì mà lại được ưa chuộng đến vậy, chúng ta cùng tìm hiểu thôi
Trước khi bắt đầu, nếu bạn chưa hiểu về CSS là gì thì hãy đọc qua bài viết này tại Blog 200Lab nhé.
1. Tailwind CSS là gì?
Tailwind CSS là một framework CSS utility-first giúp tạo kiểu nhanh chóng và hiệu quả cho website mà không cần viết CSS thủ công. Thay vì cung cấp các thành phần (component) hoặc kiểu thiết kế mặc định, Tailwind cung cấp một loạt các lớp tiện ích (utility classes) mà bạn có thể kết hợp linh hoạt để xây dựng giao diện tùy chỉnh.
1.1 Tại sao nên sử dụng Tailwind CSS?
Chúng ta thường lựa chọn những framework nhanh, dễ học để ứng dụng vào dự án. Tailwind CSS sẽ là một trợ thủ đắc lực hỗ trợ bạn, vì chúng được tích hợp sẵn rất nhiều tính năng và kiểu dáng để người dùng lựa chọn.
Bên cạnh đó, chúng cũng giúp tạo giao diện người dùng đẹp mắt và hiện đại. Tailwind CSS tạo các tiện ích nhỏ và dễ dàng tích hợp trực tiếp các class hiện có vào HTML code.
1.2 Ưu điểm của Tailwind CSS
- Tùy biến cao, hiệu suất cao. Không giống như Bootstrap cung cấp những class gần như đồng gọi sẵn, chỉ cần gọi ra là dùng. Tailwind giúp bạn định nghĩa những phần phù hợp với dự án của bạn mà không bị gò bó.
- Cho phép xây dựng responsive layout phức tạp.
- Responsive và phát triển dễ dàng.
- Tạo thành phần dễ dàng.
- Hỗ trợ cài đặt với nhiều framework front-end khác như react, vuejs,…
1.3 Nhược điểm của Tailwind CSS
- Thiếu tiêu đề và thành phần điều hướng (navigation).
- Cần có thời gian để làm quen, tìm hiểu và nhớ tên các class.
- Có kiến thức về CSS thì mới sử dụng tốt được.
2. Sử dụng Tailwind CSS thông qua CDN
<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”stylesheet”>
Lưu ý: Có một số hạn chế khi sử dụng CDN.
- Không thể sử dụng tùy chỉnh chủ đề mặc định của Tailwind
- Không thể sử dụng các lệnh như @apply, @variants,...
- Không thể cài đặt plugin của bên thứ ba
- Tốc độ tải trang của trang web phụ thuộc vào tốc độ kết nối internet của người dùng và khoảng cách đến máy chủ CDN. Nếu kết nối internet chậm hoặc khoảng cách đến máy chủ CDN quá xa, thời gian tải trang sẽ mất nhiều thời gian.
- Bạn cần phải trả phí để sử dụng các tính năng, dịch vụ CDN cao cấp.
- Bạn không thể kiểm soát việc lưu trữ tệp CSS của bạn trên máy chủ CDN. Điều này có thể ảnh hưởng đến việc kiểm soát và bảo mật dữ liệu của bạn.
Vì vậy, trước khi sử dụng CDN, bạn nên cân nhắc các hạn chế này để đảm bảo rằng việc sử dụng CDN là phù hợp với nhu cầu của mình.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Tailwind CSS CDN link -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="m-4">
<h1 class="text-green-500 text-4xl font-bold">
200Lab
</h1>
<strong>Learn Deep, Go Different</strong>
<p>
200Lab tin rằng để trở thành một lập trình viên giỏi đến từ việc hiểu bản chất của công nghệ chứ không đơn thuần chỉ biết code.
</p>
</body>
</html>Output
3. Hướng dẫn cài đặt Tailwind CSS
3.1 Thông qua npm
Bước 1: Tailwind có sẵn trên npm và bạn có thể cài đặt nó bằng lệnh sau:
npm install tailwindcss postcss autoprefixer
Bước 2: Tạo tệp cấu hình Tailwind CSS bằng lệnh sau:
npx tailwindcss init
Bước 3: Tạo một postcss.config.js file trong thư mục gốc của thư mục dự án và thêm nội dung sau:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
Bước 4: Sau đó, tạo một styles.css file trong thư mục dự án của bạn src (hoặc bất kỳ thư mục nào khác mà bạn thích) và thêm nội dung sau:
@tailwind base;
@tailwind components;
@tailwind utilities;
Bước 5: Ở thao tác này, bạn sẽ nhập các kiểu cơ sở, thành phần (components) và utilities styles từ Tailwind CSS.
Cuối cùng, thêm tập lệnh vào package.json file của bạn để tạo CSS:
"scripts": {
"build": "postcss src/styles.css -o dist/styles.css"
}
Tập lệnh này sẽ biên dịch src/styles.css file của bạn và xuất nó thành một dist/styles.css file.
Bước 6: Chạy lệnh sau để xây dựng CSS của bạn:
npm run build
3.2 Thông qua yarn
Bước 1: Cài đặt tailwind bằng cách sử dụng lệnh:
yarn add tailwindcss postcss autoprefixer
Bước 2, 3, 4, 5 làm tương tự như cách cài đặt Tailwind CSS thông qua npm ở trên.
Bước 6: Chạy lệnh sau để xây dựng CSS của bạn:
yarn build
Dưới đây là một ví dụ mô tả cách thay màu nền khi di chuột trên Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Tailwind CSS CDN link -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="h-full border-2 border-gray-200
border-opacity-60 rounded-lg
overflow-hidden">
<div class="p-6 hover:bg-green-600
hover:text-white transition
duration-300 ease-in">
<h1 class="text-2xl font-semibold mb-3">
Hover
</h1>
</div>
</div>
</body>
</html>Output
3.3 Cấu hình file tailwind.config
Sau khi cài đặt tailwindcss vào dự án xong, bạn sẽ thấy một file tailwind.config.js hoặc tailwind.config.ts để cấu hình các tùy chỉnh cho project. Đây là cấu trúc cơ bản của file
module.exports = {
content: [
"./src/**/*.{html,js}", // chỉ định các file Tailwind sẽ xem xét khi tạo CSS
],
theme: {
extend: {},
},
plugins: [],
}Mình sẽ giải thích chi tiết về file đó để các bạn dễ hình dung nha
- Purge (Content): bạn có thể tối ưu kích thước file CSS bằng cách loại bỏ các class không sử dụng - nghĩa là tailwindcss chỉ có tác dụng với các file bạn đặt trong cấu hình, sẽ không phải là áp dụng toàn bộ dự án của bạn.
- Theme: bạn có thể custom như: màu sắc (colors), font chữ (fontFamily), kích thước (spacing, fontSize),...
content: [
"./src/**/*.{js,jsx,ts,tsx,html}",
],theme: {
extend: {
colors: {
primary: '#1DA1F2',
secondary: '#14171A',
},
fontFamily: {
sans: ['Roboto', 'sans-serif'],
},
spacing: {
'128': '32rem', // Tạo khoảng cách mới là 32rem
'144': '36rem',
},
fontSize: {
'xs': '.75rem',
'sm': '.875rem',
'tiny': '.875rem',
'base': '1rem',
'lg': '1.125rem',
'xl': '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5rem',
}
},
},Sau khi bạn cấu hình như thế này, bạn có thể sử dugnj class bg-primary, text-secondary, font-sans, p-128, text-xs trong các file bạn đã cấu hình trên content.
- Extend: bạn có thể mở rộng các giá trị mặc định của Tailwind mà không cần thay thế hoàn toàn, giúp bạn thêm các tùy chỉnh nhưng vẫn giữ các thiết lập gốc của Tailwind.
- Variants: cấu hình các trạng thái như: hover, focus, responsive, và tạo thêm các variant riêng.
- Plugins: bạn có thể thêm các plugin để mở rộng khả năng của nó. Một số plugin phổ biến bao gồm
@tailwindcss/typography,@tailwindcss/forms, và@tailwindcss/aspect-ratio.
theme: {
extend: {
backgroundColor: ['active'],
textColor: {
'primary': '#3490dc',
'secondary': '#ffed4a',
'danger': '#e3342f',
},
},
}variants: {
extend: {
opacity: ['disabled'],
backgroundColor: ['hover', 'focus', 'active'],
},
}Để sử dụng plugin Typography, đầu tiên bạn cần cài đặt:
npm install @tailwindcss/typographySau đó bạn có thể thêm plugin vào
plugins: [
require('@tailwindcss/typography'),
],Plugin này cung cấp các kiểu style sẵn cho nội dung văn bản của bạn với class prose:
<article class="prose">
<h1>Bài Viết Với Typography</h1>
<p>Đây là một đoạn văn bản mẫu sử dụng plugin Typography.</p>
</article>Bạn cũng có thể cấu hình dark mode cho website của bạn. Có 2 chế độ cho dark mode:
- Media: chế độ này tự động thay đổi giao diện dựa trên thiết lập hệ điều hành (OS) của người dùng.
- Class: cần thêm class dark vào phần tử root (ví dụ html hoặc body) để chuyển sang chế độ tối.
<div class="bg-white text-black dark:bg-gray-800 dark:text-white">
200Lab Tailwind Dark Mode
</div>File tailwind.config.js giúp bạn kiểm soát hoàn toàn các cài đặt của Tailwind CSS, từ tối ưu hóa dung lượng CSS, tùy chỉnh màu sắc, kích thước cho đến thêm các plugin mở rộng. Việc hiểu rõ cấu hình này không chỉ giúp bạn tận dụng tối đa sức mạnh của Tailwind CSS.
5. Lời kết
Tailwind CSS đang dần trở thành công cụ hữu ích, không chỉ dành cho người mới bắt đầu mà còn cho những chuyên gia. Vì vậy, nếu bạn đang tìm kiếm một công cụ phát triển web mạnh mẽ và tiện ích thì Tailwind CSS là lựa chọn phù hợp cho bạn đấy.
Các bài viết liên quan từ Blog 200Lab: