Tailwind CSS v4: What's New & How to Use It

Last week, I was all set to build an exciting new project. I had my tutorial open, my Vite project ready, and my "I’ve done this a hundred times" confidence at an all-time high.

Then… “npm ERR! could not determine executable to run”. A weird error. One I had never seen before.

I retraced my steps, checked my commands, googled frantically, stared at my screen like it owed me money… nothing. Hours passed, frustration set in, and just when I was about to question everything I knew, I finally did what I should have done earlier—I checked the documentation.

And that’s when it hit me.

TAILWIND CSS HAS BEEN UPDATED!

The thing about this update is that it is not just a minor one; it is a major overhaul with significant updates and possible breaking changes compared to previous versions.

Instead of just small tweaks or bug fixes, it has been reworked to be faster, more flexible, and to take advantage of new web technologies. Basically, it’s a fresh, improved version rather than just an incremental update.

What’s better about Tailwind CSS V4?

1. Faster Compilation

Tailwind v4 compiles styles at record speed, making your development process smoother than ever. With a new high-performance engine, full builds are up to 5x faster, while incremental builds are 100x faster—measured in microseconds.

2. Simpler Installation, Less Hassle

Unlike previous versions, Tailwind v4 eliminates unnecessary configurations—you no longer need to manually configure tailwind.config.js or deal with PostCSS setups.

3. CSS-First Configuration

Tailwind v4 embraces a CSS-first approach, meaning you can now define all your custom styles directly in your CSS file instead of maintaining a separate tailwind.config.js file. This reduces project complexity and improves by keeping styles and configurations together.

In short, Tailwind v4 is leaner, meaner, and built to make your life as a developer easier.

Setting up Tailwindcss V4.0 in a React + Vite project

Before You Begin

Before you dive in, make sure you have Node.js and npm (or Yarn/Pnpm) installed on your system. You can check by running:

node -v
npm -v

If you don’t have them installed, download the latest version of Node.js from Nodejs website, which includes npm by default.

Other Prerequisites

• A code editor like VS Code

• A terminal (VS Code terminal, Command Prompt, Git Bash, or any other)

• Basic knowledge of React and ViteCreate React + Vite project

1. Create a React + Vite Project

npm create vite@latest my-react-app -- --template react

Make your way into your project folder and install node modules:

cd my-react-app
npm install

2. Install Tailwind CSS and tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

3. Configure your vite

Edit your vite.config.js file:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

4. Import Tailwind in Your Global CSS

Add this to your main CSS file (e.g., index.css or global.css):

@import "tailwindcss";

5. Run your project

Run your build processes by using npm run dev or whatever command is configured in your package.json file

npm run dev

Configuring custom CSS styles

1. Prefixes in Tailwind CSS v4

If you want to add a custom prefix (e.g., tw), you can define it in your CSS:

@import "tailwindcss" prefix(tw);

✅ Example Usage:

<div class="tw:bg-blue-500 tw:text-white tw:p-4">
  This uses a custom prefix "tw"
</div>

2. Defining Custom Breakpoints

Tailwind v4 allows defining breakpoints directly in CSS:

@import "tailwindcss";

@theme {
    --breakpoint-*: initial; /*To make sure that these breakpoints replace all default breakpoints*/
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

✅ Example Usage:

<div class="text-base md:text-lg lg:text-xl">
  Responsive text size!
</div>

3. Adding custom colors and fonts

@import "tailwindcss";

@theme {
    --color-zinc: #101010;
    --color-gray-100: #86868b;
    --font-poppins: Poppins, sans-serif;
}

✅ Example Usage:

<button class="bg-zinc text-gray-100 p-2 font-poppins">Click Me</button>

4. Using Plugins (e.g., DaisyUI)

Tailwind v4 supports plugin configuration directly in CSS. Of course, you need to make sure that you have installed the compatible version of daisyui

@import "tailwindcss";
@plugin "daisyui";

Differences between Tailwindcss V3 and Tailwindcss v4

Conclusion

This article only scratches the surface of Tailwind CSS v4—but hey, I hope you at least got the surface! There’s a lot more to explore, from theme variable namespaces to even deeper configuration options. If you want to dive into the nitty-gritty, check out the official docs at Tailwind CSS.

And if you found this helpful, give it a like… or ten, and don’t forget to follow for more content and share. Tailwind won’t style itself, but your appreciation sure does make this article look better! 🚀