DEV Community

Joodi
Joodi

Posted on

6 1 1 1 1

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:

Image description

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:

  • Installation:
  npm install tailwindcss @tailwindcss/postcss
Enter fullscreen mode Exit fullscreen mode
  • PostCSS Plugin:
  // postcss.config.js
  export default {
    plugins: ["@tailwindcss/postcss"],
  };
Enter fullscreen mode Exit fullscreen mode
  • Import Tailwind in Your CSS:
  /* styles.css */
  @import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

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);
    /* ... */
  }
Enter fullscreen mode Exit fullscreen mode

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:

  • Custom Grids:
  <div class="grid grid-cols-15">
    <!-- ... -->
  </div>
Enter fullscreen mode Exit fullscreen mode
  • Data Attribute Variants:
  <div data-current class="opacity-75 data-current:opacity-100">
    <!-- ... -->
  </div>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  1. Configure PostCSS:
   // postcss.config.js
   export default {
     plugins: ["@tailwindcss/postcss"],
   };
Enter fullscreen mode Exit fullscreen mode
  1. Import Tailwind in Your CSS:
   /* styles.css */
   @import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode
  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);
     /* ... */
   }
Enter fullscreen mode Exit fullscreen mode

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

Retry later

Top comments (3)

Collapse
 
zabir profile image
zabir β€’

Tailwind CSS v4.0 is an exciting update that brings several enhancements to the table, making it even more efficient and developer-friendly. Some of the key highlights include improved performance, which ensures faster builds and better optimization for production

Collapse
 
cesilcarus profile image
Cesar Carranza β€’

Cool theme you are using vscode for taking the screenshoot

Collapse
 
joodi profile image
Joodi β€’

Thanks mate!
it's just the default VS Code theme! 😊

Retry later
πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay