Hướng dẫn xây dựng website hiện đại, responsive với Tailwind CSS: Từ cơ bản đến thực hành

Tailwind CSS là gì

Tailwind CSS là một framework CSS tập trung vào tính năng (functionality), giúp các nhà phát triển xây dựng giao diện người dùng một cách nhanh chóng bằng cách cung cấp một loạt các lớp (classes) cơ bản và có thể kết hợp với nhau. Khác với các framework truyền thống như Bootstrap hoặc Foundation, những framework này cung cấp sẵn các thành phần được xây dựng sẵn (chẳng hạn như nút bấm, card, v.v.).Tailwind CSS Hãy sử dụng những lớp có độ chi tiết cao này trực tiếp trong HTML để “lắp ráp” thiết kế của bạn.

Triết lý cốt lõi của nó là “Thực dụng làm trên hết”. Điều này có nghĩa là bạn không cần phải viết mã CSS tùy chỉnh cho từng thành phần trên trang web, cũng không cần phải liên tục chuyển đổi giữa các tệp HTML và CSS. Ví dụ, để tạo một nút có độ dày viền (padding), nền màu xanh dương và văn bản màu trắng, bạn chỉ cần viết như sau:

<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
  点击我
</button>

Trong ví dụ này,px-4 和 py-2 Chúng ta đã thiết lập các độ dày đường viền (padding) theo hướng ngang và hướng dọc riêng biệt.bg-blue-500 Bạn đã thiết lập màu nền rồi.text-white Đã thiết lập màu sắc của văn bản.rounded-lg Các góc tròn lớn đã được thêm vào. Phương pháp này giúp tăng đáng kể tốc độ phát triển và khả năng bảo trì, bởi vì kiểu dáng được kết hợp chặt chẽ với cấu trúc HTML, và các tên lớp (class names) có tính tự giải thích cao.

Đọc thêm Nắm vững khái niệm cốt lõi của Tailwind CSS: Từ lớp tiện ích đến thực hành thiết kế đáp ứng。

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 để thực hiện điều này; phổ biến nhất là sử dụng công cụ CLI chính thức của nó hoặc tích hợp nó với các công cụ xây dựng (build tools).

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 →

Khởi động nhanh chóng bằng Tailwind CLI

Đây là cách trực tiếp nhất, đặc biệt phù hợp cho việc học tập và phát triển các nguyên mẫu nhanh chóng. Đầu tiên, bạn cần sử dụng npm hoặc yarn để khởi tạo dự án và cài đặt các công cụ cần thiết. Tailwind CSS。

npm install -D tailwindcss
npx tailwindcss init

Điều này sẽ tạo ra tệp cấu hình. tailwind.config.jsTiếp theo, hãy tạo một tệp CSS (ví dụ: `styles.css`). src/input.cssVà thêm các lệnh của Tailwind vào đó:

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

Sau đó, sử dụng các lệnh CLI để theo dõi tập tin CSS này và biên dịch nó thành phiên bản CSS cuối cùng.

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

Cuối cùng, hãy thêm đoạn mã được tạo ra vào tệp HTML của bạn. output.css Sau khi tải về tệp tin cần thiết, bạn có thể bắt đầu sử dụng các lớp (classes) hữu ích của Tailwind CSS.

Đọc thêm Làm chủ toàn diện Tailwind CSS: Hướng dẫn thực tế để xây dựng trang web hiện đại và đáp ứng。

(Tích hợp với các framework phía trước – Front-end frameworks)

