Các framework phát triển web ngày càng đa dạng và phong phú, bao gồm cả frondend và backend. Tailwind CSS, ra đời từ năm 2017, nhanh chóng chiếm được lòng nhiều lập trình viên và ngày càng trở nên phổ biến rộng rãi.
Tailwind CSS là một công cụ quan trọng đối với việc xây dựng giao diện web đơn giản và hiệu quả. Với mô hình này, lập trình viên có thể tận dụng các class CSS tiền xử lý được đặt tên một cách có ý nghĩa, giúp tăng sự linh hoạt và tốc độ trong quá trình phát triển.
Sự đơn giản và linh hoạt của Tailwind CSS là điều làm nổi bật nó. Thay vì sử dụng CSS truyền thống, lập trình viên có thể áp dụng các class trực tiếp trong mã HTML. Điều này giúp giảm thiểu việc tạo ra CSS tùy chỉnh và giúp nhanh chóng xây dựng các thành phần giao diện mà không mất nhiều thời gian.
Nhờ vào cú pháp rõ ràng và cộng đồng hỗ trợ mạnh mẽ, Tailwind CSS không chỉ là một công cụ, mà còn là một cộng đồng lớn, đóng góp vào sự phát triển và mở rộng của nó. Điều này giúp nó trở thành lựa chọn hàng đầu cho nhiều dự án phát triển web hiện nay.
Nhưng trước hết, bạn hãy xem bài viết dưới đây để hiểu CSS là gì qua bài viết; CSS Là Gì? Cách sử dụng CSS Đơn Giản Hiệu Quả Nhất 2023
Tailwind CSS là gì?
Đại khái, Tailwind CSS là một framework CSS giúp tạo ra trang web một cách hiện đại mà không yêu cầu bạn phải rời khỏi file HTML. Nó cung cấp các class với các chức năng đặc biệt, và bạn sử dụng chúng để thêm vào các thẻ HTML.
(Tham khảo: 21 Đoạn mã HTML & CSS có giá trị dành cho nhà phát triển web)
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.
Ư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,…
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.
Sử dụng Tailwind CSS thông qua CDN
html
<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ụ
html
<!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">
TheGioiLapTrinh.nEt
</h1>
<strong>Learn Deep, Go Different</strong>
<p>
Blog 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
Cài đặt Tailwind CSS
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:
Text
npm install tailwindcss postcss autoprefixer
Bước 2: Tạo tệp cấu hình Tailwind CSS bằng lệnh sau:
csharp
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:
js
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:
css
@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:
Text
npm run build
Thông qua yarn
Bước 1: Cài đặt tailwind bằng cách sử dụng lệnh:
Text
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:
Text
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
html
<!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
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.
