Cool Things in Tailwind CSS v4

The new Tailwind CSS v4 brings a lot of powerful new features and improvements that streamline web development, boost performance, and simplify configuration. Here are some of the cool things that I think are worth mentioning.

Better Performance

Tailwind CSS 4.0 introduces the new Oxide engine, a Rust-powered build engine that supercharges your development workflow. Benchmarks reveal:

• 3.5x faster full builds
• Up to 182x faster incremental rebuilds

What does this mean? For large projects, these performance improvements mean spending significantly less time waiting for CSS to compile.

Simplified Setup and Configuration

Tailwind CSS v4 has reimagined the setup process to reduce the number of steps and configuration files.

Easy Setup

1. Install Tailwind CSS:

   npm i tailwindcss @tailwindcss/postcss;
   

2. Add the PostCSS plugin:

   postcss.config.js

   export default {
     plugins: ["@tailwindcss/postcss"],
   };
   

   Previously, you might have needed to configure an additional plugin like postcss-import to inline other CSS files using @import. Now, Tailwind CSS v4 handles this automatically.

3. Import Tailwind CSS in your CSS file:

   global.css

   @import "tailwindcss";
   

   Simply add the import statement to your CSS file, and done! You're ready to build without worrying about configuring template paths.

Automatic Content Detection

Tailwind CSS 4.0 uses smart heuristics to automatically detect template files:

• Excludes common directories such as node_modules and generated or binary files (images, videos, etc.).
• Supports custom sources: Use the @source directive to import additional CSS files if needed.

@import "tailwindcss";

@source "../node_modules/@my-ui-library/dist/styles.css";

This eliminates the need to manually set up content paths, streamlining your configuration.

CSS-First Configuration

Tailwind CSS v4 embraces a CSS-first approach, letting you configure your design directly in your CSS file without relying on a separate tailwind.config.js file.

Benefits?

• Simplified Project Structure: Fewer configuration files mean a cleaner project!
• Unified Styling: Keep all styling in one place. Only CSS file.
• Modern CSS Features: Leverage CSS variables and native capabilities.

Configuring with CSS

No more need for tailwind.config.js file!

Instead of a tailwind.config.js file, you can configure all of your customizations directly in the CSS file where you import Tailwind, giving you one less file to worry about in your project.

Importing Styles

You can import other CSS files using the @import directive. Add your custom styles to the CSS file where you import Tailwind.

@import "tailwindcss";

@import "./my-custom-styles.css";

Customizing the Theme with @theme

Tailwind CSS v4 makes all your design tokens available as CSS variables. Use the @theme directive to define your design tokens and let Tailwind generate corresponding utility classes.

@theme {
  --font-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);

  --radius-card: 12px;

  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... additional tokens ... */
}

Use your custom theme in HTML like this:

<div class="bg-avocado-100 3xl:bg-avocado-200 rounded-card">
  <h1 class="font-display text-avocado-600">Hello, world!</h1>
</div>

Enhanced Utility Classes and Variants

Tailwind CSS v4 introduces several new utility classes and improvements that simplify development and enhance design flexibility.

Dynamic Utility Values

You can now use arbitrary values directly in your HTML without predefining them in your configuration:

<div class="mt-29 pr-15">
  <!-- ... -->
</div>

This means you can apply custom spacing values on the fly without additional configuration.

Opacity Modifiers

Tailwind CSS v4 allows you to combine color utilities with opacity modifiers directly:

<div class="bg-black/50 text-blue-500/50">
  <!-- ... -->
</div>

Apply opacity modifiers for various CSS properties such as:

• Background (bg-black/50)
• Text (text-black/50)
• Border, divide, ring, and placeholder opacities in a similar fashion

More New Utilities and Variants

• 3D Transforms: Rotate and translate elements in 3D with classes like rotate-x-45 or translate-z-12.
• not-* Variant: Conditionally apply styles with variants like not-hover:opacity-75.
• Conic and Radial Gradients: Create advanced backgrounds like pie charts and color wheels using utilities such as bg-conic- and bg-radial-.

And many more enhancements to improve both creativity and productivity.

References and Useful Links

• Tailwind CSS v4.0 Release Blog Post
• Tailwind CSS v4.0 Upgrade Guide
• Tailwind CSS v4 Theme variables
• Tailwind CSS 4.0 Is Here: What’s New and Why It Matters
• Tailwind CSS 4.0: Everything you need to know in one place