Setup Tailwind@next in Vue CLI 3 project

Setting up Tailwind is really an easier process consist of few simple steps. But, developers who are new to Webpack or common CSS configuration like PostCSS (like me) might feel it difficult to join all the parts. This post will help to set up and run tailwind with basic configuration in a Vue CLI 3 project.

Create a new Project

Create a new Vue project using Vue CLI 3 using any of your presets.

vue create my-app

Install Tailwind (@next)

# Using npm
npm install tailwindcss@next --save-dev

# Using Yarn
yarn add tailwindcss@next --dev

Load all the Tailwind defaults

Load tailwind defaults in a .css file. Create a new css file (say, src/assets/css/tailwind.css) and load the defaults

/* tailwind.css */

@tailwind preflight;
@tailwind components;
@tailwind utilities;

Import this css file inside main.js entry file.

// main.js

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

Configure PostCSS

Configur PostCSS to use tailwind styles

// postcss.config.js

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

Now restart the vue server and start working with Tailwind 🎉
Watch this series for more Tailwind and Vue related tips 😉

Comments

[Gokul Kathirvel]

It's just the tag that is used to publish the package in npm registry. Usually @next tag will be used to denote a upcoming release. While writing this article, @next denotes the tailwind 1.0.0 beta releases.

refer docs.npmjs.com/cli/dist-tag#purpose

[Gokul Kathirvel]

May be it's misleading to denote the @next in title. I'll reconsider it. Thanks