Vuetify 是一個基於 Vue.js 的開源 UI 框架，它提供了一系列的預製組件和樣式，讓開發者能夠快速地建立美觀、功能豐富的網頁應用程式。Vuetify 的設計目標是簡化前端開發流程，同時提供一致性的外觀和使用者體驗。

近一年來，Vuetify 的下載量也是表現得不錯

於是我使用了 Vuetify3，並且搭配 TailwindCSS 來做這次的專案

但卻遇到了一個問題．．．

Vuetify 與 TailwindCSS 的樣式互相衝突了！！！😱

在設定 mb-1 時，會出現兩個 mb-1

Vuetify 的類別會被加上 !important，導致 TailwindCSS 都會被蓋掉了

搜尋了一下解法，TailwindCSS 有支援前綴的方式，如發生命名衝突時，這會是一個好方法，直接在設定檔加上 prefix

tailwind.config.js

1
2
3

module.exports = {
  prefix: 'tw-',
}

這麼一來，所有的樣式前面都會被加上 tw-

.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}

在加類名時就會變成

1
2
3

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

但這有個缺點，TailwindCSS 的類名本來就很長了，每個類名再加上 tw- 後，變得又臭又長，不是很美觀 😥

所以我決定還是從 Vuetify 下手！！

好在爬了幾篇文章後解決了我的問題

只要三個步驟

Vuetify 基本設定
安裝 vite-plugin-vuetify，設定 settings.scss 路徑
設定 vuetify utility

Vuetify 基本設定

首先先在進入點加入 Vuetify ，因為我專案需要有一些 icon，所以有加入一些 icon 的檔案，也有針對專案去做一些顏色、breakpoint 的客製設定，這些都可視專案情況加入

main.js

import { createApp } from "vue";
import "./assets/scss/main.scss";
import App from "./App.vue";

// Vuetify
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { fa } from "vuetify/iconsets/fa";
import { aliases, mdi } from "vuetify/lib/iconsets/mdi";
import "@mdi/font/css/materialdesignicons.css";
import "@fortawesome/fontawesome-free/css/all.css";

const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        dark: false,
        colors: {
          primary: "#288a31",
        },
      },
    },
  },
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
      fa,
    },
  },
  display: {
    mobileBreakpoint: "sm",
    thresholds: {
      xs: 0,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
    },
  },
  components,
  directives,
});

const app = createApp(App);
app.use(vuetify);
app.mount("#app");

安裝 vite-plugin-vuetify，設定 settings.scss 路徑

接著要先安裝 vite-plugin-vuetify，並設定 styles 設定檔的路徑

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vuetify from "vite-plugin-vuetify";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vuetify({
      styles: { configFile: "src/assets/scss/settings.scss" },
    }),
  ],
});

設定 vuetify utility

新增一個 settings.scss 檔案並設定 vuetify utility，我們可以針對不需要使用的 utility 來做關閉，在這邊我關閉了 vuetify 對 margin 和 padding 的相關類別

除此之外也可以調整變數的預設值 🥳

src/assets/scss/settings.scss

@use 'vuetify/settings' with (
  $utilities: (
    margin: false,
    margin-x: false,
    margin-y: false,
    margin-top: false,
    margin-bottom: false,
    margin-left: false,
    margin-right: false,
    margin-start: false,
    margin-end: false,
    negative-margin: false,
    negative-margin-x: false,
    negative-margin-y: false,
    negative-margin-top: false,
    negative-margin-bottom: false,
    negative-margin-left: false,
    negative-margin-right: false,
    negative-margin-start: false,
    negative-margin-end: false,
    padding: false,
    padding-x: false,
    padding-y: false,
    padding-top: false,
    padding-bottom: false,
    padding-left: false,
    padding-right: false,
    padding-start: false,
    padding-end: false,
    negative-padding: false,
    negative-padding-x: false,
    negative-padding-y: false,
    negative-padding-top: false,
    negative-padding-bottom: false,
    negative-padding-left: false,
    negative-padding-right: false,
    negative-padding-start: false,
    negative-padding-end: false,
  ),
  $messages-font-size: 14px,
  $input-control-height: 32px,
  $field-focused-border-width: 1px
);