Setting Up Tailwind CSS 4.0 with Vite: A Minimalist Approach

Introduction

Tailwind CSS 4.0 introduces a streamlined, zero-configuration-first approach to styling modern web applications. Paired with Vite’s lightning-fast build tool, integrating Tailwind into your project has never been simpler. In this article, we’ll walk through setting up Tailwind CSS 4.0 with Vite and explore its new features.

---

Why Tailwind CSS 4.0?

Tailwind CSS 4.0 focuses on simplicity and performance:

• Zero initial configuration: Start using utility classes without generating a tailwind.config.js file.

• Improved performance: Smaller bundle sizes and faster builds.

• Direct CSS customization: Use @theme and @plugin directives directly in your CSS files.

---

Step 1: Install Tailwind CSS and Vite Plugin

Prerequisites

• A Vite project (React, Vue, or vanilla JavaScript).

Install Dependencies

Run the following command in your project directory:

npm install tailwindcss @tailwindcss/vite

This installs Tailwind CSS and its official Vite integration plugin.

---

Step 2: Configure Vite

Create or Update vite.config.js

If your project doesn’t have a vite.config.js file, create one in the root directory. Add the Tailwind plugin:

// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],  
  // plugins: [react(), tailwindcss()], if you are using react 

});

This tells Vite to process Tailwind CSS during development and builds.

---

Step 3: Set Up Tailwind CSS

Create styles.css

In your src directory, create a styles.css file and import Tailwind’s core styles:

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

This replaces the traditional @tailwind directives with a single import.

Import CSS into Your App

Import the styles.css file in your project’s entry point (e.g., main.js, main.jsx, or App.jsx):

// For React (main.jsx)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './styles.css'; // Import here

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

---

Step 4: Test Your Setup

Start the Development Server

Run:

npm run dev

Tailwind’s utility classes are now available in your project!

Verify with a Test Component

Add a Tailwind class to any element to confirm it works:

<h1 class="text-4xl font-bold text-blue-600">Hello Tailwind 4.0!</h1>

---

Customizing Tailwind (Optional)

Use Directives in CSS

Tailwind 4.0 allows customization directly in your styles.css without a config file. For example:

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

@theme {
  --color-primary: #2563eb; /* Override default theme */
}

@plugin function({ addUtilities }) {
  addUtilities({
    '.rotate-45': { transform: 'rotate(45deg)' },
  });
}

Key Features of Tailwind CSS 4.0

1. No Default Config: Start using Tailwind immediately—no boilerplate.

2. CSS-First Customization: Define themes and plugins in your CSS.

3. Improved Dark Mode: Simplified dark mode handling with @dark variants.

4. Reduced Bundle Size: Optimized for performance.

---

Troubleshooting Tips

• Styles Not Applying? Ensure styles.css is imported in your entry file.

• Vite Plugin Issues? Double-check the vite.config.js syntax.

• Custom Classes Missing? Use @layer directives in your CSS for component-specific styles.

---

Conclusion

Tailwind CSS 4.0 and Vite are a match made in developer heaven. With minimal setup and maximal flexibility, you can focus on building stunning interfaces without wrestling with configuration files. Give this modern workflow a try, and embrace the future of CSS!

---

For advanced configurations, refer to the Tailwind CSS 4.0 Documentation.