Tailwind CSS là gì? Cách cài đặt Tailwind CSS cơ bản

Tailwind CSS là một thư viện CSS linh hoạt và tiện lợi cho việc thiết kế giao diện web, giúp tiết kiệm thời gian và tăng tính linh hoạt cho quá trình phát triển. Cùng nhau tìm hiểu, phân tích và cài đặt framework này vào dự án nhé.

Bạn đã bao giờ gặp khó khăn trong việc tạo ra các giao diện web đẹp mắt và hiện đại mà không cần phải viết nhiều mã CSS không? Bạn đã từng cảm thấy nhàm chán với các framework CSS thông thường như Bootstrap hay Material Design không? Bạn muốn có một framework CSS mới mẻ và linh hoạt hơn không? Nếu câu trả lời là có, thì bạn nên thử sử dụng Tailwind CSS - một framework CSS ưu tiên sự tiện ích và dễ dàng chỉnh sửa.

Trong bài viết này, tôi sẽ giới thiệu cho bạn về Tailwind CSS là gì, các tính năng và ưu điểm của nó, cách cài đặt và sử dụng nó trong các dự án web của bạn. Hãy cùng khám phá nhé!

1. Tailwind CSS là gì?

Hình ảnh Tailwind CSS

Tailwind CSS là một framework CSS ưu tiên về sự tiện ích và dễ dàng sử dụng và chỉnh sửa. Nó khác với các framework CSS thông thường như Bootstrap hay Material Design bởi vì nó không cung cấp các class CSS phức tạp và cứng nhắc, mà chỉ cung cấp các class đơn giản bao gồm các thuộc tính CSS khác nhau. Điều này giúp các lập trình viên có thể dễ dàng tùy biến chứ không bị gò bó như các framework cũ trước đây. Và tất nhiên bạn có thể kết hợp các class này để tạo ra các giao diện web đẹp mắt và hiện đại mà không cần viết nhiều mã CSS.

Bài viết này được đăng tại [free tuts .net]

Cần chuẩn bị gì khi học Tailwind CSS?

Đầu tiên để có thể học và sử dụng Tailwind CSS thì điều cơ bản là bạn phải có chính là các kiến thức căn bản về HTML & CSS, nếu bạn còn chưa nắm rõ được những kiến thức này thì có thể tham khảo lại các bài viết về HTML & CSS cơ bản của chúng tôi tại đây.

Máy tính của bạn phải cài đặt sẵn Node.js và npm hay còn được gọi là Node Package Manager. Và nếu bạn cũng chưa biết phải cài như thế nào thì cũng có thể tham khảo bài viết Cài đặt NodeJS của chúng tôi tại đây.

Ngoài ra, bạn cũng có thể tham khảo, đọc tài liệu hướng dẫn trên web chính chủ của Tailwind CSS để hiểu rõ hơn về cách khai báo cú pháp khai báo và cách sử dụng.

Các tính năng phổ biến của Tailwind CSS

• Lớp kiểu chữ: Với Tailwind CSS, bạn có thể áp dụng các lớp kiểu chữ để định nghĩa phông chữ, kích thước, độ khoảng cách ký tự, cân đối,... cho các phần tử HTML.
• Lớp độ rộng và độ cao linh hoạt: Tailwind CSS cung cấp cho bạn một loạt các lớp độ rộng và độ cao linh hoạt mà bạn có thể sử dụng để điều chỉnh kích thước của các phần tử HTML trong phạm vi bố cục phổ biến.
• Lớp hiển thị: Tailwind CSS cung cấp cho bạn một loạt các lớp để điều chỉnh hiển thị của các phần tử HTML, cho phép bạn ẩn, hiển thị và thay đổi độ hiển thị của các phần tử HTML.
• Lớp định dạng: Bạn có thể sử dụng một số lớp định dạng của Tailwind CSS để thêm khoảng cách, định dạng nhập liệu, thêm background, border,... cho các phần tử HTML.

Một số ưu điểm của Tailwind CSS

Khi sử dụng Tailwind CSS bạn có thể tiết kiệm được kha khá thời gian bởi vì Tailwind CSS đã cung cấp sẵn một loạt các lớp CSS tiêu chuẩn, chúng giúp bạn tiết kiệm thời gian cho nhà phát triển Web trong việc tạo giao diện đồng nhất và chuẩn hóa. Không thể không kể đến vì Tailwind còn có tính linh hoạt cao khi cho phép người dùng tùy chỉnh và điều chỉnh các lớp CSS để tạo ra các giao diện độc đáo và linh hoạt hơn.

Sử dụng Tailwind CSS còn để tối ưu hóa các lớp CSS của bạn để tăng tốc độ tải trang và giảm kích thước tệp CSS. Và đặc biệt còn hỗ trợ responsive design bởi Tailwind CSS cung cấp một số lớp CSS để giúp đáp ứng các sự kiện của các thiết bị khác nhau.

