DEV Community

loading...

Setup Tailwind@next in Vue CLI 3 project

gokatz profile image Gokul Kathirvel Originally published at gokatz.me ・1 min read

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 😉

Discussion (4)

pic
Editor guide
Collapse
manuelz profile image
ManuelZ

What's the meaning of the "@next"?

Collapse
gokatz profile image
Gokul Kathirvel Author

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
manuelz profile image
ManuelZ

Thank you!

Collapse
gokatz profile image
Gokul Kathirvel Author

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