Học Tailwind CSS: Xây dựng trang web hiện đại và responsive từ con số 0

Tailwind CSS là gì?

Tailwind CSS Là một framework CSS ưu tiên chức năng, giúp nhà phát triển nhanh chóng xây dựng giao diện người dùng tùy chỉnh bằng cách cung cấp một số lượng lớn các lớp tiện ích (Utility Classes) có thể kết hợp. Khác với các framework như Bootstrap cung cấp các thành phần được định nghĩa sẵn (ví dụ: nút bấm, thẻ), Tailwind không cung cấp bất kỳ thành phần có sẵn nào, mà cung cấp một bộ các lớp cấp thấp, nguyên tử, như .text-center、.p-4、.bg-blue-500. Nhà phát triển “lắp ráp” kiểu dáng mong muốn bằng cách viết trực tiếp các lớp này vào phần tử HTML.

Ưu điểm cốt lõi của phương pháp này là nó cải thiện đáng kể hiệu suất phát triển và loại bỏ các vấn đề xung đột đặt tên và ghi đè kiểu dáng phổ biến trong CSS truyền thống. Bạn không còn phải đau đầu nghĩ tên cho lớp, cũng không cần phải chuyển đổi qua lại giữa nhiều file CSS. Đồng thời, do kiểu dáng được nội tuyến trực tiếp trong HTML, khả năng bảo trì của dự án thậm chí còn được cải thiện – bạn có thể nhìn thấy ngay một phần tử sẽ hiển thị như thế nào. Ngoài ra,Tailwind CSS Mặc định tích hợp thiết kế đáp ứng, các trạng thái biến thể (như hover, focus) và hỗ trợ chế độ tối, biến nó thành công cụ mạnh mẽ để xây dựng trang web hiện đại.

Làm thế nào để bắt đầu sử dụng Tailwind CSS

Bắt đầu sử dụng Tailwind CSS Có nhiều cách, trong đó cách được khuyến nghị nhất là cài đặt và cấu hình thông qua công cụ CLI chính thức, cách này mang lại sự linh hoạt tối đa và kiểm soát quy trình xây dựng.

Đọc thêm Làm chủ Tailwind CSS: Hướng dẫn thực tế và các phương pháp hay nhất từ cơ bản đến nâng cao。

Cài đặt thông qua công cụ CLI

Đầu tiên, bạn cần khởi tạo trong dự án Tailwind CSS. Cài đặt công cụ CLI của nó thông qua npm hoặc yarn và tạo tệp cấu hình là thực hành tốt nhất. Chạy lệnh sau trong thư mục gốc của dự án:

Trợ lý xây dựng trang web WordPress.com

99.9991% Thời gian hoạt động + Khả năng chịu lỗi đa vùng, hỗ trợ 24/7, mua gói blog được miễn phí sử dụng AI xây dựng website

Miễn phí tên miền trong một năm

Truy cập Trợ lý Xây dựng Website WordPress.com →

Trợ lý Xây dựng Website UltaHost

900+ mẫu miễn phí, tùy chỉnh được, có được khả năng SEO cần thiết để tối ưu hóa khả năng hiển thị tìm kiếm của website

Ưu đãi 40%

Truy cập Trợ lý xây dựng trang web UltaHost →

npm install -D tailwindcss
npx tailwindcss init

Điều này sẽ tạo một tệp cấu hình có tên tailwind.config.js trong dự án của bạn. Tiếp theo, bạn cần tạo một tệp CSS chính (ví dụ: src/input.css), và sử dụng @tailwind directive để bao gồm các lớp của Tailwind.

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Sau đó, trong tailwind.config.js Trong tệp cấu hình, chỉ định đường dẫn đến các tệp mẫu của bạn, để Tailwind có thể quét các tệp này và tạo CSS tương ứng.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Cuối cùng, chạy lệnh CLI để xây dựng tệp CSS cuối cùng.

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

Lệnh này sẽ theo dõi sự thay đổi trong các tệp nguồn của bạn và biên dịch các lớp tiện ích cần thiết vào ./dist/output.css tệp trong thời gian thực. Bạn chỉ cần nhúng tệp CSS cuối cùng được tạo này vào HTML của mình.

Đọc thêm Hướng dẫn nhập môn cuối cùng về Tailwind CSS: Xây dựng giao diện người dùng hiện đại, đáp ứng từ con số không。

Các lớp tiện ích cốt lõi và thiết kế đáp ứng

