Using Tailwind CSS with Vue.js

#vue #javascript #beginners

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

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

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

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

Run the application with this command.



npm run serve
# OR
yarn serve

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

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

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

And, configure it using this code.



// postcss.config.js

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

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

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

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;

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

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

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>

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>

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 👇