Using Tailwind with Vue CLI 3

Tailwind is a utility CSS framework which allows you rapidly build custom user interfaces. Custom being the keyword here.

If I’m building an admin / app / mvp / prototype I whip out the latest Bulma and start building my UI as quickly and efficiently as possible. However, sometimes we have to build to a design, which may not align with a UI Kit like Framework7, Bulma or bootstrap.

Tailwind, does not make any assumptions about you design, so you essentially start from scratch, but can rapidly achieve custom designs with utility classes.

I followed many articles on how to use Tailwind. Even though I was using .postcssrc.js, the @tailwind rules were not being processed by PostCSS.

Because @vue/cli uses package.json to configure PostCSS, the .postcssrc.js is totally ignored.

Here are the steps to have everything working together:

Step 1: Create the project

vue create tailwindcss

Step 2: Create your CSS file

I created mine at src/main.css (next to src/main.js)

Installation - Tailwind CSS

Step 3: Include the CSS file somewhere in your JS

This can be in main.js or App.vue

import ‘./main.css’

Step 4: Configure PostCSS

Include tailwindcss as a plugin for PostCSS:

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