How to Use Tailwind CSS with Vite

How to Use Tailwind CSS with Vite

Vite is a next-generation front-end tool that is rapidly gaining popularity due to its incredible speed and excellent development experience. If you're looking to combine the power of Vite with the utility-first CSS framework, Tailwind CSS, you're in the right place. This guide will walk you through the process of setting up Tailwind CSS with Vite, and for a more visual explanation, don't forget to check out this excellent video tutorial: How to use Vite in TailwindCSS.

Step 1: Create a New Vite Project

First, you need to create a new Vite project. Open your terminal and run:

npm create vite@latest my-vite-project
cd my-vite-project
npm install

Replace my-vite-project with your preferred project name.

Step 2: Install Tailwind CSS

Next, you need to install Tailwind CSS along with its peer dependencies. Run the following command in your project directory:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will generate tailwind.config.js and postcss.config.js files in your project.

Step 3: Configure Tailwind CSS

Open the tailwind.config.js file and configure the content option to include your HTML and JavaScript files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Add Tailwind Directives to Your CSS

Create a new CSS file, for example, src/index.css, and add the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Import the CSS File

In your src/main.js or src/main.tsx file (depending on your setup), import the newly created CSS file:

import './index.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

For React, your src/main.jsx file might look like this:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'

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

Step 6: Start the Development Server

Now, you can start the Vite development server to see Tailwind CSS in action:

npm run dev

Your project should now be up and running with Tailwind CSS integrated. Open http://localhost:3000 in your browser to see your Vite app styled with Tailwind CSS.

Video Tutorial

For a step-by-step video guide, check out How to use Vite, TailwindCSS . This video provides a comprehensive walkthrough and demonstrates how to get the most out of Vite and Tailwind CSS.

Conclusion

Using Tailwind CSS with Vite offers a powerful and efficient way to build modern web applications. With Vite's fast development server and Tailwind's utility-first approach, you can create stunning, responsive designs quickly and easily. Follow the steps in this guide and watch the video tutorial to get started.

For more information and advanced configuration, refer to the official Tailwind CSS Documentation and the Vite Documentation.