Tailwind CSS  is a low level CSS framework which can be customized upto a great extent. It provides building blocks to create bespoke design without getting disturbed by opinionated styles which you need to override. To install Vue CLI type the following command in your terminal window.

npm install -g @vue/cli
Or
yarn global add @vue/cli

Then create a vue app and install tailwind CSS.

npm install tailwindcss
Or
yarn add tailwindcss

Now we need to configure Vue.js for Tailwind. Tailwind CSS uses postCSS. We can configure vue.js components to use PostCSS using Vue-loader.

In the root folder create a file named postcss.config.js and paste the following lines of code in it.

Const autoprefixer=require(‘autoprefixer’);
Const tailwindcss=require(‘tailwindcss’);
module.exports={
plugins:[
//…
require(‘tailwindcss’),
require(‘autoprefixer’),
//...
]
}

Then add tailwindcss as an asset. Create a new folder named styles and a file in it called tailwind.css in the assets folder.

src/assets/styles/tailwind.css
Paste the following code in the file.
@tailwind base;
@tailwind components;
@tailwind utilities;

Now include the file path in main.js.

import './assets/styles/tailwind.css';

Tailwind UI can be added to our app to improve the UI.

npm install @tailwindcss/ui
yarn add @tailwindcss/ui

To configure Tailwind UI create tailwind.config.js file in root folder.

module.exports={
Plugins:[
require(‘@tailwindcss/ui’),
]
}

Example :

Let’s design a login page by first creating a login.vue file in src/components folder.

Paste the above given lines of code in your app.vue and run the project.