Hướng dẫn sử dụng Tailwind CSS: Xây dựng nhanh các trang web hiện đại và thích ứng với mọi thiết bị

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 →

Thiết kế đáp ứng và điểm ngắt

Tailwind CSS Áp dụng chiến lược phản ứng thích ứng với ưu tiên dành cho thiết bị di động. Điều này có nghĩa là các lớp hữu ích không có tiền tố có thể được sử dụng trên mọi kích thước màn hình, trong khi các lớp có tiền tố (chẳng hạn như…) md:， lg:Nó được sử dụng để áp dụng các phong cách (styles) tại các điểm dừng (breakpoints) lớn hơn. Hệ thống điểm dừng mặc định của nó rất trực quan (intuitive):
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px

Ví dụ,<div class="text-sm md:text-lg"> Điều này có nghĩa là trên các thiết bị di động, kích thước chữ sẽ nhỏ hơn; trong khi đó, trên màn hình có kích thước trung bình hoặc lớn hơn, kích thước chữ sẽ được tăng lên. Cú pháp này giúp việc tạo ra các giao diện (layout) có khả năng thích ứng với nhiều

Các lớp hữu ích (Utility Classes) và các thẻ thiết kế (Design Tags)

在 Tailwind CSS Trong đó, tên lớp chính là những thẻ thiết kế (design markers). Giống như… mt-4(margin-top: 1rem),px-6(Margin trái/phải: 1.5rem)bg-gradient-to-r(Nền có hiệu ứng chuyển màu từ trái sang phải) Những tên lớp như vậy mô tả trực tiếp kiểu thiết kế mà chúng áp dụng. Mối quan hệ tương ứng này giúp giảm bớt gánh nặng trong việc ghi nhớ, và khi cùng nhau xem xét mã nguồn hoặc thảo luận về thiết kế trong nhóm, mọi người có thể sử dụng tên lớp như một phương tiện giao tiếp trực tiếp.

Làm thế nào để bắt đầu một dự án mới?

将 Tailwind CSS Có hai cách chính để tích hợp công cụ này vào dự án của bạn: thông qua công cụ CLI (Command Line Interface) của nó, hoặc thông qua việc tích hợp sâu với các công cụ xây dựng (build tools) như Vite hoặc Next.js.

Đọc thêm Làm thế nào để sử dụng Tailwind CSS để nhanh chóng xây dựng các trang web hiện đại và có khả năng thích ứng với nhiều thiết bị khác nhau?。

Cách trực tiếp nhất là cài đặt thông qua npm hoặc yarn, sau đó sử dụng các công cụ CLI (Command Line Interface) được tích hợp sẵn trong chúng để thực hiện các thao tác cần thiết. Đầu tiên, hãy khởi tạo dự án bằng công cụ quản lý gói và cài đặt các thành phần phụ thuộc cần thiết:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Điều này sẽ tạo ra hai tệp tin quan trọng trong thư mục gốc của dự án của bạn:tailwind.config.js 和 postcss.config.jsTiếp theo, bạn cần tạo một tệp CSS chính (thường là…) src/styles.css 或 src/input.cssVà hãy thêm nó ở đầu tệp tin. Tailwind CSS lệnh:

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

Những lệnh này chỉ là các tham số thay thế (placeholders); chúng sẽ được thay thế bằng giá trị thực tế trong quá trình xây dựng (build). Tailwind CSS Vui lòng cung cấp đoạn mã cụ thể mà bạn muốn thay thế, để tôi có thể thực hiện việc thay thế đó. Sau đó, tôi sẽ đưa đoạn mã đã được sửa đổi cho bạn. tailwind.config.js Trong tệp, thông qua content Các mục cấu hình đã được chỉ định. Tailwind Những tệp nào cần được quét để thực hiện quá trình Tree Shaking (tối ưu hóa mã CSS) là điều then chốt giúp giữ cho kích thước tệp CSS cuối cùng ở mức nhỏ gọ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

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

