To check if Node.js is already installed, open your terminal and type: Now, create the Vite project by executing the following command: This command creates a new folder named my-react-app<\/strong> with a React template. After the project is created, navigate into the newly created folder: Now, you can open this folder in your code editor. If you’re using Visual Studio Code, simply run: With your project set up, it\u2019s time to install Tailwind CSS as a Vite plugin. In your terminal, run the following command: This command installs Tailwind CSS as a development dependency. Once installed, check your package.json file to confirm that Tailwind CSS appears in your dependencies.<\/p>\n The next step is to add the @tailwindcss\/vite plugin to your Vite configuration. To use Tailwind CSS in your project, you need to include its directives in your CSS file. Open the src\/index.css file and add the following line at the top: Now that everything is set up, it\u2019s time to start your development server. In your terminal, run: This command will start the Vite development server, and you should see output indicating that your app is running. Open your browser and go to http:\/\/localhost:5173 to view your application.<\/p>\n To confirm that Tailwind CSS is working correctly, you can add some Tailwind classes to your React components. Open the src\/App.jsx file and modify < h1 > tag with className text-red-800 and Save the file and check your browser. You should see a red heading that says “Hello, Tailwind CSS!” This means that Tailwind CSS is successfully integrated into your project.<\/p>\n Congratulations! You\u2019ve successfully installed Tailwind CSS version 4 and set it up with a React project using Vite. With its utility-first approach, you can now start building stunning UIs quickly and efficiently.<\/p>\n If you’re interested in exploring more about Tailwind CSS, don’t hesitate to check out the official documentation on Installing Tailwind CSS with Vite – Tailwind CSS<\/a>. Happy coding!<\/p>\n
\nnode -v<\/code><\/p>\n
\nnpm create vite@latest my-react-app -- --template react<\/code><\/p>\n
\ncd my-react-app<\/code><\/p>\n
\ncode .<\/code><\/p>\nStep 2: Install Tailwind CSS<\/h2>\n
\nnpm install -D tailwindcss<\/code><\/p>\nStep 3: Configure the Vite plugin<\/h2>\n
\nUpdate your vite.config.ts file as below.<\/p>\nimport { defineConfig } from 'vite'\r\nimport tailwindcss from '@tailwindcss\/vite'\r\n \r\nexport default defineConfig({\r\nplugins: [\r\ntailwindcss(),\r\n],\r\n})\r\n<\/pre>\nStep 4: Import Tailwind CSS in Your Stylesheet<\/h2>\n
\n@import \"tailwindcss\";<\/code><\/p>\nStep 5: Start the Development Server<\/h2>\n
\nnpm run dev<\/code><\/p>\nStep 6: Testing Your Tailwind CSS Setup<\/h2>\n
Conclusion<\/h2>\n
![\"Also](\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\")