​​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" />