How to Configure your Vue 3 app to use Tailwind CSS

What is Tailwind CSS?

What tailwind does is to give you predefined classes to easily layout your application pages and also style elements across your application.

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Now, let's proceed to creating our application.

Create a Vue 3 App

Create your vue 3 application by running this command in the terminal:

npm init vite my-app

Change directory into your project folder:

cd my-app

Install Tailwind CSS

Next we install tailwind css and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Next we need to create two files namely tailwind.config.js and postcss.config.js with the following command

npx tailwindcss init -p

Add template files path to tailwind

Next we need to add the the path of all our template files to the tailwind.config.js file. In your content array content: [], paste in the following code between the array block:

"./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",

Your tailwind.config.js file should look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add tailwind directive your CSS

Create a index.css file in your src folder and add the @tailwind directives for each of Tailwind’s layers.

// ./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Import the newly created index.css file in your main.js file:

import './index.css'

Run your project server

Now we are ready to serve our project:

npm run dev

Start using tailwind css in your app

Replace the App.vue file with the following code to see tailwind in action:

//App.vue
<template>
  <div>
    <h1 class="text-green-500 text-3xl">This is a taiwind app</h1>
    <button class="bg-sky-600 hover:bg-sky-700 text-white p-3 rounded-2xl">
      My Tailwind styled button
    </button>
  </div>
</template>

Replace project default css

Also, replace the styles in style.css to overwrite the default css that came with our vue app setup:

// ./src/style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

You can find the working app here here on github.

Tada! You have tailwind css working with your vue 3 app. Go ahead and build greatness!