Tailwind CSS v4.0 introduces several breaking changes that have impacted developers, particularly when setting up projects with Vite. One significant change is the removal of the @tailwind directives (@tailwind base;, @tailwind components;, @tailwind utilities;). In v4.0, these have been replaced with a single @import "tailwindcss"; statement in your CSS file. This modification aims to simplify the setup process but requires adjustments in existing configurations.

To set up a basic React project using Tailwind CSS 4.0 with Vite, follow these steps:

Create a New React Project with Vite: Open your terminal and run:

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

cd my-project

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

cd my-project

This command initializes a new React project named my-project using Vite.

Install Tailwind CSS and the Vite Plugin: Install the necessary dependencies by running:

npm install tailwindcss @tailwindcss/vite

1	npm install tailwindcss @tailwindcss/vite

This installs Tailwind CSS and its official Vite plugin.

Configure the Vite Plugin: Modify your vite.config.js file to include the Tailwind CSS Vite plugin:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

// vite.config.js

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({

plugins: [react(), tailwindcss()],

});

This configuration ensures that Vite processes Tailwind CSS during development and builds.

Set Up Tailwind CSS: Create a styles.css file in your src directory and add the following line:

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

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

This line imports Tailwind’s core styles into your project.

Import the Stylesheet: In your main.jsx or main.tsx file, import the newly created styles.css:

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles.css';

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

// src/main.jsx

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

import './styles.css';

ReactDOM.createRoot(document.getElementById('root')).render(

<React.StrictMode>

<App />

</React.StrictMode>

);

This ensures that Tailwind’s styles are applied throughout your React components.

Start the Development Server: Run the development server using:

npm run dev

1	npm run dev

How to Setup TailwindCSS 4 in React.js Vite Project in Visual Studio Code Full Project For Beginners

GITHUB REPO

Comments

Leave a Reply Cancel reply

Archives