This content originally appeared on DEV Community and was authored by Khang Nguyen
This guide will help you init a React project with Vite and use Tailwind.
Prerequisite
- NodeJS version >= 18
Use this command to check your NodeJS version
node -v
Create react project with vite
Open your terminal and run the command
npm create vite@latest
It would ask you some question:
- Project name: Your project name, example: pokemon
- Select a framework: Choose React
- Select a variant: Pick TypeScript
Then your project is created, open the project by VSCode or your other IDE and install dependencies by this command:
npm install
To run project in dev mode, run
npm run dev
The project would be run at http://localhost:5174
Integrate with Tailwind
Install Tailwind by command
npm install -D tailwindcss postcss autoprefixer
Then init Tailwind config file
npx tailwindcss init -p
Update file tailwind.config.js following this code
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
Open index.css file import all tailwind css styles
@tailwind base;
@tailwind components;
@tailwind utilities;
Now let’s test your Tailwind with this code in any .tsx file
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
If the styles are applied, you successfully initialized a React project with Tailwind and Vite.
This content originally appeared on DEV Community and was authored by Khang Nguyen