DEV Community

Cover image for How to Set up Tailwind with Vue 3
Ifeoma
Ifeoma

Posted on • Originally published at dev.to

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

@tailwindcss/postcss7-compat": "^2.2.4"
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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: [],
}

Enter fullscreen mode Exit fullscreen mode

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: [],
}

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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');

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

This is what should show up on your screen :

Screen Shot 2021-07-05 at 1.51.11 PM.png

Discussion (0)