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:

<!-- TOC -->

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

<!-- /TOC -->

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

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

# Using npm
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev

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.

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.

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

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

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.

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.