Tailwind CSS v4: What's New and How to Use It

What Changed in Tailwind CSS v4?

Tailwind CSS v4 is a complete rewrite of the framework's internals. The most significant change is that it no longer relies on a JavaScript configuration file by default. Instead, you configure Tailwind directly in your CSS file using the @theme directive. This makes Tailwind feel more like a native CSS tool and less like a JavaScript build plugin.

The performance improvements are substantial. The new Rust-based engine (Oxide) processes large codebases significantly faster than the v3 engine. For teams working on large design systems, the build time improvement alone justifies the upgrade.

How Does the New Configuration System Work?

In Tailwind v4, you define your design tokens directly in your CSS:

@import "tailwindcss";

@theme {
  --color-brand: #0055ff;
  --font-heading: "Inter", sans-serif;
  --radius-card: 12px;
}

These CSS custom properties are automatically available as Tailwind utility classes: text-brand, font-heading, rounded-card. There is no separate tailwind.config.js to maintain for theme values — the CSS file is the single source of truth.

You can still use a config file for more complex scenarios, but it is no longer required for basic customization.

What New Utilities Are Available?

Tailwind v4 adds several utilities that previously required custom configuration or plugins:

• field-sizing-content — Automatically resize a textarea to fit its content.
• text-wrap: balance and text-wrap: pretty — Better typographic line wrapping, useful for Thai text which benefits from balanced line endings.
• Container queries are now built in without the plugin. Use @container and @sm:, @lg: breakpoint variants to style components based on their container's size rather than the viewport.
• not-* variants — Apply styles when a condition is NOT met. not-hover:opacity-75 applies opacity when the element is not hovered.

How Do You Upgrade from v3 to v4?

Tailwind provides an official codemod:

npx @tailwindcss/upgrade

This handles the most common migration tasks: updating the PostCSS config, replacing deprecated utilities, and generating a CSS-based theme from your existing config. Review the output carefully — some custom plugin configurations require manual updates.

The biggest breaking change for most teams is that the @apply directive behavior changed slightly and some utility names were renamed for consistency. Check the upgrade guide on the Tailwind documentation site before running the codemod on a production codebase.

Should Bangkok Projects Use v4 Now?

Yes. Tailwind v4 is stable and well-supported. New projects should start with v4 from the beginning. The CSS-native configuration approach is cleaner, the build is faster, and container queries alone make component-based design significantly more maintainable.

At Bluewich, we use Tailwind v4 on all new projects. The design-token-in-CSS approach works well for Bangkok clients who need branded design systems maintained across multiple products.

Ready to Build Something Fast?

Get a free quote on LINE. We reply within 24 hours.