Tailwind CSS Các lớp tiện ích của nó bao phủ hầu hết mọi thuộc tính CSS như bố cục, khoảng cách, kiểu chữ, màu sắc, đường viền, hiệu ứng, v.v. Quy tắc đặt tên trực quan và nhất quán, ví dụ khoảng cách sử dụng p-{size} Biểu thị khoảng đệm bên trong (padding),m-{size} biểu thị khoảng cách bên ngoài (margin); chiều rộng và chiều cao sử dụng w-{size} 和 h-{size}。

Thiết kế đáp ứng là điểm mạnh của Tailwind. Nó áp dụng hệ thống điểm ngắt ưu tiên thiết bị di động (Mobile First). Các điểm ngắt mặc định bao gồm:sm(640px),md(768px)、lg(1024px)、xl(1280px)、2xl(1536px). Để áp dụng kiểu cho các kích thước màn hình khác nhau, chỉ cần thêm tiền tố breakpoint tương ứng vào trước lớp tiện ích.

Ví dụ, đoạn mã dưới đây tạo một container mặc định xếp chồng trên thiết bị di động và sắp xếp theo hàng ngang từ màn hình trung bình trở lên:

Trợ lý xây dựng trang web Bluehost

Cung cấp công cụ tạo website AI, hỗ trợ trò chuyện trực tuyến và điện thoại 24/7, tên miền miễn phí một năm, CDN miễn phí, thời gian hoạt động SLA 99.99%

Truy cập Bluehost

<div class="flex flex-col md:flex-row">
  <div class="p-4 bg-blue-100 md:w-1/2">Nội dung bên trái</div>
  <div class="p-4 bg-green-100 md:w-1/2">Nội dung bên phải</div>
</div>

Trong ví dụ này,flex-col là kiểu mặc định (cho thiết bị di động),md:flex-row biểu thị rằng từ md breakpoint trở lên, hướng của flex container chuyển thành hàng. Tương tự, chiều rộng md:w-1/2 Chỉ có hiệu lực trên màn hình trung bình trở lên.

Tùy chỉnh chủ đề và plugin

Mặc dù Tailwind CSS Cung cấp một hệ thống thiết kế mặc định tinh tế, nhưng để đảm bảo tính nhất quán thương hiệu, việc tùy chỉnh chủ đề là điều cần thiết. Điều này chủ yếu được thực hiện thông qua việc sửa đổi tailwind.config.js trong tệp theme phần.

Mở rộng cấu hình mặc định

Bạn có thể dễ dàng mở rộng chủ đề mặc định trong phần theme.extend Thêm giá trị mới vào đối tượng, điều này không ghi đè giá trị mặc định mà mở rộng chúng. Ví dụ: thêm màu sắc tùy chỉnh, phông chữ hoặc khoảng cách:

Đọc thêm Học Tailwind CSS: Xây dựng trang web hiện đại, phản hồi từ đầu。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      fontFamily: {
        'sans': ['Inter var', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

Sau khi tùy chỉnh, bạn có thể sử dụng trong HTML text-brand-primary、font-sans 和 p-84 Loại như vậy rồi.

Sử dụng plugin chính thức và cộng đồng

Tailwind CSS Hệ thống plugin cho phép bạn tạo ra các lớp tiện ích của riêng mình. Chính thức cung cấp một số plugin rất hữu ích, chẳng hạn như @tailwindcss/forms(dùng để làm đẹp các phần tử biểu mẫu),@tailwindcss/typography(dùng để cung cấp bố cục đẹp mắt cho nội dung HTML không kiểm soát được). Sau khi cài đặt, chỉ cần trong tệp cấu hình plugins Chỉ cần đưa vào mảng.

hosting.com

SSL miễn phí, CDN Cloudflare, WAF, hơn 40 trung tâm dữ liệu toàn cầu để lựa chọn, độ trễ thấp hơn nhờ vị trí gần, hỗ trợ dịch vụ 24/7/365, hiện có thể tiết kiệm tới 67% chi phí, hỗ trợ xây dựng AI và tối ưu hóa SEO

Truy cập hosting.com

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    // ... 其他插件
  ],
}

Sau đó, bạn có thể sử dụng prose lớp cho bất kỳ container nào, giúp nội dung HTML bên trong tự động có kiểu trình bày đẹp mắt.

Xây dựng các thành phần phức tạp

Sau khi nắm vững các lớp cơ bản, bạn có thể bắt đầu xây dựng các thành phần phức tạp, có thể tái sử dụng. Mặc dù Tailwind khuyến khích kết hợp kiểu trực tiếp trong HTML, nhưng đối với các thành phần được sử dụng thường xuyên trong các dự án lớn, việc sử dụng @apply directive để trích xuất kiểu chung trong CSS cũng là một thực hành tốt.

