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 π
Top comments (2)
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
May be it's misleading to denote the @next in title. I'll reconsider it. Thanks