How to add Tailwind CSS to VueJS Application?

Vue Tailwind Example: In this example, How to integrate tailwind CSS framework in vue application. It also includes how to use the tailwind CSS button in the component

VueJS TailwindCSS Example

Step 1 Create Vue Application
Step 2 Start Development Server
Step 3 Add tailwindcss dependencies
Step 4 Create tailwind configuration
Step 5 Create a CSS file and import a CSS file
Step 4 Add tailwind CSS styles
Step 5 Add button to Vue component.
Step 6: Test Vue Application

Create New Vue application

First, open a terminal and run the following command to create a brand new application.

A:\work>vue create vue-css-examples

Vue CLI v4.5.15
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)

Vue CLI v4.5.15
✨  Creating project in A:\work\vue-css-examples.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 1274 packages in 2m

21 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...


added 73 packages in 19s

22 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-css-examples.
👉  Get started with the following commands:

 $ cd vue-css-examples
 $ npm run serve

vue create is a Vue CLI, creates files and folders, Javascript, CSS, and configuration required for the Vue application. It also installs dependencies and live auto-reload and vue web server to run the application.

This command takes a couple of minutes, installs all required dependencies. Once It is done. You should see new brand new Vue application with folder name - vue-css-examples

Next, Change to the application folder

cd vue-css-examples

Start the development server

In the terminal, run the below command to start the vue development server.

npm run serve

This start vue development server and opens a new browser window with localhost:8080 url

Add tailwindcss dependencies

There are multiple ways we can do npm install dependencies.

using npm install manually

To integrate tailwind CSS, You need Tailwindcss and peerdependencies such as postcss and autoprefixer. Npm packages required

tailwindcss: CSS framework with predefined CSS styles
postcss: Tool to transform preprocessor CSS(sass,less) styles into another CSS files using javascript
autoprefixer: It is a postcss plugin to add vendor prefix selector.
Install dependencies manually

Following install tailwindcss,postcss7-compact, and autoprefixer dependencies using below npm command

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

The installation will be done after a couple of minutes.

As a result, It installs and adds the dependencies in the package.json file.

{
   "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.2"
  },
}

vue cli using vue-cli-plugin-tailwind

Please run the below command to install all tailwind CSS dependencies

vue add tailwind

We learned two ways to add dependencies, One way is manual, the second way is using the vue CLI command. Finally, Recommended, easiest and simple is using vue add tailwind command.

If you use this approach, It also creates a tailwind configuration and you can skip the `Add tailwind configuration` section

Add tailwind configuration

This section you can skip if you add dependencies with vue add tailwind command.

You can add tailwind.config.js with the below command

A:\work\vue-css-examples>npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

Following files created in the application root folder.

tailwind.config.js
postcss.config.js

tailwind.config.js contains following entries.

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

In tailwind.config.js, Update the below things.

change from purge:[]
to purge: ['./src/**/*.{js,jsx,ts,tsx}', ‘./public/index.html’],

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create CSS file and import in component

Create a folder css in src folder.

Create a new file tailwind.css inside src/css folder

Following is the directory structure.

src/
├── css/
         ├── tailwind.css
├── app.js
└── index.js

In tailwind.css, please include tailwind css styles

@tailwind base;
@tailwind components;
@tailwind utilities;

Next, please import tailwind.css in main.js

import { createApp } from 'vue'
import App from './App.vue'
import './css/tailwind.css'

createApp(App).mount('#app')

by running npm run start command, output.css is generated in the src/css folder

Add button to Vue component

In the Vue component HelloWorld.js

Please import tailwind.css into this component
update the component to include tailwind button HTML and tailwind CSS styles.

<template>
  <h1 className="text-3xl font-bold underline">
        Simple Tailwindo CSS application
      </h1>
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
  Save
</button>
<span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded">
  Submit
</button>
</span>
</template>

Run npm run serve command and You will see the output on the browser page as follows.

PostCSS plugin tailwindcss requires PostCSS 8 error in Vue application

I got the below error during the integration of tailwindcss to the existing vuejs application.

./src/css/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-3-1!./node_modules/postcss-loader/src??ref--7-oneOf-3-2!./src/css/tailwind.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (A:\work\vue-css-examples\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
    at new Processor (A:\work\vue-css-examples\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
    at postcss (A:\work\vue-css-examples\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10)
    at A:\work\vue-css-examples\node_modules\postcss-loader\src\index.js:140:12

You can check code [Source code](https://github.com/intkiran/vue-css-examples)

This is an issue with how tailwind CSS and its dependencies configuration. Solution:

First, Uninstall dependencies using npm uninstall tailwindcss postcss autoprefixer. command as seen below.

A:\work\vue-css-examples>npm uninstall tailwindcss postcss autoprefixer

removed 50 packages, and audited 1469 packages in 8s

22 packages are looking for funding
  run `npm fund` for details

30 vulnerabilities (19 moderate, 11 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit for details.

Next, Add the tailwind CSS dependencies with vue-cli-plugin-tailwind. vue-cli-plugin-tailwind plugin is installed and configured with vue add tailwind command.

A:\work\vue-css-examples>vue add tailwind
 WARN  There are uncommitted changes in the current repository. it's recommended to commit or stash them first.
? Still, proceed? Yes

📦  Installing vue-cli-plugin-tailwind...


added 1 package in 8s

22 packages are looking for funding
  run `npm fund` for details
✔  Successfully installed plugin: vue-cli-plugin-tailwind

? Generate tailwind.config.js full? tailwind.config.js already exists! Do you want to replace it? Yes

🚀  Invoking generator for vue-cli-plugin-tailwind...
📦  Installing additional dependencies...


added 103 packages, removed 126 packages, and changed 1 package in 19s

22 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

✔  Successfully invoked generator for a plugin: vue-cli-plugin-tailwind

Conclusion

A Step by Step guide to create a Vue application and add tailwind CSS framework into it for example.