Vue 3 安裝 TailwindCSS 2 | 點燈坊

TailwindCSS 基於 Functional CSS，讓我們只要組合 Utility 就能達成效果，不必再寫 CSS，且搭配 PurgeCSS 後，還可將沒用到的 CSS 拿掉。

Version

Vue 3.0.0
TailwindCSS 2.0.1

PostCSS 7

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

使用 Yarn 安裝 PostCSS7、Tailwind CSS 與 Autoprefixer。

理論上 Tailwind CSS 2 應該要搭配 PostCSS 8，但目前 Vue CLI 暫時只能搭配 PostCSS7，因此只能暫時安裝官方釋出的 PostCSS 7 解決方案。

PostCSS Config

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

在 project 的根目錄建立 postcss.config.js，設定 PostCSS 使用 Tailwind CSS 與 Autoprefixer。

Tailwind Config

$ npx tailwindcss init

在 projct 根目錄建立 tailwind.config.js。

tailwind.config.js

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

第 2 行

purge: [
  './src/**/*.html',
  './src/**/*.vue',
],

設定 PurgeCSS 管理 .html 與 .vue 檔案，將移除沒使用到的 CSS。

Add CSS File

src/assets/tailwind.css

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

新增 src/assets/tailwind.css。

Tailwind 會在 build-time 以標準 CSS 取代。

Main

main.js

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/tailwind.css'

createApp(App).mount('#app')

第 3 行

import '@/assets/tailwind.css'

在 main.js 引入 tailwind.css。

Component

App.vue

<template>
  <h1 class="text-4xl text-red-700">Hello World</h1>
</template>

直接在 <h1/> 套用 Tailwind 的 utility，可發現其可讀性很高，就算不熟 Tailwind，也能由其 class name 了解其意義。

Development Mode

$ yarn serve

啟動 Webpack 的 DevServer。

可發現 Tailwind 已經成功套用。

Production Mode

$ yarn build

使用 production mode 編譯 Vue 並啟動 PurgeCSS。

啟動 PurgeCSS 後，Tailwind 只剩下 3.48 kb，壓縮後更只剩下 1.26 kb。

Conclusion

• Tailwind CSS 2 的安裝步驟大抵與 Tailwind CSS 1 相同，唯目前 Vue CLI 只能使用 PostCSS 7，因此安裝步驟比較 tricky

Reference

Tailwind CSS, Installation
Tailwind CSS, PostCSS 7 Compatibility Build