This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
- The following command is going to create the project.
- Then just answer the different questions generated by the script to complete the process of creation
npm init vite@latest
npm run dev
npm i -D tailwindcss postcss autoprefixer
The following command will create two config files: tailwind.config.js and postcss.config.js
npx tailwindcss init -p
Look for the file src/index.css that was created by vite and add the following commands
@tailwind base;
@tailwind components;
@tailwind utilities;
Open the file named tailwind.config.js that was created in the first step, and change it with the following content
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.jsx"],
theme: {
extend: {},
},
plugins: [],
}
- Modify tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{jsx}"],
theme: {
extend: {},
},
plugins: [],
}
- Originally was using the keyword of purge instead of content, but this was modified since tailwind 3.0
/** @type {import('tailwindcss').Config} */
export default {
content: ["index.html", "./src/**/*.jsx"],
theme: {
extend: {},
},
plugins: [],
}