Vite is a really, really fantastic toolchain for building front-ends. It's fast, has a great DX, and builds to a very small production size.
Another thing Vite does well is that it builds files needed in development on the fly without much setup and in this article, I'll show you how to easily set up TailwindCSS for fast styling changes.
Let's dive in
The setup
In your Vite-powered (npm?) React project, install the dependencies we'll be using
npm i --save-dev tailwindcss postcss autoprefixer
Tailwind
Next, run this command to initialize TailwindCSS for your project. It creates a file in your root directory called tailwind.config.cjs
npx tailwindcss init
Now, open the generated file, add a path to your files in the content
array and save it. Here's what it should look like
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['index.html', './src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
This adds our index.html
file and every component in ./src
, whether it's JS or TS.
PostCSS
Now create a file named postcss.config.cjs
at the root of your project and paste this code inside
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
That's all the setup we need.
Styling your components
Before you can start styling your components with TailwindCSS, you need to include it in your global CSS file (It's usually index.css
) like so:
@tailwind base;
@tailwind components;
@tailwind utilities;
This informs Vite to build out the basic styles we need and reset the entire DOM's default styling.
Now we can start styling, open up any component file, add a tailwind class to it and save
You should see your styling changes reflect instantly in your browser
Bonus
For faster styling and a better DX, install the Tailwind CSS IntelliSense extension to get features like autocomplete, syntax highlighting, and linting.
Conclusion
In this article, I believe you've learnt how to set up TailwindCSS in your Vite project and style your components using it.
Thanks for reading, and I hope this article helps you. If you have any questions, you can drop a comment below and I'll reply.
Also, you can connect with me online via any of these platforms
Have a nice day.