Tailwind CSS là gì? Tại sao nên sử dụng nó?

Khi viết code một ứng dụng từ đầu, bạn muốn nó phản ánh thương hiệu độc đáo của mình, phản hồi trên mọi thiết bị, dễ viết và bảo trì - đó có lẽ chỉ là một vài mục trong danh sách mong muốn của bạn.

Bằng cách xây dựng với Tailwind CSS, bạn có thể kiểm tra những mục này trong danh sách của mình. Tailwind CSS là một framework CSS để nhanh chóng xây dựng và tùy chỉnh các ứng dụng mà không cần viết CSS tùy chỉnh.

Tailwind CSS là gì?

Tailwind CSS là một framework CSS tiện ích đầu tiên được thiết kế để cho phép người dùng tạo ứng dụng nhanh chóng và dễ dàng hơn. Bạn có thể sử dụng các lớp tiện ích để kiểm soát bố cục, màu sắc, khoảng cách, kiểu chữ, bóng đổ, v.v... để tạo thiết kế thành phần hoàn toàn tùy chỉnh - mà không cần rời khỏi HTML hoặc viết một dòng CSS tùy chỉnh nào.

Ví dụ, giả sử bạn muốn tạo một nút có chiều cao cố định, đệm ngang, màu nền đen, các cạnh bo tròn và phông chữ màu trắng, in đậm. Sau đây là HTML bạn sẽ sử dụng:

<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">Buy now</button>

HTML chứa 6 lớp tiện ích. Hãy phân tích từng lớp bên dưới:

• h-10: Lớp này đặt nút ở chiều cao cố định là 10 đơn vị.
• px-6: Lớp này đặt đệm ngang của nút ở 6 đơn vị.
• font-semibold: Lớp này đặt độ đậm của phông chữ của nút thành semibold.
• rounded-md: Lớp này đặt bán kính đường viền của nút sao cho các góc được bo tròn.
• bg-black: Lớp này đặt màu nền của nút thành màu đen.
• text-white: Lớp này đặt màu văn bản của nút thành màu trắng.

Như bạn có thể đoán, quá trình làm quen với Tailwind CSS chủ yếu bao gồm việc làm quen với các lớp tiện ích của nó. Nhưng sau khi làm quen, bạn sẽ có thể nhanh chóng và nhất quán tạo các thành phần tùy chỉnh như nút bên dưới.

Bây giờ, chúng ta đã hiểu rõ hơn về framework Tailwind CSS, hãy cùng xem một số lợi ích khi sử dụng nó.

Lợi ích của Tailwind CSS

Có nhiều lợi ích khi sử dụng framework CSS như Tailwind. Sau đây là những lợi ích chính.

• Bạn viết ít CSS tùy chỉnh hơn. Với Tailwind, bạn định kiểu các thành phần bằng cách áp dụng những lớp có sẵn trực tiếp trong HTML của mình. Bằng cách sử dụng các lớp tiện ích theo cách này, bạn có thể xây dựng các thiết kế tùy chỉnh mà không cần viết CSS.
• Giữ cho các file CSS nhỏ gọn. Nếu không có một framework như Tailwind, bạn phải tiếp tục viết CSS khi thêm các tính năng và thành phần mới. Do đó, các file CSS của bạn tiếp tục phát triển và trở nên nặng hơn. Bằng cách sử dụng các tiện ích như tiện ích flexbox và padding của Tailwind, hầu hết các kiểu đều có thể tái sử dụng nên bạn hiếm khi cần phải viết CSS mới.
• Bạn không phải chọn tên lớp. Khi sử dụng Tailwind, bạn đang chọn các lớp từ một hệ thống thiết kế được xác định trước. Điều đó có nghĩa là bạn không cần phải đau đầu chọn tên lớp "hoàn hảo" cho một số kiểu và thành phần nhất định hoặc nhớ các tên phức tạp như sidebar-inner-wrapper.
• Bạn có thể thực hiện các thay đổi an toàn hơn. Với cách tiếp cận truyền thống, nếu thực hiện các thay đổi đối với CSS, bạn có thể làm hỏng một số thứ trên trang web của mình. Không giống như CSS, các lớp tiện ích trong HTML của bạn là cục bộ. Điều đó có nghĩa là bạn có thể thay đổi chúng mà không phải lo lắng về việc làm hỏng thứ gì đó khác trên trang web của mình.

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

