Tailwind CSS hidden utilities you should know (Part 2)

Tailwind CSS v4 keeps shipping utilities that quietly solve complex layout and interaction problems. This sequel rounds up fresh helpers that complement the first edition—think subgrid layouts, logical spacing, data-driven variants, and browser-personalized states. Every example sticks to first-party Tailwind CSS v4 features so you can drop them into production without wiring custom CSS.

If you haven’t read part 1, you should check it out first.

1. grid-cols-subgrid brings subgrid to repeatable patterns

Lean on grid-cols-subgrid (and its grid-rows-subgrid twin) when nested components need to snap to a parent grid’s tracks.

<section class="grid grid-cols-6 gap-6">
  <article class="grid grid-cols-subgrid grid-rows-subgrid col-span-3 gap-4 rounded-3xl border border-slate-200 p-6">
    <h3 class="text-lg font-semibold text-slate-900">Marketing card</h3>
    <p class="text-sm text-slate-600">Copy aligns with the outer grid without duplicate template math.</p>
  </article>
</section>

• Perfect for dashboards with repeating cards that must align with higher-level gutters.
• Works in both columns and rows, making editorial layouts less brittle.

2. grid-flow-row-dense backfills masonry gaps

grid-flow-row-dense tells CSS Grid to aggressively backfill empty slots created by varying row spans.

<div class="grid grid-cols-3 grid-flow-row-dense gap-4">
  <div class="col-span-1 row-span-2 rounded-2xl bg-slate-900/90 p-6 text-white">Tall teaser</div>
  <div class="rounded-2xl bg-slate-100 p-6">Short note</div>
  <div class="col-span-2 rounded-2xl bg-slate-100 p-6">Wide story</div>
  <div class="rounded-2xl bg-slate-100 p-6">Quick link</div>
</div>

• Reduces awkward whitespace in magazine or inspiration grids.
• Keeps keyboard order intact, unlike shuffling cards with JavaScript.

3. auto-rows-[minmax(6rem,_auto)] tames unpredictable row heights

Arbitrary value support lets you craft elastic row tracks in one class.

<section class="grid auto-rows-[minmax(6rem,_auto)] gap-6 md:grid-cols-2">
  <article class="rounded-3xl border border-slate-200 p-6">Short blurb</article>
  <article class="rounded-3xl border border-slate-200 p-6">Longer testimonial that still lines up.</article>
</section>

• Prevents tiny cards from collapsing while respecting longer content.
• Ideal for mixed-length testimonials, changelog entries, or FAQs.

4. Logical margins: ms-auto and me-auto

Tailwind’s logical spacing utilities (ms-*, me-*) respect writing direction without conditionals.

<nav class="flex items-center gap-4 border-b border-slate-200 p-4">
  <a class="text-sm text-slate-500" href="#docs">Docs</a>
  <a class="text-sm text-slate-500" href="#api">API</a>
  <button class="ms-auto rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white">
    Start free trial
  </button>
</nav>

• Works automatically for RTL languages because “start” and “end” flip.
• Keeps design tokens consistent across globalized UI.

5. rounded-s-3xl softens only the leading edge

Need a pill that hugs one side but stays sharp on the other? Use logical corner radii like rounded-s-3xl.

<div class="flex max-w-xl overflow-hidden rounded-e-xl border border-slate-200">
  <div class="rounded-s-3xl bg-indigo-500 px-6 py-4 text-white">
    New
  </div>
  <p class="flex-1 px-6 py-4 text-sm text-slate-700">
    Logical radii make hero banners behave in both LTR and RTL layouts.
  </p>
</div>

• Adds polish to hero badges, toasts, and inline alerts.
• Maintains symmetry when the interface mirrors for RTL audiences.

6. start-1/2 anchors components with logical positioning

start-* and end-* mirror left/right offsets using logical directions.

<div class="relative h-64 rounded-3xl bg-slate-900/95">
  <button
    class="absolute start-1/2 top-10 -translate-x-1/2 rounded-full bg-white/10 px-6 py-3 text-sm font-medium text-white backdrop-blur"
  >
    Preview line-up
  </button>
