在 Vue 3.0 使用 Tailwind CSS UI 框架

Vue
, , , ,

做法

建立 Vue 專案。

1
vue create vue-tailwind

安裝 tailwindcss 套件。

1
yarn add tailwindcss

安裝 autoprefixer 套件。

1
yarn add autoprefixer@^9.0.0
  • 避免使用太新的版本，否則可能會導致編譯失敗。

在 src/assets/css 資料夾新增 tailwind.css 檔：

1
2
3
4
5
6
/* noinspection CssInvalidAtRule */
@tailwind base;
/* noinspection CssInvalidAtRule */
@tailwind components;
/* noinspection CssInvalidAtRule */
@tailwind utilities;

在根目錄新增 tailwind.config.js 檔：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [
    '@/**/*.html',
    '@/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

在根目錄新增 postcss.config.js 檔：

1
2
3
4
5
6
7
8
9
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

修改 main.js 檔，將 tailwind.css 檔引入：

1
2
3
4
5
6
import { createApp } from 'vue';
import App from '@/App';
import router from '@/router';
import '@/assets/css/tailwind.css';

createApp(App).use(router).mount('#app');

使用：

1
2
3
4
5
<div class="flex flex-wrap">
  <div class="w-full text-center">
    Form
  </div>
</div>

程式碼

參考資料