#The Updates That Matter in TailwindCss v4

ℹ️ Tailwind CSS v4 full builds are up to 5× faster, incremental builds complete in microseconds, and the entire configuration model has moved from tailwind.config.js to a CSS-first approach. I was wondered what new properties now exist and how we can use it.

Container Queries

Container queries are now built into Tailwind v4 core and no plugin required. Previously you needed the separate @tailwindcss/container-queries package. Now, a single @container utility turns any element into a container context and descendants can respond to its size using @sm:, @md:, @lg:, and so on.

Media queries respond to the viewport. Container queries respond to the space a component actually occupies. Here you can check how this property supports in different browsers

Container Query vs Media Query

When you have nested containers and need to target a specific ancestor, use the slash syntax:

Max-width container queries

v4 also supports @max-* variants for styling elements below a container size — useful for progressive disclosure patterns:

<div class="@container">
  <!-- Hide label text when container is smaller than md -->
  <button class="flex items-center gap-2">
    <svg class="size-5">...</svg>
    <span class="@max-md:hidden">Save changes</span>
  </button>
</div>

Best practice: Use container queries for component-level layout (cards, sidebars, toolbars). Keep viewport breakpoints (sm:, md:) for page-level structure. Mixing both gives you layered, bulletproof responsiveness.

📖 Container Queries — Tailwind CSS Docs

2. Logical Properties

A substantial part of v4’s changes involves migrating from physical CSS properties (left, right, top) to logical ones (inline-start, inline-end, block-start). This is not just an API change — it’s a correctness improvement for anyone building multilingual or RTL interfaces.

In Tailwind v4, utilities like px-* now map to padding-inline rather than padding-left + padding-right. For LTR layouts nothing looks different. For RTL users, everything just works.

Physical vs. logical mapping

New explicit logical utilities

Practical RTL example

<!-- Works correctly in both LTR and RTL without any extra classes -->
<div dir="rtl">
  <div class="snap-x scroll-ps-6">
    <!-- scroll-ps maps to scroll-padding-inline-start -->
    <!-- automatically right-aligned in RTL context -->
  </div>
</div>

📖 Margin — Tailwind CSS Docs
📖 Padding — Tailwind CSS Docs
📖 Scroll Padding — Tailwind CSS Docs

3. New Color Palettes

Tailwind v4 ships a redesigned color palette based on oklch instead of sRGB, meaning colors are more perceptually uniform across different display technologies (P3 displays, OLED panels). Four new palettes have been added to fill gaps in the muted/neutral space:

These aren’t vivid accent colors — they’re muted neutrals built for backgrounds, surfaces, and subtle UI elements. They pair naturally with the existing slate/zinc/stone palettes and fit current design trends that favor soft, sophisticated interfaces.

Customizing with oklch in your theme

/* Using oklch-based colors in your theme */
@theme {
  --color-mauve-100: oklch(0.95 0.02 310);
  --color-mauve-500: oklch(0.55 0.06 310);
  --color-mauve-900: oklch(0.25 0.04 310);
}

📖 Colors — Tailwind CSS Docs

4. Scrollbar Styling Utilities

Scrollbar styling has historically been a mess — webkit pseudo-elements for Chrome/Safari, a completely different scrollbar-width / scrollbar-color API for Firefox. Tailwind v4 provides a consistent utility layer over both standards.

Width control

<!-- System default scrollbar -->
<div class="overflow-y-auto scrollbar-auto">...</div>

<!-- Thin/narrow scrollbar -->
<div class="overflow-y-auto scrollbar-thin">...</div>

<!-- Completely hidden scrollbar (still scrollable) -->
<div class="overflow-y-auto scrollbar-none">...</div>

Color theming

<!-- Themed scrollbar with thumb and track colors -->
<div class="
  overflow-y-scroll
  scrollbar-thin
  scrollbar-thumb-slate-400
  scrollbar-track-slate-800
  hover:scrollbar-thumb-slate-300
">
  <!-- Your scrollable content -->
</div>

Color scheme integration

v4 also adds color-scheme utilities, solving the longstanding dark mode problem where the browser’s native scrollbars stay light even when your UI is dark:

<!-- Force dark native scrollbars to match your dark UI -->
<html class="scheme-dark">
  <body class="bg-slate-900 text-white">
    <!-- Native scrollbars now render in dark mode automatically -->
  </body>
</html>

📖 Color Scheme — Tailwind CSS Docs

5. Improved Variant System