</div>

• Centers CTAs over carousels regardless of text direction.
• Removes the need for separate RTL overrides in component libraries.

7. snap-always keeps carousels glued to slides

Pair snap-always with snap-start to force every card to settle, even during quick flicks.

<div class="flex snap-x snap-always overflow-x-auto">
  <article class="snap-start min-w-[18rem] rounded-3xl border border-slate-200 p-6">Slide 01</article>
  <article class="snap-start min-w-[18rem] rounded-3xl border border-slate-200 p-6">Slide 02</article>
  <article class="snap-start min-w-[18rem] rounded-3xl border border-slate-200 p-6">Slide 03</article>
</div>

• Prevents half-visible cards that feel broken on touch devices.
• Great for product highlight strips and onboarding tours.

8. marker:text-slate-400 modernizes bullet lists

Tailwind ships marker: variants for styling native list bullets and numbers.

<ul class="space-y-3 text-sm text-slate-600 marker:text-slate-400 marker:text-lg">
  <li>Marketing weekly stand-up</li>
  <li>Design QA review</li>
  <li>Content retro sync</li>
</ul>

• Customizes bullets without pseudo-elements or extra spans.
• Supports hover and group states (group-hover:marker:text-indigo-500).

9. selection:bg-indigo-500/10 crafts branded text highlights

Give text blocks a polished selection state using Tailwind’s selection: variant.

<p class="selection:bg-indigo-500/10 selection:text-indigo-700 text-pretty text-slate-700">
  Highlight any sentence here and the selection matches your design system instantly.
</p>

• Ensures consistent UX between light and dark themes.
• Especially helpful for documentation sites or code snippets users copy.

10. file:* variant styles native file inputs

The file: prefix targets the clickable button inside <input type="file">.

<label class="block text-sm font-medium text-slate-700">Upload brand assets</label>
<input
  type="file"
  class="mt-2 block w-full cursor-pointer rounded-xl border border-dashed border-slate-300 bg-slate-50/60 px-4 py-3 text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-indigo-500 file:px-4 file:py-2 file:font-medium file:text-white hover:file:bg-indigo-600"
/>

• Matches file inputs to the rest of your form components with zero custom CSS.
• Supports hover, focus, and disabled states using standard Tailwind prefixes.

11. placeholder-shown: reacts to empty fields

Target the :placeholder-shown pseudo-class to style untouched inputs.

<input
  type="text"
  placeholder="Workspace name"
  class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm text-slate-700 placeholder:text-slate-400 placeholder-shown:border-amber-400 placeholder-shown:bg-amber-50/30 focus:border-slate-900 focus:bg-white"
/>

• Subtly nudges users to replace default placeholders.
• Combine with placeholder-shown:shadow-inner for more pronounced cues.

12. autofill:bg-transparent keeps browser autofill on brand

Use autofill: variants to override Chrome’s yellow background without hacks.

<input
  type="email"
  autocomplete="email"
  class="w-full rounded-xl border border-slate-200 bg-slate-900/80 px-4 py-3 text-sm text-white autofill:bg-transparent autofill:text-white autofill:shadow-[0_0_0px_1000px_rgba(15,23,42,0.95)_inset]"
  placeholder="you@example.com"
/>

• Prevents autofill styles from breaking dark-mode aesthetics.
• Works great alongside user-valid: to celebrate successful inputs.

13. peer-aria-expanded: coordinates disclosure controls

Combine peer and aria-* variants to style dependent elements without scripting.

<button
  aria-expanded="false"
  class="peer flex w-full items-center justify-between rounded-2xl border border-slate-200 px-5 py-3 text-sm font-medium text-slate-700"
>
  Collaboration
  <svg class="size-4 transition peer-aria-expanded:rotate-180" viewBox="0 0 20 20" fill="none">
    <path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="1.5" />
  </svg>
</button>
<div class="peer-aria-expanded:max-h-[320px] peer-aria-expanded:opacity-100 max-h-0 overflow-hidden rounded-2xl border border-slate-200/70 px-5 py-0 opacity-0 transition-all duration-300">
  <p class="py-4 text-sm text-slate-600">ARIA state drives the accordion with zero JavaScript bookkeeping.</p>
