🚀 What’s New in Tailwind CSS v4.3: Top Features with Code Examples

If you haven’t checked out the latest Tailwind CSS v4.3 release yet, you are missing out on some massive workflow upgrades. This update brings long-awaited layout properties natively into the framework, cutting down the need for custom CSS or third-party plugins.
Here is a breakdown of the most exciting features in Tailwind CSS v4.3, complete with practical code examples.

1. Native Scrollbar Styling (No Plugins Required!)

Historically, custom scrollbars meant writing complex, browser-specific CSS or importing extra plugins. Tailwind v4.3 resolves this by adding native utility support for width, color, and gutter properties.

📝 Code Example:

<!-- A modern, slim blue scrollbar container -->
<div class="h-48 overflow-y-scroll scrollbar-thin scrollbar-thumb-blue-500 scrollbar-track-slate-100">
  <p class="p-4">
    Scroll down to see the native custom scrollbar in action. 
    No extra CSS files or external plugins are required anymore!
  </p>
</div>

2. Height-Aware Container Queries

Container queries are a game changer for component-driven design. While previous versions focused heavily on inline sizes (width), v4.3 introduces @container-size to target parent block-size (height).

📝 Code Example:

<!-- Parent container explicitly tracking size -->
<div class="@container/card h-[300px] border border-slate-200">
  <!-- Content changes color only if parent height exceeds 200px -->
  <p class="text-slate-600 @[block-size>200px]/card:text-emerald-600 font-semibold">
    My color shifts dynamically based on my container's height!
  </p>
</div>

3. Dedicated zoom-* and tab-* Utilities

Two highly useful layout utility shortcuts have officially mapped to native CSS attributes. You can now quickly control browser-level element zooming and tab indentation sizes.

📝 Code Example:

<!-- Using zoom-* to scale UI previews -->
<div class="zoom-120 bg-slate-50 p-4 border rounded">
  Scaled preview box (120% magnification).
</div>

<!-- Using tab-* to fix code block formatting -->
<pre class="tab-2 bg-slate-900 text-white p-4 rounded mt-4">
function initTailwind() {
    console.log("Tab width is now precisely 2 spaces instead of 8!");
}
</pre>

4. Multi-Layered CSS Formatting inside @variant

For design system maintainers, writing complex element states in pure HTML can look messy. Tailwind v4.3 allows you to combine stacked and compound states seamlessly directly inside your global CSS file using the @variant engine.

📝 Code Example (global.css):

/* Combining complex user interaction points into one custom utility */
@variant hover-focus (&:hover:focus, &:focus-within);

📝 Code Example (index.html):

<!-- Cleaner class strings with pre-bundled behaviors -->
<button class="bg-gray-200 text-black hover-focus:bg-indigo-600 hover-focus:text-white transition">
  Interactive Button
</button>

5. Smarter Fallbacks with --default(…) syntax

Creating reusable utility definitions on top of Tailwind just got safer. The new --default(…) syntax acts as a structural fallback, meaning your custom designs won't break if a specific design token configuration goes missing.

📝 Code Example (global.css):

@utility custom-alert-gap {
  /* Automatically falls back to 2rem (spacing-8) if no variable is provided */
  margin-top: --default(var(--spacing-8));
}

📝 Code Example (index.html):

<!-- Safely uses the fallback structural styling automatically -->
<div class="custom-alert-gap bg-amber-50 p-4">
  This component stays perfectly spaced even without active theme flags.
</div>

6. Frictionless Project Migrations

Upgrading your legacy applications to the modern v4 ecosystem is significantly cleaner. The built-in automated CLI conversion tool has an updated canonicalizer to prevent broken file paths and preserve raw style elements smoothly.

💻 Upgrade Terminal Command:

npx @tailwindcss/upgrade