Tailwind CSS có một cộng đồng làm việc chuyên nghiệp đông đảo, nơi bạn có thể tìm kiếm hướng dẫn và các thông tin hữu ích về việc sử dụng Tailwind CSS.

Ngoài ra khi sử dụng Tailwind CSS bạn có thể dễ dàng phối hợp với các công cụ khác như PostCSS, Sass và Laravel, giúp bạn kiến tạo các giao diện đáp ứng một cách dễ dàng.

2. Hướng dẫn cài đặt Tailwind CSS

Cách 1: Sử dụng thông qua link CDN:

Để cài đặt Tailwind CSS bằng cách nhúng link CDN, bạn cần thực hiện các bước sau:

Bước 1: Tạo một file HTML mới hoặc mở một file HTML đã có sẵn để bắt đầu.

Bước 2: Thêm đoạn mã sau vào phần head của file HTML:

<script src="https://cdn.tailwindcss.com"></script>

Hình ảnh thao tác ở bước 2

Lưu ý: Đây là đường dẫn mà bạn có thể sao chép từ trang chủ của Tailwind CSS hoặc sử dụng phiên bản mới nhất từ trang chủ của Tailwind CSS.

Có một điều đặc biệt ở phiên bản mới này là khi dùng link script là bạn có thể tùy biến thêm css trong script, ví dụ:

Cách khác để tùy biến thêm CSS ở bước 2

Bước 3: Bạn có thể sử dụng lớp CSS của Tailwind CSS trong tài liệu HTML của mình để kiểm tra xem liệu Tailwind CSS đã được cài đặt đúng hay không. Ví dụ:

Hình ảnh thao tác ở bước 3

Và đây là kết quả:

Hình ảnh sau khi đã thao tác các bước

Bước 4: Lưu và mở file HTML trong trình duyệt để kiểm tra xem liệu có phải cài đặt Tailwind CSS thành công hay không.

Cách 2: Cài đặt Tailwind CSS trên project (Tailwind CLI)

Sau khi chúng ta đã cài đặt thành công npm thì ta có thể cài Tailwind CSS đơn giản theo cách sau:

Bước 1: Bật Terminal và chạy dòng lệnh:

npm install -D tailwindcss
npx tailwindcss init

Bước 2: Sau khi các bạn chạy thành công 2 dòng lệnh trên thì file mới có tên “tailwind.config.js” sẽ được tự động sinh ra. Và bây giờ các bạn sẽ tiến hành định nghĩa các đường path mà bạn sử dụng Tailwind CSS:

Copy và dán đoạn code sau vào file:

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

Bước 3: Tạo 1 file input.css trong thư mục /src để chứa các lớp lệnh Tailwind CSS và sau đó copy đoạn code này vào file CSS đó:

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

Bước 4: Bật Terminal lên và câu lệnh:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Lưu ý: /src/input.css là file mà chúng ta đã tạo ở bước trước đó và ./dist/output.css là file mà các css được build ra để sử dụng.

Bước 5: Gắn đường dẫn vào file HTML thông qua thẻ <link> để bắt đầu sử dụng

3. Một số câu hỏi thường gặp về Tailwind CSS

Tại sao nên sử dụng Tailwind CSS?

Tailwind CSS cung cấp các lớp CSS đã được mã hóa trước để thao tác trực tiếp với các tính năng của HTML, giúp tăng tốc độ phát triển và giảm thời gian thiết kế. Nó cũng tạo điều kiện để dễ dàng tùy chỉnh giao diện mà không cần viết CSS. Cuối cùng, Tailwind CSS giúp tạo ra các giao diện người dùng tốt nhất với các chuẩn thiết kế hiện đại.

Tailwind CSS có thể sử dụng để thiết kế những gì?

Tailwind CSS có thể được sử dụng để thiết kế hầu hết các giao diện người dùng cho ứng dụng web như: trang chủ, trang đăng nhập, trang sản phẩm, trang giỏ hàng,...

4. Lời kết

Vậy là tôi đã giới thiệu cho bạn về Tailwind CSS là gì và một số tính năng của nó. Tôi hy vọng bài viết này sẽ giúp bạn có cái nhìn tổng quan về framework CSS này và khuyến khích bạn thử sử dụng nó trong các dự án web của bạn. Tailwind CSS là một framework CSS tiện ích và linh hoạt, nó sẽ giúp bạn tạo ra các giao diện web đẹp mắt và hiện đại mà không cần phải viết nhiều mã CSS. Bạn có thể tìm hiểu thêm về Tailwind CSS ở trang chủ tailwindcss.com. Cảm ơn bạn đã đọc bài viết này và hẹn gặp lại trong các bài viết sau. Chúc bạn thành công!