Published on

11 tính năng có tính ứng dụng cao nên biết ở Tailwind v4

Authors
  • avatar
    Name
    Harvey Bui
    Twitter

Cấu hình dựa trên CSS

/* Before in v3 (tailwind.config.js) */
module.exports = {
  theme: {
    fontFamily: {
      display: ['Satoshi', 'sans-serif'],
    },
    extend: {
      colors: {
        'custom-blue': '#1234567',
      },
    },
  },
}

/* Now in v4 (directly in your CSS) */
@import 'tailwindcss';

@theme {
  --font-display: 'Satoshi', 'sans-serif';
  --color-custom-blue: #123456;
}

Điểm nổi bật:

  • Không cần cấu hình riêng biệt ở tailwind.config.js
  • Biến CSS tự động nhận

Giá trị tiện ích động

<!-- Before in v3 -->
<div class="grid grid-cols-[15]">
  <!-- Needed arbitrary value -->
  <div data-custom class="[&[data-custom]]:opacity-100">
    <!-- Complex -->

    <!-- Now in v4 -->
    <div class="grid grid-cols-15">
      <!-- Just works -->
      <div data-custom class="data-custom:opacity-100">
        <!-- Clean -->

        <!-- Spacing works with any number -->
        <div class="mt-8">
          <!-- 2rem (8 * 0.25rem) -->
          <div class="w-17"><!-- 4.25rem (17 * 0.25rem) --></div>
        </div>
      </div>
    </div>
  </div>
</div>

Điểm nổi bật:

  • Sử dụng số trực tiếp mà không cần giá trị tùy chỉnh (arbitrary)
  • Sử dụng thuộc tính data mà không cần cấu hình
  • Các thang đo cho kích thước linh hoạt hơn

Container Queries

<div class="@container">
  <!-- Responsive to container size, not viewport -->
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- Content -->
  </div>

  <!-- Can use max-width queries -->
  <div class="grid grid-cols-3 @max-md:grid-cols-1">
    <!-- Content -->
  </div>

  <!-- Can combine min/max for ranges -->
  <div class="flex @min-md:@max-xl:hidden">
    <!-- Content -->
  </div>
</div>

Điểm nổi bật:

  • Tích hợp container queries (không cần cài đặt thêm)
  • Hỗ trợ kết hợp min/max width
  • Sử dụng cú pháp breakpoint quen thuộc

3D Transforms

<div class="perspective-distant">
  <div class="group">
    <div
      class="transition-transform duration-500 transform-3d rotate-x-12 rotate-y-6 group-hover:rotate-y-180"
    >
      <!-- Card content -->
    </div>
  </div>
</div>

Điểm nổi bật:

  • Tích hợp class tiện ích 3D transform
  • Sử dụng được với các trạng thái hover/group
  • Ứng dụng tốt với hiệu ứng lật thẻ và hiệu ứng 3d

Cải tiến gradient

<!-- Angle-based linear gradients -->
<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500">
  <!-- Color space interpolation -->
  <div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">
    <!-- Radial and conic gradients -->
    <div class="bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%">
      <div class="bg-conic from-red-600 to-red-600"></div>
    </div>
  </div>
</div>

Điểm nổi bật:

  • Gradient áp dụng cách tính góc mới
  • Kiểm soát được không gian màu
  • Hỗ trợ radial/conic gradient

Biến thể not

<!-- Style when not hovering -->
<button class="opacity-75 not-hover:opacity-100">Button</button>

<!-- Style when feature not supported -->
<div class="not-supports-[display:grid]:flex">Fallback flex container</div>

<!-- Combine with other states -->
<button class="bg-blue-500 hover:not-focus:bg-blue-600">Interactive button</button>

Điểm nổi bật:

  • Sử dụng được với bất kỳ biến thể có điều kiện nào
  • Hoạt động với truy vấn tính năng (feature queries)
  • Có thể kết hợp với các biến thể khác

Box Shadow và Ring

<!-- Multiple layered shadows -->
<div class="shadow-md inset-shadow-sm inset-shadow-indigo-500/20">
  <!-- Content with both outer and inner shadow -->
</div>

<!-- Fancy button with both ring and inset effects -->
<button class="ring-2 ring-blue-500 inset-ring-1 inset-ring-blue-200/50 hover:ring-blue-600">
  Fancy Button
</button>

<!-- Form input with subtle inset shadow -->
<input class="inset-shadow-xs inset-shadow-gray-950/5 focus:inset-shadow-sm" />

Thêm chiều sâu và độ nổi mà không cần thêm tùy chỉnh CSS

Kích thước thẻ input

<!-- Auto-expanding input -->
<input
  type="text"
  class="field-sizing-content min-w-40 max-w-96"
  placeholder="I grow as you type..."
/>

<!-- Multi-line textarea that grows -->
<textarea class="field-sizing-content min-h-20" rows="2"></textarea>

Hỗ trợ tự động điều chỉnh kích thước cho thẻ input, giúp chúng phù hợp với nội dung mà không cần sử dụng JS.

Giãn Font (Variable fonts)

<!-- Navigation with condensed text -->
<nav class="font-stretch-condensed">
  <!-- Save space in nav -->
</nav>

<!-- Expanding text on hover -->
<h1 class="transition-all font-stretch-normal hover:font-stretch-expanded">Interactive Heading</h1>

First/Last/Nth utilities

<ul>
  <!-- No more wrapper divs for spacing! -->
  <li class="py-4 first:pt-0 last:pb-0">Item</li>

  <!-- Zebra striping without CSS -->
  <li class="odd:bg-gray-50 even:bg-white">Item</li>

  <!-- Target specific items -->
  <li class="nth-3:text-blue-500">Third item special</li>
</ul>

Biến thể in

<!-- Old way -->
<div class="group">
  <span class="group-hover:underline">Needs group class</span>
</div>

<!-- New way -->
<div>
  <span class="in-hover:underline">Works automatically!</span>
</div>

<!-- Nested example -->
<article>
  <h2 class="in-hover:text-blue-500">
    <span class="in-hover:underline"> Both respond to article hover </span>
  </h2>
</article>
View on GitHub