Setting up Tailwind CSS in a Vue 3 and Vite project.
Start by creating a new Vite project if you don't have one set up already.
npx create-vite-app my-project
cd my-project
Next, install Vite's front-end dependencies using npm
:
npm install
Install Tailwind and its peer-dependencies using npm
:
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Vue 3 and Vite don't support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build for now as we've shown above.
Next, generate your tailwind.config.js
and postcss.config.js
files:
npx tailwindcss init -p
This will create a minimal tailwind.config.js
file at the root of your project:
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Learn more about configuring Tailwind in the configuration documentation.
It will also create a postcss.config.js
file that includes tailwindcss
and autoprefixer
already configured:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
If you're planning to use any other PostCSS plugins, you should read our documentation on using PostCSS as your preprocessor for more details about the best way to order them alongside Tailwind.
In your tailwind.config.js
file, configure the purge
option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds:
// tailwind.config.js
module.exports = {
- purge: [],
+ purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Read our separate guide on optimizing for production to learn more about tree-shaking unused styles for best performance.
Open the ./src/index.css
file that Vite generates for you by default
and use the @tailwind
directive to include Tailwind's base
, components
, and utilities
styles, replacing the original file contents:
/* ./src/index.css */
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
Due to a bug in Chromium, it's important that you include the weird /*! @import */
comment to avoid performance issues in Chrome DevTools during development. This is already fixed in Canary but hasn't been released generally yet.
Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.
Read our documentation on adding base styles, extracting components, and adding new utilities for best practices on extending Tailwind with your own custom CSS.
Finally, ensure your CSS file is being imported in your ./src/main.js
file:
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
You're finished! Now when you run npm run dev
, Tailwind CSS will be ready to use in your Vue 3 and Vite project.