Vue 安装Tailwind CSS

18 min read

版本

Tailwind CSS 1.9.0

安装

$ yarn add tailwindcss

使用Yarn 安装Tailwind。

可发现Tailwind 内建会安装PurgeCSS。

添加Tailwind CSS

src / assets / css / tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

新增 src/assets/css/tailwind.css。

Tailwind 会在build-time 以标准CSS 取代。

初始化配置

$ npx tailwindcss init

使用tailwind init在project根目录建立tailwind.config.js。

默认的初始化文件tailwind.config.js

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

  • purge：直接设定PuregeCSS 要管理清除的文件

PostCSS配置

postcss.config.js

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

在project根目录建立postcss.config.js，由PostCSS启动Tailwind。

在入口文件引用

main.js

import Vue from 'vue'
import App from '@/App.vue'
import '@/assets/css/tailwind.css'

Vue.config.productionTip = false

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

第 3 行

import '＠/assets/css/tailwind.css'

在 main.js 引入 tailwind.css。

编译自动删除无使用的样式

$ yarn build

使用production mode 编译Vue 并启动PurgeCSS。

启动PurgeCSS 后，Tailwind 只剩下4.81 kb，压缩后更只剩下1.60 kb。