If you’re starting a new Vite project, you might want to consider using Tailwind CSS. It requires some time to learn all the utility classes, but you rarely have to write CSS anymore.
Why Vite?
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.
Installation steps
Note Vite comes with vue 3 by default
First, let's create new vite project:
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
Next install tailwindcss
npm install tailwindcss
Create your Tailwind config file
npx tailwindcss init
Vite automatically applies your PostCSS config to all styles in *.vue files and imported plain .css files. Create a postcss.config.js in your project root.
touch postcss.config.js
Add module to postcss.config.js
module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
],
};
Create app.css file in src/assets/app.css and import tailwindcss to it
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Finally you have to import app.css to main.js file
import './assets/app.css'
That's it! Now your project is ready to use all the tailwind css utilities in your new Vue / Vite project.