??1. 按鈕組件實現??

• ??傳統 CSS

<!-- HTML -->
<button class="btn-primary">提交</button><!-- CSS -->
<style>.btn-primary {background-color: #3490dc;padding: 0.5rem 1rem;border-radius: 0.25rem;color: white;transition: background 0.3s;}.btn-primary:hover {background-color: #1d4ed8;}
</style>

??Tailwind CSS

<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded transition">提交
</button>

• ??優勢??：無需編寫 CSS，類名直接描述樣式功能，開發速度更快。

在 Nuxt 3 中安裝和配置 Tailwind CSS

使用官方模塊?@nuxtjs/tailwindcss??

??優點??：自動處理 PostCSS 配置、預設路徑掃描、零手動文件創建。
??步驟??：

??安裝依賴

打開終端，進入 Nuxt 項目的根目錄（包含?package.json?和?nuxt.config.ts?的文件夾）。

npm install -D @nuxtjs/tailwindcss tailwindcss postcss autoprefixer

依賴會自動安裝到?./node_modules?目錄，并更新?package.json?中的?devDependencies。

啟用模塊??
修改?nuxt.config.ts：

export default defineNuxtConfig({modules: ['@nuxtjs/tailwindcss']
});

??初始化配置??（可選）

npx tailwindcss init -p  # 生成 tailwind.config.js 和 postcss.config.js

擴展掃描路徑??（按需）
在?tailwind.config.js?中檢查/調整?content?路徑

module.exports = {content: ["./components/**/*.{js,vue,ts}","./layouts/**/*.vue","./pages/**/*.vue","./plugins/**/*.{js,ts}","./app.vue"]
};

測試組件??
在任意頁面添加測試代碼：

<template><div class="bg-blue-500 text-white p-4 rounded-lg">Tailwind 生效！</div>
</template>

貼圖片

<img class="w-[1000.33px] h-[690.56px] left-[100px] top-[1870px] absolute" src="~assets/index/首頁_png_地圖.png" />