How to install Tailwindcss to Vue Typescript project
yarn create vue@latest which using Vue 3.4.29, Vite 5.3.1 and Typescript 5.4.0. Video tutorial available at the bottom of this page. Installing tailwindcss & postcss
First install tailwind into the Vue project by running npm install tailwindcss postcss, or with yarn yarn add tailwindcss postcss.
Configure tailwindcss & postcss config
Create tailwindcss config in Vue project by running npx tailwindcss init --ts, and create a postcss config file postcss.config.mjs, please note the file extension is .mjs.
Add Vue project files source in the tailwindcss config file
// tailwindcss.config.ts
import type { Config } from 'tailwindcss'
export default {
content: [
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
Add tailwindcss to postcss config file
// postcss.config.mjs
export default {
plugins: {
tailwindcss: {},
},
}
Add tailwindcss directives to your CSS file
// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Run the Vue project now with npm run dev or yarn dev, add a utility class in the app like class="p-4" or class="m-4". If it's applied a padding or margin then tailwindcss has successfully installed.