</div>

• Keeps markup declarative while syncing icons, borders, and content height.
• Works with peer-data-[state=open] for more semantic state machines.

14. group-focus-within: highlights interactive shells

group-focus-within styles container chrome when any child receives focus.

<div class="group flex flex-col gap-3 rounded-3xl border border-slate-200 p-6 transition group-focus-within:border-indigo-500 group-focus-within:shadow-lg">
  <label class="text-sm font-medium text-slate-600" for="project-name">Project name</label>
  <input id="project-name" class="rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-indigo-500 focus:outline-none" />
  <textarea class="rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-indigo-500 focus:outline-none" rows="3"></textarea>
</div>

• Polishes multi-field widgets like command palettes and editable cards.
• A11y friendly because it keys off focus visibility, not hover hacks.

15. has-[:checked] powers CSS-only toggle wrappers

The has() selector is exposed via Tailwind’s has-[...] variant, so parents can react to children.

<label class="flex items-center gap-4 rounded-2xl border border-slate-200 p-4 has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-500/5">
  <input type="checkbox" class="size-4 rounded border-slate-300 text-indigo-500" />
  <span class="text-sm text-slate-700">Enable weekly digest</span>
</label>

• Great for pricing cards, permission toggles, or plan selectors.
• Avoids event listeners whose only job was toggling parent classes.

16. data-[state=open]: styles from component state attributes

Frameworks often emit data-state="open" or similar markers. Tailwind lets you target them directly.

<button
  data-state="closed"
  class="group inline-flex items-center gap-3 rounded-full border border-slate-200 px-5 py-2 text-sm text-slate-600 data-[state=open]:border-indigo-500 data-[state=open]:bg-indigo-50 data-[state=open]:text-indigo-600"
>
  Changelog
  <svg class="size-4 transition group-data-[state=open]:rotate-180" viewBox="0 0 20 20" fill="none">
    <path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="1.5" />
  </svg>
</button>

• Maps perfectly to Radix UI, Headless UI, and other stateful primitives.
• Keeps class names predictable instead of string-building in JS.

17. print:hidden optimizes outputs for PDFs

Tailwind’s print: variant is ideal for hiding chrome or color-heavy sections when exporting.

<header class="flex items-center justify-between border-b border-slate-200 py-6 print:hidden">
  <h1 class="text-xl font-semibold text-slate-900">Quarterly Metrics</h1>
  <button class="rounded-full bg-slate-900 px-4 py-2 text-sm text-white">Share</button>
</header>

• Strips navigation from exported reports without a second stylesheet.
• Pair with print:text-black to keep typography legible on paper.

18. backface-hidden cleans up 3D flips

When using rotate transforms, backface-hidden prevents mirrored ghosts from showing.

<div class="group perspective-[1200px]">
  <div class="relative h-64 w-full rounded-3xl border border-slate-200 transition duration-500 preserve-3d group-hover:rotate-y-180">
    <div class="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-3xl bg-slate-900 text-white backface-hidden">
      Front of card
    </div>
    <div class="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-3xl bg-white text-slate-700 backface-hidden rotate-y-180">
      Back of card
    </div>
  </div>
</div>

• Essential for credit-card flips, login reveals, and gamified UI.
• Works with preserve-3d and Tailwind’s native rotate utilities.

19. underline-offset-[6px] fine-tunes link emphasis

Arbitrary underline offsets create editorial-quality text treatments.

<a class="text-lg font-semibold text-slate-900 underline decoration-indigo-500 underline-offset-[6px] hover:decoration-2" href="#">
  Read the product playbook
</a>

• Helps hero links read like premium magazine layouts.
• Combine with decoration-wavy or custom colors for branded accents.

20. shadow-[inset_0_0_0_1px_theme(colors.indigo.500)] paints custom outlines

Leverage Tailwind’s theme helper inside arbitrary values for lightweight focus styles.

