DEV Community

Gokul Kathirvel
Gokul Kathirvel

Posted on • Originally published at gokatz.me

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
Enter fullscreen mode Exit fullscreen mode

Install Tailwind (@next)

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

# Using Yarn
yarn add tailwindcss@next --dev
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Import this css file inside main.js entry file.

// main.js

// other imports
import '@/assets/css/tailwind.css'
Enter fullscreen mode Exit fullscreen mode

Configure PostCSS

Configur PostCSS to use tailwind styles

// postcss.config.js

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

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

Top comments (2)

Collapse
 
gokatz profile image
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

Collapse
 
gokatz profile image
Gokul Kathirvel

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