Tailwind CSS Việc tích hợp với các framework front-end hiện đại diễn ra rất thuận lợi. Ví dụ, trong các dự án sử dụng Vue hoặc React, bạn có thể tích hợp PostCSS một cách dễ dàng. Khi sử dụng công cụ Create React App, bạn có thể cài đặt PostCSS bằng cách thực hiện các bước cần thiết.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Điều này sẽ được thực hiện đồng thời (tức là cả hai việc sẽ được thực hiện cùng lúc). tailwind.config.js 和 postcss.config.js Tệp cấu hình. Sau đó, trong tệp CSS ở vị trí đầu của dự án (ví dụ: src/index.cssHãy thêm ba mục đó vào nội dung bên trong. @tailwind Chỉ cần một lệnh là đủ.

Core Concepts and Practical Classes

Để sử dụng một cách hiệu quả Tailwind CSSBạn cần hiểu rõ hệ thống đặt tên các lớp hữu dụng cốt lõi và các nguyên lý thiết kế thích ứng (responsive design) của 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

Hệ thống đặt tên các lớp hữu ích (Practical Class Naming System)

Tailwind CSS Tên lớp tuân theo một mô hình đặt tên nhất quán, thường là “tên thuộc tính – chỉ thị (modifier) – giá trị”. Ví dụ:
– Margins:m-4(Tất cả các độ rộng cạnh – All margins)mt-2(Margin Above)
Màu sắc:text-gray-800，bg-red-300
– Kích thước:w-64(Chiều rộng: 16rem)h-screen(Cao độ: 100vh)
- Bố cục:flex，justify-center，items-center

Các con số thường tương ứng với một hệ thống thiết kế cụ thể (khoảng cách giữa các thành phần trên trang, kích thước phông chữ, v.v.), và mặc định thì dựa trên đơn vị cơ bản là 4px. Ngoài ra, hệ thống này cũng hỗ trợ các biến thể liên quan đến trạng thái của các thành phần trhover:bg-blue-700), tiêu điểm (focus:ring-2Ví dụ: `Healthy`, ` Sick`, `Busy`, `Idle`, v.v. Bạn chỉ cần thêm tiền tố biểu thị trạng thái trước tên lớp.

Xây dựng bố cục đáp ứng

Tailwind CSS Áp dụng chiến lược phản ứng linh hoạt (responsive design) với ưu tiên dành cho thiết bị di động. Các lớp (classes) được thiết kế sẵn dành riêng cho thiết bị di động; để áp dụng các phong cách (styles) trên màn hình lớn hơn, cần sử dụng các tiền tố (prefixes) phản ứng linh hoạt. H sm, md, lg, xl, 2xl。

Đọc thêm Từ nhập môn đến tinh thông: Nắm vững Tailwind CSS để xây dựng website hiện đại, đáp ứng。

Ví dụ, một phần tử có chiều rộng phủ toàn màn hình trên điện thoại di động, giảm còn một nửa trên màn hình cỡ trung bình, và chỉ còn một phần tư trên màn hình cỡ lớn; điều này có thể được biểu diễn như sau:

<div class="w-full md:w-1/2 lg:w-1/4">
  <!-- 内容 -->
</div>

Điều này giúp việc xây dựng các giao diện phản ứng linh hoạt (responsive interfaces) trở nên cực kỳ đơn giản và trực quan; tất cả các quy tắc liên quan đến tính phản ứng linh hoạt đều được tập trung trên cùng một phần tử, giúp người dùng dễ dàng hiểu và thao tác.

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

Thực hành: Xây dựng một thanh điều hướng có khả năng thích ứng với các thiết bị khác nhau (responsive navigation bar)

Hãy cùng xây dựng một thanh điều hướng (navigation bar) phản ứng linh hoạt (responsive) theo phong cách hiện đại, bằng cách sử dụng những kiến thức đã học thông qua một ví dụ cụ thể.

Cấu trúc HTML và Thiết kế Giao diện Di động

Trước tiên, chúng ta xây dựng cấu trúc cơ bản. Trên nền tảng di động, thanh điều hướng thường bao gồm biểu tượng thương hiệu và một nút menu hình bánh hamburger.

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 品牌标识 -->
      <div class="flex-shrink-0">
        <span class="text-white text-xl font-bold">Trang web của tôi</span>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button id="menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
          <!-- 汉堡图标 SVG -->
          <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">Trang chủ</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Về</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Dịch vụ</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Liên hệ</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobile-menu" class="hidden md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Trang chủ</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Về</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Dịch vụ</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Liên hệ</a>
    </div>
  </div>
</nav>

Ở đây, chúng ta sử dụng… md:hidden 和 hidden md:block Điều này nhằm kiểm soát việc hiển thị hoặc ẩn các thành phần khác nhau trên cả phiên bản máy tính để bàn (desktop) và phiên bản di động (mobile).

Thêm tính tương tác và khả năng cấu hình tùy chỉnh

Thanh điều hướng cần sử dụng JavaScript để điều khiển việc mở rộng và thu gọn menu trên thiết bị di động. Hãy thêm một đoạn mã đơn giản như sau:

<script>
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  menuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });
</script>

Ngoài ra, bạn có thể muốn thay đổi màu sắc của giao diện (theme color). Điều này có thể được thực hiện bằng cách sửa đổi các thiết lập liên quan đến màu sắc trong hệ thống. tailwind.config.js Các tệp tin được sử dụng để thực hiện điều này. Ví dụ, để mở rộng bảng màu của một chủ đề:

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3B82F6', // 自定义主色调
        'secondary': '#10B981',
      }
    }
  },
  variants: {},
  plugins: [],
}

