Creating Vitejs + React + TailwinsCSS with JIT engine Project
Blazing fast React devlopment
Why Vitejs?
Unlike traditional build-tools vitejs doesn't re-bundle the whole project, meaning Vitejs is blazingly fast no matter how much larger your application gets.
Now follow the following super easy steps to create React Vitejs⚡ project with TailwindCSS.
Creating a new Vitejs project
Run the following npm command in order to initialise a new Vitejs project.
npm init @vitejs/app
Enter your project name
Select React
Choose your flavour
Now open the project directory and install all the packages
cd <project name>
npm i
Dont worry it won't take long to install everything
Installing TailwindCSS
Install TailwindCSS and create TailwindCSS config file by running:
npm -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
Setting up TailwindCSS config file
Configure Tailwind to remove unused styles in production
Add ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
in purge
section of the config file.
// tailwind.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Now enble TailwindCSS JIT engine
Add mode: 'jit',
in your TailwindCSS config file.
// tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Now run npm run dev
to start the development server
Enjoy!
I hope this helped you, now enjoy the blazing fast Vitejs⚡ and comment down if you need help in anything