<button
  class="rounded-full bg-slate-900 px-5 py-3 text-sm font-medium text-white transition hover:bg-slate-800 focus:shadow-[inset_0_0_0_1px_theme(colors.indigo.500)] focus:outline-none"
>
  Schedule demo
</button>

• Lets you tap Tailwind’s color tokens inside bespoke effects.
• Keeps focus treatments consistent without authoring new CSS variables.

21. aspect-* keeps media perfectly proportional

aspect-video, aspect-square, and arbitrary values like aspect-[4/3] lock responsive media to precise ratios.

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Product walkthrough"
  class="w-full aspect-video rounded-3xl md:aspect-square"
  loading="lazy"
  allowfullscreen
></iframe>

• Stops thumbnails and embeds from stretching when the viewport changes.
• Supports custom ratios without wrapper divs thanks to Tailwind’s arbitrary value syntax.

22. line-clamp-* and truncate deliver elegant overflow

Clamp multi-line text with a single utility or fall back to truncate for one-liners.

<p class="line-clamp-3 text-sm text-slate-600 md:line-clamp-none">
  This summary collapses to three lines on mobile and expands to full copy on desktop.
</p>

• line-clamp-3 adds an ellipsis after the third line—no custom CSS needed.
• truncate handles single-line overflow with text-ellipsis and whitespace-nowrap baked in.

23. before: / after: pseudo-elements without extra spans

Tailwind auto-injects empty content for before: and after:, so you can decorate components with zero additional markup.

<label class="text-sm font-medium text-slate-700 after:ml-1 after:text-rose-500 after:content-['*']">
  Email
</label>

• Ideal for required field asterisks, callout arrows, or subtle badges.
• Arbitrary content values (after:content-['→']) keep the syntax tidy and expressive.

24. first-letter: and first-line: add editorial polish

Mix drop caps and stylized first lines for magazine-quality typography.

<p
  class="first-letter:float-left first-letter:mr-3 first-letter:text-5xl first-letter:font-semibold first-letter:text-slate-900 first-line:tracking-[0.3em] first-line:uppercase text-pretty text-slate-700"
>
  Tailwind CSS lets you design narrative-heavy layouts without leaving HTML.
</p>

• first-letter: handles drop caps and ornamental initials in one pass.
• first-line: tweaks the opening sentence for dramatic emphasis or small caps.

25. focus-within: highlights active clusters

Apply focus-within: to wrap multiple inputs and surface which block currently owns focus.

<div class="rounded-3xl border border-slate-200 p-5 transition focus-within:border-indigo-500 focus-within:shadow-lg">
  <label class="text-sm font-medium text-slate-600">Workspace name</label>
  <input class="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-indigo-500 focus:outline-none" />
</div>

• More accessible than ad-hoc JS focus handlers because it respects keyboard navigation.
• Plays nicely with group-focus-within: for nested, multi-field widgets.

26. Outline utilities (outline-*) craft accessible focus rings

Control outline style, color, width, and offset directly in class names.

<button
  class="rounded-full bg-slate-900 px-5 py-3 text-sm font-medium text-white outline-2 outline-indigo-400 outline-offset-2 focus-visible:outline-4 focus-visible:outline-emerald-500"
>
  Continue
</button>

• outline-offset separates the ring from the element for high-contrast focus states.
• Combine with focus-visible: to show outlines only for keyboard users while keeping accessibility intact.

27. indent-* shapes long-form reading experiences

Use indent utilities to create classic book-style first-line offsets or hanging indents.

<article class="space-y-6 text-slate-700">
  <p class="indent-8">It was a bright cold day in April, and the clocks were striking thirteen…</p>
  <p class="-indent-6 pl-6">Hanging indents are just as easy for bibliographies or legal citations.</p>
</article>

• Avoids stuffing   characters or extra spans into prose-heavy pages.
• Supports arbitrary values like indent-[3ch] when the design system calls for custom measurements.

28. Break control utilities keep layout intact

Mix break-all, break-normal, and whitespace helpers to tame unruly strings and maintain readability.