Ví dụ, bạn có thể định nghĩa một kiểu nút tùy chỉnh:

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-brand-primary text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-150 ease-in-out;
}

Sau đó, sử dụng trực tiếp tên lớp này trong HTML:

<button class="btn-primary">点击我</button>

Cách tiếp cận này kết hợp tính linh hoạt của các lớp tiện ích với khả năng bảo trì của CSS truyền thống. Đối với các dự án dựa trên framework JavaScript (như React, Vue), bạn thường viết trực tiếp các kết hợp kiểu này trong template của component, từ đó đóng gói chặt chẽ kiểu dáng, cấu trúc và logic lại với nhau.

Tóm lại

Tailwind CSS Với mô hình ưu tiên chức năng, được thúc đẩy bởi các lớp tiện ích, nó đã cách mạng hóa cách các nhà phát triển front-end viết kiểu. Nó cung cấp mọi công cụ cần thiết để xây dựng các trang web hiện đại, đáp ứng từ đầu, đồng thời đảm bảo hiệu quả phát triển và tính nhất quán trong thiết kế thông qua tên gọi trực quan, hệ thống đáp ứng mạnh mẽ và cấu hình có thể tùy chỉnh cao. Dù là phát triển nguyên mẫu nhanh hay xây dựng ứng dụng cấp sản xuất quy mô lớn, Tailwind đều có thể nâng cao đáng kể quy trình làm việc. Nắm vững các khái niệm cốt lõi, tiền tố đáp ứng, cấu hình chủ đề và phương pháp xây dựng component, bạn sẽ có thể tạo ra giao diện người dùng độc đáo và tinh tế một cách hiệu quả.

FAQ 常见问题

CSS file do Tailwind CSS tạo ra có lớn không?

Không. Trong môi trường sản xuất,Tailwind CSS Sử dụng công nghệ PurgeCSS (hiện đã được tích hợp và gọi là “content scanning”). Nó sẽ quét tất cả các file template bạn chỉ định trong file cấu hình (như HTML, JSX, Vue) và chỉ đóng gói các lớp tiện ích thực sự được sử dụng vào file CSS cuối cùng. Điều này đảm bảo file CSS được tạo ra cuối cùng rất gọn nhẹ, thường chỉ từ vài KB đến hơn chục KB.

Trong dự án nhóm, làm thế nào để duy trì tính nhất quán về kiểu dáng?

Tailwind CSS Bản thân việc cung cấp một hệ thống thiết kế hạn chế (như bảng màu cố định, tỷ lệ khoảng cách) để thúc đẩy tính nhất quán. Nhóm có thể đảm bảo sự thống nhất bằng cách chia sẻ và tuân thủ nghiêm ngặt một tailwind.config.js tệp cấu hình được tùy chỉnh cẩn thận. Ngoài ra, có thể kết hợp sử dụng @apply các chỉ thị hoặc hệ thống thành phần của framework JavaScript để tạo ra thư viện thành phần UI có thể tái sử dụng và có kiểu dáng nhất quán.

Tailwind CSS so với các giải pháp CSS-in-JS truyền thống (như styled-components) như thế nào?

Cả hai có mục tiêu khác nhau, nhưng có thể bổ sung cho nhau.Tailwind CSS Chủ yếu hoạt động ở lớp HTML/template, kết hợp kiểu thông qua tên lớp, nhấn mạnh tính tiện dụng và tốc độ phát triển. CSS-in-JS thì tạo kiểu động trong thời gian chạy JavaScript, giỏi xử lý các kiểu phụ thuộc trạng thái, có tính động cao và cung cấp sự cô lập kiểu hoàn hảo. Trong các dự án thực tế, nhà phát triển có thể chọn một trong hai tùy theo nhu cầu, thậm chí có thể kết hợp sử dụng – ví dụ, dùng Tailwind xử lý bố cục cơ bản và kiểu chung, dùng CSS-in-JS xử lý kiểu logic động phức tạp.

Học Tailwind CSS có cần nền tảng CSS tốt không?

Cần kiến thức CSS cơ bản, nhưng không cần phải là chuyên gia. Thực tế,Tailwind CSS tên lớp của nó tương ứng cao với các thuộc tính CSS (ví dụ: flex, justify-center, text-white, quá trình học Tailwind cũng là quá trình học các thực hành tốt nhất về CSS. Đối với người mới, nó có thể đóng vai trò như một “cây gậy chống” tốt, tránh các bẫy phổ biến khi viết CSS phức tạp trực tiếp. Khi thành thạo các lớp Tailwind, sự hiểu biết của bạn về CSS nền tảng cũng sẽ được củng cố đồng thời.