Bây giờ, bạn có thể tự hỏi tại sao lại sử dụng Tailwind thay vì các framework CSS khác? Tailwind CSS là một framework cấp thấp. Nghĩa là, không giống như các framework CSS khác như Bootstrap và Materialize, Tailwind không cung cấp những thành phần được định kiểu đầy đủ như nút, danh sách drop-down và thanh điều hướng. Thay vào đó, nó cung cấp các lớp tiện ích để bạn có thể tạo những thành phần có thể tái sử dụng của riêng mình.

Vì lý do đó, nó cung cấp nhiều tính linh hoạt và khả năng kiểm soát hơn đối với giao diện ứng dụng so với các framework CSS khác. Điều này có thể cho phép bạn tạo một trang web độc đáo hơn.

Để tìm hiểu thêm về Tailwind CSS là gì, lợi ích mà nó mang lại và lý do tại sao bạn nên sử dụng nó, hãy xem video này:

Ví dụ về Tailwind CSS

Tailwind cung cấp các thành phần UI và template hoặc "ví dụ" để giúp bạn bắt đầu xây dựng ứng dụng của mình một cách nhanh chóng.

Tailwind có một kho lưu trữ bao gồm các ví dụ về trang đích, phần tính năng, biểu mẫu đăng ký bản tin, bảng, cửa sổ phương thức, biểu mẫu thanh toán, giỏ hàng, v.v... Bạn có thể nhận code cho hầu hết hoặc tất cả các ví dụ này với một khoản phí gói một lần.

Kho lưu trữ khác do các thành viên cộng đồng tạo ra và là mã nguồn mở. Bài viết sẽ tập trung vào các ví dụ từ kho lưu trữ này bên dưới.

Biểu mẫu CSS Tailwind

Để cho phép người dùng đăng ký nhận bản tin, bạn có thể sử dụng Tailwind để tạo biểu mẫu đăng ký nhận email.

Để tạo biểu mẫu đăng ký nhận email đơn giản như biểu mẫu hiển thị ở trên, bạn có thể sử dụng code sau:

<div>
  <form class="m-4 flex">
    <input class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" placeholder="your@mail.com" />
    <button class="px-8 rounded-r-lg bg-yellow-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r">Subscribe</button>
  </form>
</div>

Để tùy chỉnh đường viền, màu nền, màu chữ và các khía cạnh khác của biểu mẫu này, bạn có thể thay đổi các lớp tiện ích border-{style}, bg-{color} và text-{color}, trong số những lớp khác.

Thanh tìm kiếm CSS Tailwind

Để cho phép người dùng tìm kiếm ứng dụng dựa trên từ khóa, bạn có thể sử dụng Tailwind để tạo thanh tìm kiếm.

Để tạo thanh tìm kiếm có biểu tượng và nút Submit như hình minh họa ở trên, bạn có thể sử dụng code sau:

<div class="max-w-2xl mx-auto">
  <form class="flex items-center">
    <label for="simple-search" class="sr-only">Search</label>
    <div class="relative w-full">
      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
    </div>
    <button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg></button>
  </form>
</div>

Thanh trượt CSS Tailwind

Để trượt qua nhiều phần tử và hình ảnh, bạn có thể sử dụng Tailwind để tạo thành phần thanh trượt hoặc carousel.

Để tạo thanh trượt như hình minh họa ở trên, bạn có thể sử dụng HTML sau:

