Using Tailwind with Vue.js

Tailwind is a pretty cool CSS framework.

In this post I’m going to show you how to use Tailwind (v1.0.5) on a Vue app.

It’s 4 simple steps:

Install Tailwind
Create a configuration file
Configure PostCSS
Create a CSS file
Import the file in your Vue app
Testing it works fine

In this post I assume the project you want to use Tailwind on is based on Vue CLI 3.

Install Tailwind

First step is to install Tailwind, using npm or yarn:

# Using npm
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev

Create a configuration file

Next, use the Tailwind command that is provided to create a configuration file.

./node_modules/.bin/tailwind init tailwind.js

This will create a tailwind.js file in the root of your project, adding the basic Tailwind configuration. The file is very long, and I won’t paste it here, but it contains lots of presets that will be very useful later.

Configure PostCSS

Now you need to tweak the PostCSS configuration to make sure Tailwind runs. Add:

module.exports = {
  "plugins": [
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')(),
  ]
}

to your postcss.config.js. Create one if it does not exist.

Note: if you set Vue CLI to store the configuration in package.json, make sure no PostCSS configuration lies in that file. By default Vue CLI adds these lines:

  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

remove them, or the postcss.config.js file won’t be read.

Create a CSS file

Now create a CSS file in src/assets/css/tailwind.css and add

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

Import the file in your Vue app

Import tailwind in main.js:

import '@/assets/css/tailwind.css'

(@ in vue points to src/)

That’s it! Now restart your Vue CLI project and it should all work fine.

Testing it works fine

You won’t notice anything unless you add Tailwind-specific classes.

Try for example adding this HTML in one of your templates:

<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
  Test
</div>

That should create a colored box.