In this section we will see how to install & setup vite + react + typescript with tailwind css 3. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
Create Vite Project For React
Install vite via npm:
npm create [email protected]
Install vite via yarn:
yarn create vite
Select react.
yarn create v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
- create-vite
- cva
✔ Project name: … react-project
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla
vue
❯ react
preact
lit
svelte
Select react js with typescript.
✔ Select a framework: › react
? Select a variant: › - Use arrow-keys. Return to submit.
react
❯ react-ts
Move to project directory and install dependencies.
cd react-project
npm install
npm run dev
Install Tailwind CSS 3 Vite React Project.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
App.tsx
function App() {
return (
<div className="min-h-screen flex justify-center items-center">
<h1 className="text-3xl font-bold text-blue-600">
Install & Setup Vite + React + Typescript + Tailwind CSS 3
</h1>
</div>
);
}
export default App;
Run project
npm run dev
Read Also
React Tailwind CSS Accordion (FAQ) Example
React Tailwind CSS Tabs Examples
How to use Tailwind CSS 3 with Headless UI In React
Toggle Switch in React JS with Tailwind CSS Example
Create Reusable Button Component with React & Tailwind CSS
React Tailwind CSS Search Bar Example
React Tailwind CSS Sidebar Example
React JS Login Form with Tailwind CSS Example
React Responsive Navbar Menu With Tailwind CSS Example
How to install Tailwind CSS in React
React Tailwind CSS Dialog (Modal) Example
React Tailwind Registration Form Example