<div class="w-64 rounded-2xl border border-slate-200 p-4">
  <p class="break-all text-sm text-slate-600">
    https://cdn.lexington.dev/releases/super-long-file-name-that-would-otherwise-overflow
  </p>
</div>

• break-all prevents hash IDs or URLs from blasting through narrow columns.
• whitespace-pre-wrap and whitespace-nowrap give you fine-grained control over poem-like layouts or button labels.

29. transform-gpu smooths animated components

Promote elements to the GPU when hover or scroll animations feel jittery.

<div class="transform-gpu rounded-3xl border border-slate-200 bg-white p-8 transition duration-500 hover:-translate-y-2 hover:rotate-1 hover:shadow-2xl">
  GPU-accelerated hover card
</div>

• Swaps translate for translate3d under the hood, unlocking hardware acceleration.
• Toggle transform-cpu if you ever need to opt back out for debugging.

30. flow-root contains floats and collapsing margins

flow-root establishes a new block formatting context, replacing clearfix hacks.

<div class="flow-root rounded-3xl border border-slate-200 bg-slate-50 p-6">
  <img src="/team/avatar.png" alt="Avery" class="float-left mr-4 mb-2 size-16 rounded-full" />
  <p class="text-sm text-slate-600">Wrap text around floated media without the parent collapsing or margins bleeding through.</p>
</div>

• Ensures float-heavy marketing copy doesn’t clip or overlap siblings.
• Also prevents unexpected parent/child margin collapse when stacking headings and paragraphs.

31. will-change-* preps the browser for heavy animation

Hint the rendering engine before intensive interactions with will-change-scroll, will-change-transform, or custom values.

<section class="overflow-x-auto will-change-scroll md:will-change-auto">
  <!-- Horizontally scrolling roadmap cards -->
</section>

• Reduces jank when a container is about to animate or scroll rapidly.
• Reset with will-change-auto after the motion completes so the browser can reclaim resources.

32. contrast-more: / contrast-less: honor system preferences

Tailor color, opacity, and borders to match the user’s contrast setting.

<p class="text-slate-500 opacity-75 contrast-more:opacity-100 contrast-more:text-slate-700 contrast-less:opacity-60">
  Body copy adapts consistently to high- and low-contrast environments.
</p>

• Improves accessibility without maintaining a separate stylesheet.
• Works alongside other media-query variants (dark:, print:) for holistic design control.

33. Vertical alignment helpers keep inline UI balanced

Utilities like align-middle, align-top, and align-text-bottom align inline or inline-block elements with surrounding text.

<span class="inline-flex items-center gap-2 text-sm text-slate-700">
  <img src="/icons/spark.svg" alt="" class="h-4 w-4 align-middle" />
  <span class="align-middle">Aligned icon label</span>
</span>

• Prevents badges, icons, and metrics from looking off-kilter next to typography.
• Use align-[super] or other arbitrary values when you need bespoke placements.

34. Conic and radial gradients with bg-conic / bg-radial

Tailwind v4 includes utilities for conic and radial gradients that respect your color tokens.

<div class="flex gap-6">
  <div class="size-24 rounded-full bg-conic from-violet-600 via-indigo-200 to-violet-600"></div>
  <div class="size-24 rounded-full bg-radial-[at_50%_75%] from-sky-400 via-cyan-200 to-transparent"></div>
</div>

• Produce editorial flourishes, progress dials, or hero backdrops without custom CSS gradients.
• Supports angle and position modifiers for precise artistic direction.

35. Custom list markers via list-image-[url(...)]

Swap default bullets for icons or illustrations using Tailwind’s arbitrary list image utility.

<ul class="list-inside list-image-[url('/icons/check.svg')] space-y-2 text-sm text-slate-700">
  <li>Tailored list styling without extra markup</li>
  <li>Screen readers retain semantic list structure</li>
</ul>

• Pair with list-outside or list-inside to control marker placement.
• Revert with list-image-none on breakpoints where imagery might clutter mobile views.

36. Table helpers refine data-heavy layouts

Combine table-fixed, border-separate, and caption-bottom to make plain HTML tables feel intentional.

