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
Khang Nguyen | Sciencx (2024-06-30T10:48:10+00:00) React + Vite + Tailwind project. Retrieved from https://www.scien.cx/2024/06/30/react-vite-tailwind-project/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.