Cuối cùng, hãy chạy lệnh CLI để tạo ra tệp CSS, hoặc tích hợp nó vào các lệnh trên máy chủ phát triển của bạn. Trong môi trường phát triển, thông thường người ta sử dụng các công cụ như…npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch。

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

Nếu bạn sử dụng các framework front-end hiện đại như Next.js, Vue, hoặc React, quá trình tích hợp sẽ trở nên dễ dàng và thuận tiện hơn nhiều. Ví dụ, từ phiên bản 13 trở đi, Next.js đã tích hợp sẵn các công cụ cần thiết để hỗ trợ việc tích hợp với các công nghệ khác. Tailwind CSS Bạn có thể nhận được sự hỗ trợ cần thiết khi sử dụng các công cụ này. Khi tạo một dự án mới, chỉ cần chọn tùy chọn phù hợp là được. Đối với Vite, nhà phát triển cũng đã cung cấp hướng dẫn tích hợp chi tiết; thường thì bạn chỉ cần cài đặt các tiện ích bổ sung (plugins) và thực hiện các postcss.config.js Bạn có thể bắt đầu ngay lập tức.

Thực hành: Xây dựng một thành phần thẻ (card) có khả năng thích ứng với các thiết bị khác nhau (responsive design)

Kiến thức lý thuyết cần được củng cố thông qua thực hành. Hãy cùng nhau xây dựng từng bước một một thành một thành phần thẻ (card component) hiện đại và có khả năng thích ứng với nhiều loại thiết bị khác nhau; thành phần này sẽ được sử dụng để hiển thị nội dung. Tailwind CSS Những khả năng mạnh mẽ về thiết kế bố cục (layout), khoảng cách giữa các thành phần (spacing), màu sắc (colors), và tính thích ứng với các thiết bị khác nhau (responsiveness).

Đọc thêm Nắm vững toàn diện Tailwind CSS: Hướng dẫn framework CSS hiện đại từ cơ bản đến thực chiến。

Mục tiêu của chúng tôi là tạo ra những “thẻ” (cards) chứa hình ảnh, tiêu đề, văn bản mô tả và nút thao tác; những thẻ này sẽ được sắp xếp theo chiều dọc trên thiết bị di động và theo chiều ngang trên máy tính để bàn.

<!-- 基础卡片容器 -->
<div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl my-8">
  <div class="md:flex">
    <!-- 图片区域 -->
    <div class="md:shrink-0">
      <img
        class="h-48 w-full object-cover md:h-full md:w-48"
        src="/img/card-image.jpg"
        alt="Hình ảnh minh họa thẻ bài"
      />
    </div>
    <!-- 内容区域 -->
    <div class="p-8">
      <!-- 标签 -->
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
        Blog công nghệ
      </div>
      <!-- 标题 -->
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Làm thế nào để Tailwind CSS nâng cao hiệu quả phát triển của bạn?
      </a>
      <!-- 描述 -->
      <p class="mt-2 text-slate-500">
        Khám phá các framework CSS tập trung vào các tính năng (feature-oriented CSS frameworks) – những công cụ cho phép bạn xây dựng thiết kế tùy chỉnh một cách nhanh chóng bằng cách sử dụng các lớp (classes) có thể kết hợp với nhau, mà không cần phải rời khỏi mã HTML.  
Tạm biệt với sự phiền phức của việc viết CSS thủ công; hãy đón nhận một quy trình phát triển hiệu quả và nhất quán hơn.
      </p>
      <!-- 按钮 -->
      <div class="mt-4">
        <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          Đọc toàn bộ văn bản
        </button>
      </div>
    </div>
  </div>
</div>

Code Decomposition and Analysis