<div class="h-screen w-full overflow-hidden flex flex-nowrap text-center" id="slider">
  <div class="bg-blue-600 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
    <h2 class="text-4xl max-w-md">Your Big Ideia</h2>
    <p class="max-w-md">It's fast, flexible, and reliable — with zero-runtime.</p>
  </div>
  <div class="bg-pink-400 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
    <h2 class="text-4xl max-w-md">Tailwind CSS works by scanning all of your HTML</h2>
    <p class="max-w-md">It's fast, flexible, and reliable — with zero-runtime.</p>
  </div>
  <div class="bg-teal-500 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
    <h2 class="text-4xl max-w-md">React, Vue, and HTML</h2>
    <p class="max-w-md">Accessible, interactive examples for React and Vue powered by Headless UI, plus vanilla HTML if you’d rather write any necessary JS yourself.</p>
  </div>
</div>

Lưu ý: Thành phần này được tạo mà không có JS Library, nhưng bạn sẽ cần code JavaScript sau để kích hoạt thanh trượt.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const slider = document.querySelector('#slider');
    setTimeout(function moveSlide() {
      const max = slider.scrollWidth - slider.clientWidth;
      const left = slider.clientWidth;
      if (max === slider.scrollLeft) {
        slider.scrollTo({
          left: 0,
          behavior: 'smooth'
        })
      } else {
        slider.scrollBy({
          left,
          behavior: 'smooth'
        })
      }
      setTimeout(moveSlide, 2000)
    }, 2000)
  })
</script>

Mẹo: Thêm lớp tiện ích flex-nowrap vào div cha để ngăn không cho nó bao quanh và thêm lớp tiện ích flex-none vào các div con (slide) để ngăn không cho chúng phát triển hoặc thu hẹp.

Bảng giá Tailwind CSS

Để hiển thị cho khách hàng nhiều gói cao cấp với các tính năng và mức giá khác nhau, bạn có thể sử dụng Tailwind CSS để tạo bảng giá.

Để tạo phần "Intro" của bảng giá như phần hiển thị ở trên, bạn có thể sử dụng code sau:

<section class="bg-white dark:bg-gray-800">
  <div class="container px-6 py-8 mx-auto">

    <div class="grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      <div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
        <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Intro</p>
        <h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$19 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
        <p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>

        <div class="mt-8 space-y-8">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>

            <span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
          </div>

          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>

            <span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
          </div>

          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>

            <span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
          </div>

          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>

            <span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
          </div>

          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>

            <span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
          </div>
        </div>

        <button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
          Choose plan
        </button>
      </div>

    </div>
  </div>
</section>

Lưu ý: Code này sẽ chỉ tạo container đầu tiên cho gói “Intro”. Để tạo container cho các gói “Base”, “Popular” và “Enterprise”, bạn sẽ phải sao chép code này, hoán đổi văn bản cho từng tên và giá gói.

Mẹo: Thêm trình sửa đổi “hover:” trước tên lớp như “bg-gray-200” để áp dụng lớp tiện ích đó theo điều kiện (tức là để container chỉ thay đổi màu nền khi người dùng di chuột qua).

Để xem thêm các ví dụ, chẳng hạn như cách xây dựng thanh bên bằng Tailwind CSS, hãy xem video này:

Sử dụng Tailwind CSS để tăng tốc quá trình viết code

Tailwind CSS giúp bạn viết và duy trì code ứng dụng nhanh hơn. Bằng cách sử dụng framework tiện ích này, bạn không cần phải viết CSS tùy chỉnh để định dạng ứng dụng của mình. Thay vào đó, bạn có thể sử dụng các lớp tiện ích để kiểm soát phần đệm, lề, màu sắc, phông chữ, bóng đổ và nhiều thứ khác trong ứng dụng của mình.

Có thể bạn sẽ mất một thời gian để làm quen với các lớp tiện ích này, nhưng khi đã quen, bạn sẽ có thể tạo và duy trì ứng dụng nhanh hơn bao giờ hết.