Sau đó, bạn có thể sử dụng nó trong tên lớp (class name). bg-primary 和 text-secondary Được rồi. Bằng cách sử dụng tệp cấu hình, bạn có thể tùy chỉnh hoàn toàn các thông số thiết kế như khoảng cách, phông chữ, điểm dừng (breakpoints), v.v., để chúng phù hợp hoàn hảo với hệ thống thiết kế thương hiệu của bạn.

Tóm lại

Tailwind CSS Phương pháp này đã thực sự thay đổi cách các nhà phát triển viết CSS một cách triệt để. Nó cho phép đưa các quyết định về thiết kế trực tiếp vào các thẻ HTML, từ đó nâng cao đáng kể hiệu quả phát triển và tính nhất quán trong thiết kế. Dù bạn mới bắt đầu hay đang xây dựng các thành phần phản ứng (responsive components) phức tạp, hệ thống tên lớp trực quan cùng khả năng cấu hình mạnh mẽ của nó giúp công cụ này hoạt động xuất sắc, dù là cho mục đích thiết kế nguyên mẫu nhanh chóng hay các dự án sản xuất quy mô lớn. Việc nắm vững các khái niệm cốt lõi như cách đặt tên các lớp một cách hợp lý, sử dụng các tiền tố phản ứng (responsive prefixes), và tùy chỉnh các tệp cấu hình (configuration files) là yếu tố then chốt để xây dựng những trang web hiện đại và có khả năng thích ứng tốt với các thiết bị khác nhau.

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 Nó sẽ sử dụng PurgeCSS (hoặc engine JIT tích hợp sẵn) để quét các tệp HTML, JavaScript và các tệp mẫu khác, sau đó tự động loại bỏ tất cả các lớp CSS không được sử dụng. Tệp CSS được tạo ra cuối cùng thường chỉ có vài KB, nhỏ hơn nhiều so với các framework truyền thống.

Trong các dự án nhóm, làm thế nào để đảm bảo tính nhất quán về phong cách thiết kế (style consistency)?

Tailwind CSS Nó tự thân thúc đẩy tính nhất quán bằng cách cung cấp một bộ hệ thống thiết kế có các quy định nghiêm ngặt (chẳng hạn như màu sắc cố định, tỷ lệ khoảng cách giữa các thành phần trang web). Ngoài ra, toàn bộ nhóm có thể cùng nhau bảo trì và mở rộng hệ thống tailwind.config.js Tệp cấu hình dùng để định nghĩa các màu sắc, phông chữ, điểm dừng (breakpoints) đặc biệt cho dự án. Bạn có thể sử dụng lệnh @apply trong CSS để tóm tắt các nhóm lớp (classes) có chức năng tương tự thành các lớp thành phần (component classes) tùy chỉnh, từ đó giúp nâng cao mức độ nhất quán trong thiết kế.

Làm thế nào để ghi đè hoặc tùy chỉnh kiểu dáng (style) của một thành phần (component)?

Có ba cách chính để thực hiện điều này. Thứ nhất, sử dụng các lớp (classes) cụ thể và hữu ích trực tiếp trong HTML; đây là cách phổ biến nhất. Thứ hai, mở rộng hoặc thay đổi các thiết lập của chủ đề (theme settings) trong tệp cấu hình (configuration file). Thứ ba, sử dụng chúng trong tệp CSS (style sheet). @apply Các lệnh này được sử dụng để kết hợp nhiều lớp hữu ích thành một lớp mới, hoặc để viết mã CSS tùy chỉnh và sử dụng nó trong thiết kế trang web. @layer Lệnh này được sử dụng để đưa nội dung đó vào hệ thống Tailwind. base、components 或 utilities Trong các lớp (layers), điều này được thực hiện để kiểm soát thứ tự ưu tiên của chúng.

Tailwind CSS phù hợp sử dụng cùng với những thư viện UI hoặc framework nào?

Tailwind CSS Nó có thể kết hợp hoàn hảo với hầu hết các framework front-end hiện đại, bao gồm React, Vue, Angular, Svelte, v.v. Thông thường, nó được sử dụng như một công cụ thiết kế giao diện (style tool) ở cấp độ cơ bản, hoạt động phối hợp với hệ thống các thành phần (component system) của các framework này. Ngoài ra, còn có một số thư viện thành phần UI được xây dựng dựa trên Tailwind, chẳng hạn như Headless UI (các thành phần tương tác không cần thiết kế giao diện), DaisyUI, Flowbite, v.v. Những thư viện này cung cấp sẵn các thành phần được thiết kế sẵn, đồng thời cho phép bạn tùy chỉnh chúng một cách sâu rộng bằng Tailwind.