Trong ví dụ này, chúng ta đã sử dụng một lượng lớn… Tailwind CSS Các lớp hữu dụng (practical classes):
– Bố cục và các container (Các khung chứa nội dung):max-w-2xl 和 mx-auto Kiểm soát độ rộng tối đa của thẻ và đặt nó ở vị trí trung tâm;md:max-w-4xl Giảm bớt các hạn chế trên màn hình có kích thước trung bình.md:flex Khi màn hình có kích thước trung bình hoặc lớn hơn, nội dung bên trong các thẻ (cards) sẽ được sắp xếp theo kiểu bố trí ngang (horizontal layout) bằng công cụ Flexbox.
– Xử lý hình ảnh:h-48 w-full Cố định độ cao của hình ảnh trên thiết bị di động;md:h-full md:w-48 Trên giao diện máy tính để bàn, cần giữ nguyên độ rộng của hình ảnh và đảm bảo rằng hình ảnh chiếm trọn chiều cao của khung chứa nó.object-cover Hãy đảm bảo rằng hình ảnh được cắt tỉa một cách phù hợp.
– Khoảng cách và bố cục:p-8 Hãy cung cấp đủ độ lệch nội bộ (padding).mt-1， mt-2， mt-4 Dùng để điều chỉnh khoảng cách theo chiều dọc giữa các phần tử, nhằm tạo ra một cấu trúc trực quan rõ ràng và dễ hiểu.text-lg， text-sm Kiểm soát cỡ chữ.
– Màu sắc và tương tác:text-indigo-500， bg-indigo-600 Sử dụng màu sắc từ bảng màu tùy chỉnh.hover:bg-indigo-700 和 focus:ring-indigo-500 Chúng tôi đã thêm các kiểu dáng cho trạng thái khi con trỏ chuột di chuyển qua (hiệu ứng “hover”) và khi nút nhận được sự chú ý của người dùng (trạng thái “focus”) cho các nút, mà không cần phải viết bất kỳ đoạn CSS tùy chỉnh nào.
– Hiệu ứng thị giác:rounded-xl Thêm góc tròn.shadow-md Thêm hiệu ứng bóng đổ (shadow) để cùng nhau tạo nên cảm giác ba chiều và phong cách hiện đại cho tấm thẻ.

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

Bằng cách kết hợp các lớp nguyên tử này, chúng tôi đã nhanh chóng tạo ra một thành phần giao diện người dùng (UI) chuyên nghiệp, có khả năng thích ứng với nhiều thiết bị khác nhau và được tùy chỉnh hoàn toàn theo yêu cầu. Trong suốt quá trình này, chúng tôi không cần phải

Kỹ thuật nâng cao và Thực hành tốt nhất

Khi quy mô dự án mở rộng, việc tuân theo một số thực hành tốt nhất sẽ giúp bạn quản lý dự án một cách hiệu quả hơn. Tailwind CSSTrước hết, hãy tận dụng tối đa những công cụ và nguồn lực có sẵn. @apply Lấy ra các nhóm lớp (classes) được sử dụng lặp đi lặp lại trong mã nguồn là một thao tác hữu ích. Mặc dù việc sử dụng các lớp trực tiếp trong HTML được khuyến nghị, đối với những mẫu thiết kế phức tạp xuất hiện nhiều lần trong cùng một dự án (chẳng hạn như các nút có kiểu trình bày nhất định), chúng ta có thể lưu trữ những mẫu đó trong tệp @apply Hãy trích xuất nó thành một lớp thành phần (component class).

.btn-primary {
  @apply px-4 py-2 bg-blue-600 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;
}

Sau đó, bạn có thể sử dụng nó một cách đơn giản trong HTML. <button class="btn-primary">Nhưng xin lưu ý, việc sử dụng quá mức có thể gây ra những hậu quả không mong muốn. @apply Có thể sẽ phải quay trở lại cách viết CSS truyền thống, và do đó mất đi một số ưu điểm liên quan đến việc ưu tiên sử dụng các lớp (classes) có tính ứng dụng cao; vì vậy nên sử dụng chúng một cách thận trọng.