Tailwind v4 dramatically expands what you can express in a single class. Stacked and compound variants, plus several new @variant additions, reduce the need for custom CSS in complex UI state scenarios.

Composable variants

<!-- Stacked variants: apply when both conditions are true -->
<button class="hover:focus:ring-2 hover:focus:ring-violet-500">
  Save
</button>

<!-- not-* variant: style only when condition is NOT met -->
<div class="not-hover:opacity-60 transition-opacity">
  Fades in on hover
</div>

New in-* variant

The in-* variant works like group-* but without needing to add the group class to the parent — cleaner markup for simpler cases:

<!-- Old way with group -->
<div class="group">
  <span class="group-hover:text-blue-500">Label</span>
</div>

<!-- New way with in-* -->
<div>
  <span class="in-hover:text-blue-500">Label</span>
</div>

Enter/exit transitions without JavaScript

<!-- @starting-style: run transition when element first appears in DOM -->
<div class="
  opacity-100 translate-y-0 transition-all duration-300
  starting:opacity-0 starting:translate-y-2
">
  Animates in automatically when inserted into the DOM
</div>

Other notable new variants

📖 Variants — Tailwind CSS Docs

6. Official Webpack Plugin

Tailwind v4 ships a first-party Vite plugin (@tailwindcss/vite) for maximum performance, but many production systems — particularly enterprise monorepos and legacy Rails/Django applications — still rely on Webpack. The new @tailwindcss/webpack package brings full v4 support to those setups.

// Install: npm install @tailwindcss/webpack
const TailwindCSS = require('@tailwindcss/webpack');

module.exports = {
  plugins: [
    new TailwindCSS()
  ]
};

/* In your CSS entry point — no config file needed */
@import "tailwindcss";

Note: The Webpack plugin uses the same Lightning CSS engine as the Vite plugin, so you still get the full performance benefits of v4’s compiler. No separate tailwind.config.js is needed — configuration lives in your CSS file via @theme.

📖 Framework Guides — Tailwind CSS Docs

7. More Utility Expansions

Beyond the headline features, v4 fills dozens of gaps in the utility system. Here are the ones most likely to save you from writing custom CSS.

3D Transform utilities

<div class="perspective-distant">
  <article class="
    transform-3d
    rotate-x-12
    hover:rotate-x-0
    transition-transform duration-300
  ">
    Card with 3D tilt effect
  </article>
</div>

Font feature settings

<!-- Enable OpenType features on variable fonts -->
<p class="font-features-tnum font-features-liga">
  Tabular numbers and ligatures: fi fl 1,234.56
</p>

Font stretch for variable fonts

<!-- Control width axis on variable fonts -->
<h1 class="font-stretch-condensed">Narrow heading</h1>
<h1 class="font-stretch-expanded">Wide heading</h1>

CSS-first theme configuration

One of the biggest architectural changes in v4 — configuration has moved from JavaScript to CSS:

/* No more tailwind.config.js — configure directly in CSS */
@import "tailwindcss";

@theme {
  --font-sans: "Syne", sans-serif;
  --breakpoint-3xl: 1920px;
  --color-brand: oklch(0.55 0.22 270);
  --spacing: 0.25rem; /* base spacing unit */
}

All theme values are automatically exposed as CSS custom properties, so they’re available anywhere — not just inside Tailwind classes.

📖 Font Weight — Tailwind CSS Docs
📖 Theme Configuration — Tailwind CSS Docs
📖 Adding Custom Styles — Tailwind CSS Docs

The Bigger Picture

These changes aren’t random additions. They reflect a coherent architectural vision:

• Tailwind is becoming a bridge to modern CSS. Container queries, logical properties, cascade layers, and color-mix() are native browser features. Tailwind just makes them ergonomic.
• Configuration is moving to CSS. The shift from tailwind.config.js to @theme removes a layer of indirection and makes design tokens directly available as CSS variables everywhere.
• RTL and i18n are first-class. Logical properties are a quiet but significant commitment to building CSS that works correctly in Arabic, Hebrew, Japanese vertical text, and other writing systems — by default.
• The performance story is real. Lightning CSS under the hood means full builds in milliseconds and incremental builds in microseconds. This matters for large teams and monorepos.

If you’re starting a new project in 2026, v4 is the right choice. For existing projects, the official upgrade tool handles most of the migration automatically:

npx @tailwindcss/upgrade

References: tailwindcss.com/blog/tailwindcss-v4 · GitHub CHANGELOG · tailwindcss.com/docs