Tailwind CSS v4.0: New Features and Enhancements

Tailwind CSS v4.0 introduces several significant updates that enhance performance, simplify configuration, and offer new features for developers. Here’s an overview of the key changes:

1. High-Performance Engine

Tailwind CSS v4.0 has undergone a complete rewrite, resulting in:

• Faster Builds: Full rebuilds are over 3.5 times faster, and incremental builds are over 8 times faster.

• Reduced Bundle Size: The size of the installed package has decreased by more than 35%.

2. Simplified Installation

Setting up Tailwind CSS v4.0 is now more straightforward:

  npm install tailwindcss @tailwindcss/postcss

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

• Import Tailwind in Your CSS:

  /* styles.css */
  @import "tailwindcss";

This approach eliminates the need for @tailwind directives and external plugins.

3. CSS-First Configuration

Tailwind CSS v4.0 shifts configuration from JavaScript to CSS:

• Define Customizations in CSS:

  /* styles.css */
  @import "tailwindcss";

  @theme {
    --font-display: "Satoshi", "sans-serif";
    --breakpoint-3xl: 1920px;
    --color-avocado-100: oklch(0.99 0 0);
    /* ... */
  }

This method streamlines the configuration process and integrates seamlessly with your stylesheets.

4. Automatic Content Detection

Tailwind CSS v4.0 automatically detects content sources:

• No Need for Manual Configuration: Tailwind scans your project to identify template files, eliminating the need to manually configure the content array.

5. Modernized Color Palette

The default color palette has been updated to use the oklch color model:

• Enhanced Color Vividness: This change provides a wider color gamut, resulting in more vivid and accurate colors.

6. Dynamic Utility Values and Variants

Tailwind CSS v4.0 introduces dynamic utility values and variants:

  <div class="grid grid-cols-15">
    <!-- ... -->
  </div>

  <div data-current class="opacity-75 data-current:opacity-100">
    <!-- ... -->
  </div>

These features allow for more flexible and dynamic styling without additional configuration.

Integrating Tailwind CSS v4.0 with Next.js

Integrating Tailwind CSS v4.0 into a Next.js project is straightforward:

1. Install Tailwind CSS:

   npm install tailwindcss @tailwindcss/postcss

1. Configure PostCSS:

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

1. Import Tailwind in Your CSS:

   /* styles.css */
   @import "tailwindcss";

1. Define Customizations in CSS:

   /* styles.css */
   @import "tailwindcss";

   @theme {
     --font-display: "Satoshi", "sans-serif";
     --breakpoint-3xl: 1920px;
     --color-avocado-100: oklch(0.99 0 0);
     /* ... */
   }

This setup simplifies the integration process and reduces the need for additional configuration files.

For a visual demonstration and further insights, you can watch the following video:

Tailwind CSS V4 For NextJS, Astro, and Vite TODAY