在 Vue 3.0 使用 Tailwind CSS UI 框架

做法

建立 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>

程式碼

參考資料