Thứ hai, hãy tận dụng tối đa sức mạnh của các thiết lập (các cấu hình). Hãy tìm hiểu kỹ lưỡng về cách thức thực hiện các thay đổi thông qua các thiết lập đó. tailwind.config.js Tệp này định nghĩa các “Token Thiết kế” (Design Tokens) dành riêng cho dự án. Bạn có thể sử dụng chúng để… theme.extend Hãy thêm các giá trị mới, thay vì ghi đè chủ đề hiện có; nhờ đó, bạn có thể giữ nguyên chủ đề mặc định trong khi vẫn tiến hành mở rộng chức năng của ứng dụng.

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Sau khi định nghĩa, bạn có thể sử dụng các lớp mới như text-brand-blue 和 h-128 Đây chính là loại lớp (class) mà chúng ta đang cần. Nó giúp nâng cao đáng kể mức độ dễ bảo trì và tính nhất quán của các thiết kế (styles).

Ngoài ra, hãy chú ý đến kích thước tổng thể của tệp được đóng gói cuối cùng. Mặc dù… Tailwind CSS Trong chế độ phát triển, sẽ được tạo ra một lượng lớn các lớp (classes). Tuy nhiên, quá trình xây dựng sản phẩm cuối cùng sẽ được thực hiện bằng công cụ PurgeCSS – công cụ này hiện đã được tích hợp sẵn vào hệ thống. content (Cấu hình đang được thực hiện…) Công cụ này có thể tự động loại bỏ tất cả các kiểu dáng (styles) không được sử dụng, giúp đảm bảo rằng tệp CSS cuối cùng được tạo ra rất gọn nhẹ và hiệu quả. Hãy đảm bảo cấu hình mọi thứ một cách chính xác. content Đây là một đường dẫn (path) nhằm bao quát tất cả các thành phần được sử dụng trong dự án của bạn. Tailwind lớp.

Tóm lại

Tailwind CSS Đây không chỉ đơn thuần là một framework CSS; nó còn đại diện cho một phương pháp phát triển giao diện người dùng (frontend) hiệu quả, thực tiễn và có khả năng tùy chỉnh cao. Nhờ vào cách tiếp cận ưu tiên các lớp chức năng (function-based classes), các nhà phát triển có thể triển khai các bản thiết kế theo tốc độ đáng ngạc nhiên, đồng thời vẫn giữ được tính rõ ràng của mã nguồn và tính hệ thống trong thiết kế. Từ việc sử dụng thuận tiện các điểm đánh dấu phản ứng (responsive breakpoints) cho đến khả năng kiểm soát hoàn toàn hệ thống thiết kế thông qua các tệp cấu hình (configuration files), framework này mang lại nhiều tiện ích choTailwind CSS Nó cung cấp một giải pháp định dạng mạnh mẽ và linh hoạt cho việc phát triển web hiện đại.

Mặc dù có một giai đoạn học tập khá khó khăn và cần ghi nhớ một lượng lớn tên lớp (class names), nhưng một khi đã nắm vững được, những lợi ích mà nó mang lại về hiệu suất phát triển và sự thuận tiện trong việc phối hợp giữa các thành viên trong nhóm là rất rõ ràng. Nó khuyến khích việc xây dựng giao diện người dùng (UI) mang tính độc đáo, thay vì sử dụng các thành phần khung (framework components) giống nhau như những “bản sao” của nhau – điều mà nhiều nhóm đang theo đuổi để tạo ra sự khác biệt cho sản phẩm của họ. Dù đó là dự án khởi nghiệp hay ứng dTailwind CSS Tất cả đều xứng đáng được coi là những công cụ thiết kế ưu tiên để bạn thử nghiệm và áp dụng một cách sâu rộng.

FAQ 常见问题

Sự khác biệt chính giữa Tailwind CSS và Bootstrap là gì

