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

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (1)

Collapse
 
cesilcarus profile image
Cesar Carranza

Cool theme you are using vscode for taking the screenshoot

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay