Author: M Abo Bakar Aslam

Integrate ReactJs TSX with Tailwind CSS

1. Create React Application

Create your React application.

2. Install Tailwind CSS and Vite Plugin

Open VS code terminal and run below command

npm install tailwindcss @tailwindcss/vite

This command will installed both tailwindcss and @tailwindcss/vite in your react application. You can verify the installation by seeing installed-version under dependencies section of package.json file.

3. Update vite.config.js File

Open the vite.config.js file. In this file, you can see lines like as shown below.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
  
// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
})

Updated File will be looked as below

Line 3 is added

Line 7 has tailwindcss()

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
  
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

4. Link Tailwind CSS with index.css

Open your ./src/index.css file, paste following line at top of the file.

@import "tailwindcss";

5. Install Recommended VS Code Extension

It is highly recommended to install the Tailwind CSS IntelliSense extension in Visual Studio Code.

This extension helps you to:

You can use Ctrl + Spacebar to view class suggestions easily.