Tailwind CSS Về mặt triết lý, nó hoàn toàn khác biệt so với Bootstrap. Bootstrap cung cấp một bộ các thành phần sẵn có, có độ hoàn chỉnh cao (như thanh điều hướng, hộp thoại modal), và các nhà phát triển chủ yếu thực hiện việc tùy chỉnh bằng cách thay đổi các lớp (classes) và một số biến (variables) của những thành phần này. Tailwind CSS Nó không cung cấp bất kỳ thành phần nào được thiết kế sẵn; thay vào đó, nó chỉ cung cấp các công cụ cơ bản (các lớp hữu ích) để các nhà phát triển có thể tự xây dựng các thành phần tùy chỉnh hoàn toàn từ đầu. Do đó, nó mang lại mức độ linh hoạt và tính độc đáo rất cao.

Việc ưu tiên sử dụng các lớp (classes) có tính chất “thực dụng” (practical) có thể dẫn đến mã HTML trở nên dài dòng và phức tạp, khó hiểu không?

Đây là một ấn tượng phổ biến khi mới bắt đầu làm việc với HTML. Thực vậy, danh sách các lớp (classes) trong HTML có thể trở nên khá dài. Tuy nhiên, điều này mang lại những lợi thế quan trọng: tất cả các kiểu dáng (styles) đều được hiển thị ở cùng một nơi (trong HTML), không cần phải di chuyển giữa tệp HTML và tệp CSS; điều này giúp loại bỏ những rắc rối liên quan đến việc sử dụng CSS một cách không hiệu quả, đồng thời đảm bảo tính nhất quán trong thiết kế nhờ vào các quy định được đặt ra rõ ràng. Nhiều nhà phát triển nhận thấy rằng cách quản lý kiểu dáng theo nguyên tắc “cục bộ” này thực sự nâng cao độ đọc hiểu và khả năng bảo trì mã nguồn. Đối với những danh sách các lớp cực kỳ phức tạp, có thể sử dụng các công cụ hoặc phương pháp phù hợp để giúp qu @apply Thực hiện việc trừu tượng hóa hợp lý đối với các lệnh (instructions) hoặc thành phần mẫu (template components) trong React/Vue.

Làm thế nào để quản lý các chủ đề và hệ thống thiết kế tùy chỉnh trong dự án Tailwind CSS?

Chủ yếu thông qua… tailwind.config.js Quản lý các tệp tin. Bạn có thể… theme Một số tính năng mở rộng hoặc thay đổi cấu hình mặc định, chẳng hạn như định nghĩa màu sắc của thương hiệu, tùy chỉnh khoảng cách giữa các thành phần trên giao diện, thêm các bộ phông chữ, hoặc tạo các điểm dừng (breakpoints) mới. Tất cả các khóa (keys) được định nghĩa trong cấu hình sẽ tự động tạo ra các lớp (classes) hữu ích tương ứng. Điều này giúp các quyết định thiết kế của toàn bộ dự án được tập trung trong một tệp duy nh

Liệu kích thước file được nén trong môi trường sản xuất của Tailwind CSS có quá lớn không?

Không. Đây chính là Tailwind CSS Điểm tinh tế trong thiết kế nằm ở chỗ: Trong chế độ phát triển, nó thực sự chứa đựng tất cả các lớp có thể có, giúp việc thiết kế nguyên mẫu diễn ra nhanh chóng. Tuy nhiên, khi xây dựng phiên bản sản phẩm cuối cùng, nó sẽ được điều chỉnh dựa trên các thi content Đường dẫn tệp được chỉ định trong trường sẽ được sử dụng để thực hiện phân tích tĩnh; quá trình này bao gồm việc loại bỏ tự động tất cả các kiểu (styles) không được sử dụng bởi các mẫu HTML/JSX/Vue. Kết quả là tệp CSS được tạo ra thường chỉ có kích thước từ vài KB đến hơn mười KB, nhỏ hơn đáng kể so với các framework CSS khác.