This content originally appeared on DEV Community and was authored by Joodi
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:
- Installation:
npm install tailwindcss @tailwindcss/postcss
- PostCSS Plugin:
// 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
contentarray.
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>
- Data Attribute Variants:
<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:
- Install Tailwind CSS:
npm install tailwindcss @tailwindcss/postcss
- Configure PostCSS:
// postcss.config.js
export default {
plugins: ["@tailwindcss/postcss"],
};
- Import Tailwind in Your CSS:
/* styles.css */
@import "tailwindcss";
- 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
This content originally appeared on DEV Community and was authored by Joodi
Joodi | Sciencx (2025-01-24T00:10:17+00:00) Tailwind CSS v4.0: New Features and Enhancements. Retrieved from https://www.scien.cx/2025/01/24/tailwind-css-v4-0-new-features-and-enhancements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.