VueCLI3+项目使用tailwindcss，最简单配置

Tailwind Css 官方

安装@vue/cli

npm install -g @vue/cli

初始化Vue项目，我们创建一个名为tailwind的项目

vue create tailwind

中间步骤自己定义，不多做介绍

...

安装Tailwind CSS

cd tailwind
npm install tailwindcss -S

修改main.js引入import 'tailwindcss/tailwind.css'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'tailwindcss/tailwind.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

创建Tailwind配置文件

npx tailwind init

详细配置自行查询官方

修改vue.config.js文件

如果没有就新建一个

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