How to setup Vue3 and Tailwindcss 3.4
by Martijn Simons, Pixel-Nexus | 02 April 2025
For those who are wondering how to set up a project with Tailwindcss 3.4 and Vue3, this will be a short tutorial on how to do so. Let’s get started!
What is Vue?
Vue is a Javascript based framework mainly used to create web interfaces. It is a component-based programming modal that enables developers to effectively build a complex interface, these components build on top of HTML, CSS, and Javascript.
What is Tailwindcss?
Tailwindcss is a utility-first CSS framework that provides low-level, reusable classes to style elements directly in HTML. It offers a flexible and efficient approach to design without writing custom CSS, allowing developers to build responsive interfaces quickly.
For additional information please visit the Vue3 and Tailwindcss documentation:
https://vuejs.org/guide/introduction.html
https://v3.tailwindcss.com/docs/installation
Setup
Before getting started, it is required that you have an up to date version of Node.js in the working directory. The example code given below was used within WSL Ubuntu, check this link for additional information: https://learn.microsoft.com/en-us/windows/wsl/install.
Vue3 setup
1. Create a vue project with the latest version of vue
npm create vue@latest -> when already in new project folder
OR
npm create vue@latest my-project-name
This will install and execute create-vue, and will prompt you a scaffold to set your project settings.
✔ Project name: ... your-project-name
✔ Add TypeScript? ... No / Yes
✔ Add JSX Support? ... No / Yes
✔ Add Vue Router for Single Page Application development? ... No / Yes
✔ Add Pinia for state management? ... No / Yes
✔ Add Vitest for Unit testing? ... No / Yes
✔ Add an End-to-End Testing Solution? ... No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? ... No / Yes
✔ Add Prettier for code formatting? ... No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes
Scaffolding project in ./my-project-name...
Done.
2. Install the dependencies of the project
cd my-project-name
$ npm install
Tailwindcss setup
1. Install the Tailwindcss dependencies in the project directory
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
2. Create the Tailwindcss configuration files
This will generate your tailwind.config.js and postcss.config.js files:
npx tailwindcss init
‘tailwind.config.js` example:
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js example, which automatically adds Tailwindcss and the autoprefixer plugins:
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
3. Source css file
The generated Tailwindcss classes will not auto generate when an update in the files has been made. Create a source.css file in the src folder, all custom css classes should be placed here. Example basic source.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
This imports the basic settings for tailwind, its components, and utility classes.
Run the Tailwindcss CLI command to automatically update the base.css with the additional custom classes:
npx tailwindcss -i ./src/source.css -o ./src/assets/base.css --watch --poll
4. Update Tailwind config file
Update the tailwind.config.js file to purge unused css classes, and only check for content in specific folders:
tailwind.config.js example:
/** @type {import('tailwindcss').Config} */
export default {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
content: ['./src/**/*.{html,js,vue}'],
theme: {
extend: {},
},
plugins: [],
}
5. Run the app
For development:
npm run dev
When ready to ship to application to production:
npm run build
Resources
Resources:
Vue: https://vuejs.org/guide/quick-start.html
Tailwindcss: https://tailwindcss.com/docs/installation
WSL Ubuntu: https://learn.microsoft.com/en-us/windows/wsl/install
As a note, this overview gives information for Tailwindcss 3.4. Some of the examples and syntax provided are changed or removed in Tailwindcss 4.1!