<table class="table-fixed w-full border-separate border-spacing-2 rounded-3xl border border-slate-200 text-sm text-slate-600">
  <caption class="caption-bottom text-xs text-slate-400">Quarterly metrics</caption>
  <thead>
    <tr class="text-left text-slate-500">
      <th class="px-4 py-3">Team</th>
      <th class="px-4 py-3">MRR</th>
      <th class="px-4 py-3">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rounded-l-2xl bg-white px-4 py-3">Design</td>
      <td class="bg-white px-4 py-3">$48k</td>
      <td class="rounded-r-2xl bg-white px-4 py-3">12%</td>
    </tr>
  </tbody>
</table>

• table-fixed enforces predictable column widths, great for dashboards.
• border-spacing-* introduces cell breathing room without authoring custom selectors.
• Swap caption-bottom for caption-top (or mix in print:caption-bottom) when reports need different layouts on paper.

37. transition-discrete animates show/hide states gracefully

Enable discrete property transitions so visibility toggles fade instead of snapping.

<div class="transition duration-300 transition-discrete data-[state=open]:opacity-100 opacity-0">
  Modal backdrop that fades in when data-state="open"
</div>

• Plays nicely with attribute-driven state machines (data-, open, aria-*).
• Keeps your animation stack consistent even for properties that normally jump between values.

38. any-pointer-* captures hybrid input devices

Go beyond pointer-coarse by styling components when any attached device meets a criterion.

<div class="pointer-coarse:p-4 any-pointer-coarse:scroll-pt-16">
  Hybrid laptop users still get touch-friendly affordances.
</div>

• Ensures 2-in-1 laptops and tablets with keyboards receive appropriate spacing.
• Combine with any-hover:none to disable hover-only affordances when touch is involved.

39. open: and noscript: cover progressive enhancement states

Style native disclosure elements and no-JavaScript fallbacks directly in markup.

<details class="rounded-2xl border border-slate-200 p-4 open:bg-indigo-50 open:text-indigo-600">
  <summary class="cursor-pointer text-sm font-medium">Security checklist</summary>
  <p class="mt-3 text-sm text-slate-600">Use open: variants to highlight expanded content.</p>
</details>

<div class="hidden noscript:flex noscript:items-center noscript:gap-3 noscript:rounded-2xl noscript:border noscript:border-amber-400 noscript:bg-amber-50 noscript:px-4 noscript:py-3">
  <span class="text-sm font-medium text-amber-700">Enable JavaScript for full functionality.</span>
</div>

• open: reacts to HTML attributes on <details> and <dialog> without extra scripts.
• noscript: provides graceful messaging when scripting is unavailable, improving trust and clarity.

40. break-keep protects CJK typography

break-keep maps to word-break: keep-all, preventing browsers from splitting East Asian characters at awkward points.

<p class="break-keep text-sm text-slate-700">
  数据可视化的重要性不可低估，在现代商业中保持数据清晰至关重要。
</p>

• Keeps Chinese, Japanese, and Korean sentences readable inside narrow columns.
• Mix with hyphens-auto for multilingual paragraphs that blend Latin and CJK scripts gracefully.

41. OpenType numeric variants polish data tables

Toggle advanced font features—tabular-nums, oldstyle-nums, slashed-zero, ordinal, and more—without custom CSS.

<div class="space-y-3 text-sm text-slate-700">
  <p class="tabular-nums">Revenue this quarter …… $123 456.78</p>
  <p class="oldstyle-nums">Historical baseline ……  98 765.43</p>
  <p class="ordinal slashed-zero">Ranked 1st with model ID A0Z-42</p>
</div>

• tabular-nums aligns digits for financial dashboards while proportional-nums keeps prose elegant.
• ordinal, diagonal-fractions, and slashed-zero unlock typographic finesse when the font supports those glyphs.

Tailwind CSS v4 keeps rewarding teams who explore beyond the default examples. Layer these utilities on top of the first collection, document them in your design system, and you’ll keep shipping interfaces that feel purposeful without resorting to hand-written CSS.