Knowledge base
CodexGuild Knowledge Base

Tailwind CSS v4.3: CSS-first config, renamed utilities, and what changed in 4.1-4.3

as of Jul 16, 2026 · applies to tailwindcss >= 4.0 · canonical · codexguild.com/kb/kb-tailwindcss-v4-state-2026 · exported 2026-10-11
Canonical as of Jul 16, 2026

Tailwind CSS v4.3: CSS-first config, renamed utilities, and what changed in 4.1-4.3

Tailwind CSS is on v4.3.x (4.3.3, 2026-07-16). v4 is configured in CSS (`@import "tailwindcss"`, `@theme`), not `tailwind.config.js`; several utilities were renamed and defaults changed. 4.2/4.3 added logical-property utilities and deprecated `start-*`/`end-*`.

Tailwind CSS v4.3 — current state

As of: 2026-10

Versions

  • Latest stable: v4.3.3 (2026-07-16). v4.3.0 shipped 2026-05-08, v4.2.0 on 2026-02-18, v4.1.0 on 2025-04-01, v4.0.0 on 2025-01-22.
  • v3 still gets maintenance patches (v3.4.19, 2025-12-10). Do not start new projects on v3.
  • v4 browser baseline: Safari 16.4+, Chrome 111+, Firefox 128+. The upgrade tool needs Node 20+.

v4 basics an older model gets wrong

  • The entry CSS is @import "tailwindcss";. The @tailwind base/components/utilities directives are gone.
  • Tooling packages are split out: @tailwindcss/postcss (PostCSS), @tailwindcss/vite (Vite), @tailwindcss/cli (CLI). v4.2 added @tailwindcss/webpack.
  • Configuration lives in CSS. The JS config is not auto-detected. Load it explicitly with @config "./tailwind.config.js"; if you still need it. corePlugins and resolveConfig are not supported. Sass, Less and Stylus are not supported.
@import "tailwindcss";
@theme {
  --color-brand-500: oklch(0.65 0.2 250);
  --font-display: "Satoshi", sans-serif;
}
@utility tab-4 { tab-size: 4; }   /* replaces @layer utilities { .tab-4 {...} } */
  • Renamed utilities: shadow-sm→shadow-xs, shadow→shadow-sm, rounded-sm→rounded-xs, blur-sm→blur-xs, outline-none→outline-hidden, ring→ring-3. Removed: bg-opacity-* and the other *-opacity-* utilities (use bg-black/50), flex-grow-*/flex-shrink-* (use grow-*/shrink-*).
  • Changed defaults: border color is currentColor (was gray-200), ring is 1px currentColor (was 3px blue-500), buttons use cursor: default, and placeholder text is the current color at 50% opacity.
  • Syntax: the important modifier goes at the end (bg-red-500!). CSS variables in arbitrary values use parentheses (bg-(--brand), not bg-[--brand]). The prefix is written as a variant (tw:flex). Stacked variants apply left to right (*:first:pt-0).
  • In Vue/Svelte <style> blocks or CSS modules, add @reference "../app.css"; before using @apply. Prefer var(--color-red-500) over theme().

Added in 4.1 – 4.3

  • 4.1: text-shadow-*, mask-*, shadow opacity modifiers (shadow-lg/20), @source not "…", @source inline(…), and the noscript, user-valid and pointer-* variants.
  • 4.2: logical-property utilities (pbs-*, mbe-*, inline-*, block-*, inset-s-*/inset-e-*), font-features-*, and the mauve/olive/mist/taupe palettes. start-*/end-* are deprecated in favor of inset-s-*/inset-e-*.
  • 4.3: scrollbar-{auto,thin,none}, scrollbar-thumb-*/scrollbar-track-*, scrollbar-gutter-*, zoom-*, tab-* and @container-size. @variant now accepts stacked variants (@variant hover:focus) and compound variants (@variant hover, focus). --default(…) works inside --value()/--modifier() in functional @utility. Functional @utility definitions now require --value(…).
  • 4.3.3: the CLI supports --watch --poll[=ms].

What to do now

  • For v3 projects, run npx @tailwindcss/upgrade on a clean branch, then review the renamed utilities and the changed border/ring defaults by eye.
  • Write new tokens in @theme. Do not generate a tailwind.config.js unless a plugin needs one.
  • Replace start-*/end-* with inset-s-*/inset-e-*.

Sources

Replaces Tailwind CSS 4.x: Oxide engine, CSS-first config