Tailwind CSS v4 New Utilities — What's New and Improved

In this tutorial, you will learn about Tailwind CSS v4 New Utilities. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS v4 introduces several new utility categories and improvements: negative utility values without dash prefix, arbitrary properties syntax, field-sizing, anchor positioning, enhanced gradients, and more.

What You'll Learn

You will learn about new utilities in v4 including negative value syntax, arbitrary properties, field-sizing, anchor positioning for tooltips, and gradient enhancements.

Why It Matters

New utilities reduce the need for custom CSS. DodaTech's v4 upgrade eliminated dozens of custom CSS rules by using new built-in utilities for positioning, sizing, and effects.

Real-World Use

Doda Browser's v4 tooltip component uses anchor positioning utilities instead of JavaScript position calculation, reducing code complexity and improving reliability.

flowchart LR
    A[Container Queries] --> B[New Utilities]
    B --> C[Negative Values]
    B --> D[Arbitrary Properties]
    B --> E[Anchor Positioning]
    B --> F[Field Sizing]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Negative Values (No Dash Prefix)

In v4, negative values use the negative- prefix instead of a leading dash, making them more readable:

<!-- v3: dash prefix -->
<div class="-mt-4 -ml-2 -space-y-2">Content</div>

<!-- v4: negative- prefix -->
<div class="negative-mt-4 negative-ml-2 negative-space-y-2">Content</div>

<!-- Both syntaxes work in v4 for backward compatibility -->

Expected output: Both -mt-4 and negative-mt-4 produce the same negative margin. The negative- prefix is cleaner in code review.

@theme {
  --custom-spacing: 2rem;
}

.overlap-element {
  margin-top: calc(-1 * theme(--custom-spacing));
}

/* v4 recommends using calc() for custom negative values */

Arbitrary Properties

<!-- v4 arbitrary properties -- no brackets needed for simple values -->
<div class="scrollbar-width-thin">
  Custom property values
</div>

<!-- Complex arbitrary values -->
<div class="[scrollbar-width:thin] [scrollbar-color:theme(--color-brand-500)_transparent]">
  Custom scrollbar
</div>

<!-- Multiple arbitrary properties -->
<div class="[container-type:inline-size] [view-transition-name:card]">
  Modern CSS properties
</div>

Expected output: Arbitrary properties work for any CSS property. Simple values don't need brackets. Complex values use the bracket syntax.

Field-Sizing Utilities

/* New field-sizing for form elements */
@import "tailwindcss";

<div class="space-y-4 p-4 max-w-md mx-auto">
  <label class="block text-sm font-medium">Auto-sizing textarea</label>
  <textarea class="field-sizing-content w-full border rounded-lg p-2"
            placeholder="Type to see the textarea grow..."></textarea>

  <label class="block text-sm font-medium">Auto-sizing input</label>
  <input type="text" class="field-sizing-content w-full border rounded-lg p-2"
         placeholder="Wider text makes input grow...">
</div>

Expected output: Textareas and inputs with field-sizing-content grow/shrink to fit their content without JavaScript.

Anchor Positioning

<div class="relative p-12 bg-gray-50 rounded-lg max-w-md mx-auto">
  <!-- Anchor element -->
  <button class="anchor-name-tooltip px-4 py-2 bg-blue-600 text-white rounded-lg">
    Hover for Tooltip
  </button>

  <!-- Tooltip positioned relative to anchor -->
  <div class="
    position-anchor-tooltip
    absolute
    top-[calc(anchor(bottom)+8px)]
    left-[anchor(center)]
    translate-x-negative-50
    bg-gray-900 text-white text-sm px-3 py-2 rounded-lg
    whitespace-nowrap
    opacity-0 hover:opacity-100
    transition-opacity
    pointer-events-none
  ">
    Tooltip content
  </div>
</div>

Expected output: The tooltip positions itself relative to the anchor button using CSS anchor positioning, without JavaScript position calculation.

Enhanced Gradients

@import "tailwindcss";

