How to Set up Tailwind with Vue 3

This blog post addresses adding the Tailwind CSS framework to a Vue project.

According to the official Tailwind CSS documentation Tailwind CSS is a utility first framework for rapidly building custom user interfaces. Simply put, its a quick way to creating visually pleasing interfaces without having to write your own custom CSS and now we will be adding it to our Vue 3 project.

If you aren't already in the project directory, you can navigate to it with the command :

cd my-vue-project

where my-vue-project is the name of your project's folder

then install Tailwind and its peer-dependencies :

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

when you check the package.json file in your project you should see this added to your dependencies

@tailwindcss/postcss7-compat": "^2.2.4"

it confirms that tailwind has now been added to your project, but that is not all with the set up.

Next, we have to generate the configuration files for Tailwind and PostCSS :

npx tailwindcss init -p

when you check your project files you'll notice two files have been added -
tailwind.config.js and postcss.config.js.

The config file tailwind.config.js contains paths to components and pages of our application and it is in this file we also add customizations

//tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, we will update the purge property :

// tailwind.config.js

module.exports = {
 purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

What is happening here?

The purge property just as the name denotes purges unused css styles which was generated by tailwind on installation, this does not in any way affect the styles by third party CSS used in your project. Check here to read up more about this.

Next, Inside the src folder we are going to create a subfolder called styles and inside the styles folder we create a file tailwind.css, note that this file can be named however you deem fit, I use tailwind.css here as it is more descriptive and you should also give it a descriptive name. Type this in your terminal :

mkdir src/styles && touch src/styles/tailwind.css

Another alternative to creating the subfolder is to create it in your code editor.

Inside tailwind.css add this :

/* ./src/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

What is happening here ?

We made use of the directive @tailwindto import tailwind's styles. Now we have to import tailwind.css into the main.js file.

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

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

Now, let us create something simple using Tailwind. In the App.vue file add this :

<template>
  <div class="justify-center flex items-center bg-blue-500 h-screen">
    <div class="text-4xl text-white">
      This is Tailwind 🙂
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

This is what should show up on your screen :