Introduction
Tailwind CSS is a popular utility-first CSS framework.
This article will teach how to install Tailwind CSS into Vue 3.
1. Setup Vue 3
First, you will want to have a new Vue 3 project setup. You can easily create one using the official Vue Build tool.
$ npm init vue@latest
2. Install Packages
Next, you will want to install Tailwind CSS and its peer dependencies via npm into the Vue 3 project.
$ npm install -D tailwindcss postcss autoprefixer
You'll also need a tailwind.config & postcss.config.
$ npx tailwindcss init -p
3. Configure Template Paths
Tailwind will need to know what files to search for classes in. Configuring the content property to the snippet below will allow Tailwind to scan the Vue project correctly.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts}"],
theme: {
extend: {},
},
plugins: [],
};
4. Add Tailwind Directives
You will want to create a new CSS file inside the assets folder. I usually name this tailwind.css.
Within this css file, you will want to add the three Tailwind Directives.
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Import CSS Into main.js
Lastly, you will just need to import this new CSS file into the main.js file of the Vue application.
If you have not yet already, start up the development environment, and you can start using Tailwind Utility Classes.