@theme {
  --color-brand-500: #7c3aed;
  --color-brand-300: #c4b5fd;
}

<div class="space-y-4 p-4">
  <!-- Conic gradient -->
  <div class="bg-conic-gradient from-brand-500 via-pink-500 to-brand-300 w-32 h-32 rounded-full"></div>

  <!-- Radial gradient with shape -->
  <div class="bg-radial-gradient from-brand-500 to-transparent w-48 h-32 rounded-lg"></div>

  <!-- Multiple gradient stops -->
  <div class="bg-linear-gradient to-r from-brand-500 via-purple-500 via-pink-500 to-orange-500 w-full h-24 rounded-lg"></div>

  <!-- Gradient with angle -->
  <div class="bg-linear-gradient to-tr from-blue-500 to-green-500 w-full h-24 rounded-lg"></div>
</div>

Expected output: New gradient utilities support conic, radial, linear with multiple stops, angles, and shapes.

Overscroll and Scroll Behaviors

<div class="space-y-4 p-4">
  <!-- Overscroll containment -->
  <div class="overscroll-contain h-32 overflow-auto bg-gray-50 p-4 rounded-lg border">
    <p class="h-48 text-gray-600">This container contains overscroll and prevents scroll chaining.</p>
  </div>

  <!-- Smooth scrolling -->
  <div class="scroll-smooth h-32 overflow-auto bg-gray-50 p-4 rounded-lg border">
    <p class="text-gray-600">Smooth scroll behavior for anchor links within this container.</p>
  </div>

  <!-- Scroll snap -->
  <div class="snap-x snap-mandatory flex overflow-x-auto gap-4 p-2">
    <div class="snap-center shrink-0 w-48 h-24 bg-blue-100 rounded-lg flex items-center justify-center">Slide 1</div>
    <div class="snap-center shrink-0 w-48 h-24 bg-blue-200 rounded-lg flex items-center justify-center">Slide 2</div>
    <div class="snap-center shrink-0 w-48 h-24 bg-blue-300 rounded-lg flex items-center justify-center">Slide 3</div>
  </div>
</div>

Expected output: New scroll utilities for overscroll containment, smooth scrolling, and scroll snap behavior.

Common Mistakes

1. Using Old Negative Value Syntax

The dash prefix for negative values (-mt-4) still works in v4. The negative-mt-4 syntax is new and optional.

2. Expecting Anchor Positioning in All Browsers

Anchor positioning is new and may not be supported in all browsers. Check caniuse.com before using in production.

3. Forgetting field-sizing Needs Content

field-sizing: content sizes to content. field-sizing: fixed uses the default behavior. They are not interchangeable.

4. Gradient Syntax Differences

v4 gradient utilities use bg-linear-gradient, bg-radial-gradient, bg-conic-gradient -- not the v3 bg-gradient-to-* syntax (which still works).

5. Not Testing Scroll Snap on Touch Devices

Scroll snap behaves differently on touch vs mouse. Always test on mobile devices.

Practice Questions

1. What is the new negative value prefix? negative-. Example: negative-mt-4 for negative margin-top.

2. How do you use CSS anchor positioning in v4? Use anchor-name-* on the anchor and position-anchor-* on the positioned element.

3. What does field-sizing-content do? Makes form elements (textarea, input) grow/shrink to fit their content automatically.

4. What are the new gradient utility names? bg-linear-gradient, bg-radial-gradient, bg-conic-gradient.

5. How do you prevent scroll chaining? overscroll-contain on the scrollable element.

Challenge

Build a component that uses 3 new v4 utilities: anchor positioning for a tooltip, field-sizing for a textarea, a conic gradient for a loading spinner, and scroll snap for a carousel.

FAQ

Mini Project

Build a UI component that showcases v4 new utilities: an anchor-positioned tooltip for a button, field-sizing textarea in a form, conic gradient loading spinner, scroll snap image carousel, and overscroll-contained side panel.

What's Next

Now master Custom Themes for building complete design systems. Then explore Color Palette for advanced color management.