Tailwind Setup

1. Make App.jsx file in src folder and first import it in main.jsx file.

 
import App from './App';

2. Create a basic function in App.jsx file using rafce snippet.

import React from 'react'
 
const App = () => {
  return (
    <div>App</div>
  )
}
 
export default App
 

3. Now hit npm run dev and you will see the output in browser as shown below.

App

4. We need to setup the tailwindcss in our project. So, first install the tailwindcss using the following command.

Check this for vite setup: https://tailwindcss.com/docs/guides/vite (opens in a new tab)

npm install -D tailwindcss postcss autoprefixer

Now run the second command to create the tailwindcss config file.

npx tailwindcss init -p

5. Now configure the tailwindcss in postcss.config.js file.

  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

replace the above code with the your content inside the postcss.config.js file.

6. Add the Tailwind directives to your CSS file. In our case, it is index.css file.

• create a index.css file in src folder.

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

7. Some of the css add like this in index.css file.

@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700&display=swap");
 
@tailwind base;
@tailwind components;
@tailwind utilities;
 
.linear-gradient {
  background: linear-gradient(
    179.14deg,
    rgba(32, 18, 63, 0) -7.14%,
    #000000 87.01%
  );
}
 
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.8);
}