DEV Community

loading...
Cover image for Using Tailwind CSS with Vue.js

Using Tailwind CSS with Vue.js

lukeocodes profile image @lukeocodes πŸ•ΉπŸ‘¨β€πŸ’» ・Updated on ・6 min read

Just a quick post to show you how to add Tailwind CSS to your Vue.js app if you're not familiar with things about Webpack and Vue-loader.

If you'd like to clone the example app, check out my repo on GitHub.

Vue.js CLI

Use the Vue CLI to generate a basic Vue.js app. Install it if you haven't already.

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Enter fullscreen mode Exit fullscreen mode

The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.

You can check you have the right version (@vue/cli) with this command:

vue --version
Enter fullscreen mode Exit fullscreen mode

Create a Basic Vue.js App

Run the create command of the Vue CLI. This will generate a basic Vue.js app. You'll be prompted with some options. When asked, you can select the defaults (I don't know what they all do yet anyway) or include the --default option to skip the prompts.

vue create tailwind-vue-app
Enter fullscreen mode Exit fullscreen mode

This command generates a basic Vue.js app into a new directory tailwind-vue-app. It also runs npm install (or yarn) so you've no need to do that. You can now change into the new directory and check it all runs okay.

Change into the app directory like so.

cd tailwind-vue-app
Enter fullscreen mode Exit fullscreen mode

Run the application with this command.

npm run serve
# OR
yarn serve
Enter fullscreen mode Exit fullscreen mode

Now running, you can check out your basic hello-world Vue.js app, which is probably running at localhost:8080.

Hello World Vue.js App

Install Tailwind CSS as a Dependency

Before using Tailwind CSS in the app, install it as a dependency and configure it.

npm install tailwindcss
# OR
yarn add tailwindcss
Enter fullscreen mode Exit fullscreen mode

Configure Vue.js for Tailwind CSS

Webpack (and Vue-loader which is a Webpack loader for Vue.js components) can be configured to use PostCSS which is a Webpack loader for CSS.

It will look for the configuration inside a postcss.config.js file and can build the app with CSS from packages you add.

The demo app generated by Vue CLI doesn't create a postcss.config.js file by default. Do that now using your editor or this command.

touch postcss.config.js
Enter fullscreen mode Exit fullscreen mode

And, configure it using this code.

// postcss.config.js

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};
Enter fullscreen mode Exit fullscreen mode

Add Tailwind CSS to a CSS Asset

The demo app is also generated without any CSS assets. Instead, it uses CSS inside the components (which is fine). To include Tailwind CSS, create a CSS asset using your editor or the commands below.

# mkdir -p for making parents they don't exist
mkdir -p src/assets/styles/
touch src/assets/styles/index.css
Enter fullscreen mode Exit fullscreen mode

Now add this code, which adds the various packages of the Tailwind CSS library.

/* src/assets/styles/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Edit the src/main.js file as shown here, adding an import line to include the new index.css stylesheet asset.

  import Vue from 'vue'
  import App from './App.vue'
+ 
+ import './assets/styles/index.css';

  Vue.config.productionTip = false

  new Vue({
    render: h => h(App),
  }).$mount('#app')
Enter fullscreen mode Exit fullscreen mode

Drop-In Tailwind CSS Components

To show it's working as expected, now you can effectively drop-in components straight from the Tailwind CSS component library. For example, replace the Vue.js logo with a responsive header navbar by following these steps:

First, create a new empty component file called Nav.vue either using your editor or this command.

touch src/components/Nav.vue
Enter fullscreen mode Exit fullscreen mode

Next, inside src/components/Nav.vue, create the component with this code.

<template>
  <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
    <div class="flex items-center flex-shrink-0 text-white mr-6">
      <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
      <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
    </div>
    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
      </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
      <div class="text-sm lg:flex-grow">
        <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
          Docs
        </a>
        <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
          Examples
        </a>
        <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
          Blog
        </a>
      </div>
      <div>
        <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Nav'
}
</script>
Enter fullscreen mode Exit fullscreen mode

Everything outside of the <nav> element is the makings of a standard static Vue component, <template></template> and <script></script> for containing the markup and the export respectively. The <nav> element is a copy and paste straight from the Tailwind CSS responsive header navigation component.

Now, edit the src/App.vue component and make the following changes.

  <template>
    <div id="app">
-     <img alt="Vue logo" src="./assets/logo.png">
+     <Nav class="mb-6" />
-     <HelloWorld msg="Welcome to Your Vue.js App"/>
+     <HelloWorld msg="Welcome to Your Vue.js App" class="text-center"/>
    </div>
  </template>

  <script>
  import HelloWorld from './components/HelloWorld.vue'
+ import Nav from './components/Nav.vue'

  export default {
    name: 'App',
    components: {
-     HelloWorld
+     HelloWorld,
+     Nav
    }
  }
  </script>

- <style>
- #app {
-   font-family: Avenir, Helvetica, Arial, sans-serif;
-   -webkit-font-smoothing: antialiased;
-   -moz-osx-font-smoothing: grayscale;
-   text-align: center;
-   color: #2c3e50;
-   margin-top: 60px;
- }
- </style>
Enter fullscreen mode Exit fullscreen mode

You even delete the blob of CSS in the component. There was nothing wrong with it, but you can achieve the same results using pre-defined classes available from Tailwind CSS.

With that change saved, check out your app and it should look something like this πŸ‘‡

Tailwind CSS Components inside Vue.js

This little guide is just something quick I picked up for a larger series I'm working at the moment!

Go, team! πŸŽ‰

Fork or clone my example GitHub repo, and let me know what you think πŸ‘‡

Discussion (7)

pic
Editor guide
Collapse
elangsbp profile image
Elang Swa Buana Putra

Thank you for the tutorial, try to change from >>

/* src/assets/styles/index.css */

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

to this ( if you have problem related to postcss-import )

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Reference : tailwindcss.com/docs/installation

Collapse
lowell130 profile image
Stew

can't compile, error with Postcss 8:

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
github.com/postcss/postcss/wiki/Po...

Collapse
amankha04763571 profile image
Aman Khan

npm uninstall tailwindcss postcss autoprefixer

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

Collapse
rabin016 profile image
Rabin Chakraborty

What about adding purge CSS? Can you show me how? And also does it work with SCSS?

Collapse
dkodeit profile image
dkodeit

Purging unused CSS is now baked into tailwind, one line and done.

Docs: tailwindcss.com/docs/controlling-f...

Collapse
efraimla profile image
Efraim

I did try but, does it work with dart-sass and Typescript?>

Collapse
shaymy profile image
Shaymy

thank you a lot for this tutorial. I am a Vue and Tailwind begginer and I really apprecieted your explications! Bravo