Tailwind CSS in 2026: Classes Worth Adding to Your Muscle Memory

Tailwind v4 has shipped a lot since v2 and v3 days. Here's the new and underused classes from v4.0 through v4.3 worth knowing, with actual JSX examples.

Tailwind CSS in 2026: Classes Worth Adding to Your Muscle Memory

If you wrote your Tailwind habits in the v2 or v3 days, you probably still type things like border-b last:border-b-0 on autopilot. It works. But Tailwind v4 has shipped a lot since then, and plenty of it replaces patterns we all repeat in React components every week.

As of October 2026, the latest release is v4.3.3 (16 July 2026). This guide walks through the new and underused classes from v4.0 through v4.3 that are worth knowing, with the JSX you would actually write.

1. Row dividers: The pattern you already know, upgraded

The classic list-divider pattern:

jsx
<li className="border-b last:border-b-0 py-3">...</li>

The place this comes up most in React is when you're mapping over an array:

jsx
<ul>
  {items.map((item) => (
    <li key={item.id} className="border-b last:border-b-0 py-3">
      {item.name}
    </li>
  ))}
</ul>

You don't need an index check. last: is the CSS :last-child pseudo-class, so the browser handles it. The same list with v4 options:

jsx
// Option 1: Using not-last variant (v4 new)
<li key={item.id} className="not-last:border-b py-3">...</li>

// Option 2: Using divide-y on parent (cleaner for simple lists)
<ul className="divide-y">
  {items.map((item) => (
    <li key={item.id} className="py-3">{item.name}</li>
  ))}
</ul>

divide-y vs last:border-b-0? For plain mapped lists, divide-y is usually better. You put it once on the parent, items need no border classes, and it adds borders between items without touching first or last.

Use divide-y when:

• Every row looks the same
• You want the divider colour set in one place (divide-gray-200)
• You render extra rows like "Load more" inside the same container

Use border-b last:border-b-0 on the item when:

• Rows differ (selected/highlighted need different borders)
• The item is a reusable component that carries its own divider
• Each item needs its own border colour or width

Pro tip: border border-b is redundant. border puts a 1px border on all four sides, so border-b adds nothing. Use border-b alone.

2. Text shadows (v4.1)

Browsers have supported text-shadow for twenty years and Tailwind finally has it. Utilities are text-shadow-*, with colour via text-shadow-<color>, and opacity modifiers work too.

jsx
<h1 className="text-white text-shadow-lg text-shadow-black/30">Hero heading</h1>

Useful for text over images, where you'd previously reach for an arbitrary value or custom CSS.

3. Masks (v4.1)

The mask-* utilities let you fade or clip elements with gradients, using the same from-* style API. Examples: mask-t-from-50% and mask-r-from-30%.

Classic use: fading the edge of a scrollable list so content doesn't hard-cut at the boundary:

jsx
<div className="max-h-64 overflow-y-auto mask-b-from-50%">
  {/* Content fades out at the bottom */}
</div>

4. Alignment and text-wrapping upgrades (v4.1)

• items-baseline-last and self-baseline-last align flex/grid items to the baseline of the last line of text. Great for cards where a label sits next to multi-line content.
• Safe alignment utilities change alignment to start when overflow begins, so content only overflows in one direction.
• New overflow-wrap utilities (wrap-break-word, wrap-anywhere) control how long strings wrap. Handy for user-generated text, long URLs, or uncontrolled content.

5. v4.0 classes still underused

• size-* sets width and height together: size-10 replaces w-10 h-10
• field-sizing-content makes a textarea grow with its content, no JavaScript
• bg-radial-* and bg-conic-* extend gradients, working with from-*, via-*, to-*
• inset-shadow-* and inset-ring-* stack multiple shadow layers on one element
• color-scheme utilities eliminate light scrollbars and form controls in dark mode
• in-* works like group-* without needing group class on the parent
• nth-* and inert variants arrived too
• 3D transform utilities for tilt and rotate in 3D directly in markup

6. Logical properties everywhere (v4.2)

v4.2 added logical-property utilities for RTL and vertical layouts:

• pbs-* and pbe-* for padding-block-start/end
• mbs-* and mbe-* for margin-block-start/end
• inline-*, min-inline-*, max-inline-* for inline-size
• block-*, min-block-*, max-block-* for block-size
• inset-s-*, inset-e-*, inset-bs-*, inset-be-* for logical inset

Important: start-* and end-* are deprecated in favour of inset-s-* and inset-e-*. They still work, but plan to migrate.

Also new in v4.2: four default colour palettes (mauve, olive, mist, taupe), font-features-* for OpenType features, and an official @tailwindcss/webpack plugin.

7. Scrollbars, zoom and more (v4.3)

The headline of v4.3 is first-party scrollbar styling, which used to mean a plugin or custom CSS.

jsx
<div className="overflow-y-auto scrollbar-thin scrollbar-thumb-slate-400 scrollbar-track-transparent">
  {/* Custom scrollbar */}
</div>

Scrollbar utilities:

• scrollbar-auto, scrollbar-thin, scrollbar-none map to scrollbar-width
• scrollbar-thumb-* and scrollbar-track-* set colours
• scrollbar-gutter-* reserves space so layout doesn't jump when scrollbar appears
• zoom-* exposes the CSS zoom property
• tab-* controls tab size in preformatted text (useful for code blocks)
• @container-size is a new container utility

For custom utilities: @variant now accepts stacked (hover:focus) and compound (hover, focus) variants, and @utility supports functional definitions with --default(...).

Small patch releases worth knowing

• v4.3.1: m-0 now outputs 0 instead of calc(var(--spacing) * 0) — smaller, cleaner output
• v4.3.2: Added bare spacing for auto-rows-* and auto-cols-*, so auto-rows-12 and auto-cols-16 work
• v4.3.3: --watch mode supports --poll, fixed fractional opacity on named shadows like shadow-sm/12.5

Quick reference cheat sheet

Wrapping up

You don't need to rewrite your codebase. But the next time you reach for a divider hack, custom scrollbar, or arbitrary value, check whether v4 already has a class for it. The upgrade tool and editor hints will nudge you toward the shorter forms.

The best part? Most of these are zero-configuration and work immediately with Tailwind v4. Start with the ones you use most often (dividers, scrollbars, shadows) and build from there.

Related Articles