Nuxt.js基础（Tailwind基础）

aaiier

已于 2025-07-04 16:27:50 修改

阅读量257

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

于 2025-06-28 14:03:45 首次发布

本文链接：https://blog.csdn.net/hongsegeming/article/details/148975712

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

基础1

<div v-if="激活标签 === '邮箱'" class="相对定位">
  <div class="相对定位 宽度-112 高度-12 左侧-[743像素] 顶部-[435像素] 绝对定位 背景-中性色-800 圆角-lg">
    <!-- 邮箱图标 -->
    <span class="绝对定位 左侧-3 顶部-1/2 向上平移-自身高度1/2">
      <img src="~/资源/登录/图标_手机.png" 替代文本="email" class="宽度-5 高度-5" />
    </span>
    <!-- 竖线 -->
    <span class="绝对定位 左侧-11 顶部-1/2 向上平移-自身高度1/2 高度-6 左侧边框 边框-灰-500"></span>
    <!-- 输入框 -->
    <input v-model="邮箱表单.邮箱" 类型="邮箱" 占位符="请输入邮箱地址" 
           class="宽度-100% 高度-100% 背景-透明 圆角-lg 内边距-l-14 内边距-r-4 文本-白色 移除焦点轮廓" />
  </div>
</div>

相对定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位示例</title>
    <style>
        .container {
            width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px;
        }

        /* 修改下面的 top/bottom/left/right 值来观察效果 */
        .relative-box {
            position: relative;
            top: 0px;  /* 正值表示向下偏移 */
            left: 0px; /* 正值表示向右偏移 */
            /* 尝试修改为 bottom: 20px; 或 right: 20px; 观察效果 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>相对定位演示</h3>
        <p>正常盒子：</p>
        <div class="box">正常位置</div>
        
        <p>相对定位盒子：</p>
        <div class="box relative-box">相对定位</div>
        
        <p>后续盒子：</p>
        <div class="box">正常位置</div>
    </div>
</body>
</html>

修改参数后

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位示例</title>
    <style>
        .container {
            width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px;
        }

        /* 修改下面的 top/bottom/left/right 值来观察效果 */
        .relative-box {
            position: relative;
            top: 20px;  /* 正值表示向下偏移 */
            left: 20px; /* 正值表示向右偏移 */
            /* 尝试修改为 bottom: 20px; 或 right: 20px; 观察效果 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>相对定位演示</h3>
        <p>正常盒子：</p>
        <div class="box">正常位置</div>
        
        <p>相对定位盒子：</p>
        <div class="box relative-box">相对定位</div>
        
        <p>后续盒子：</p>
        <div class="box">正常位置</div>
    </div>
</body>
</html>

绝对位置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位示例</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            position: relative; /* 关键：创建定位上下文 */
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 修改下面的 top/bottom/left/right 值来观察效果 */
        .absolute-box {
            position: absolute;
            top: 0px;     /* 距离容器顶部50px */
            right: 0px;   /* 距离容器右侧30px */
            /* 尝试修改为 bottom: 20px; 或 left: 20px; 观察效果 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>绝对定位演示</h3>
        <p>容器内的正常内容：</p>
        <div class="box absolute-box">绝对定位</div>
        <p>注意这个文本会被绝对定位元素覆盖，因为绝对定位元素脱离了文档流。</p>
		<div class="box" style="position: absolute; top: 0px; left: 0px;">
            无定位上下文的绝对定位A
        </div>
    </div>
    
    <div style="width: 400px; margin: 20px auto; border: 1px dashed #ccc; padding: 10px;">
        <h4>如果父元素没有设置 position: relative</h4>
        <div class="box" style="position: absolute; top: 20px; left: 20px;">
            无定位上下文的绝对定位B
        </div>
        <p>这个元素会相对于整个页面定位（因为没有已定位的父元素）。</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位示例</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            position: relative; /* 关键：创建定位上下文 */
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 修改下面的 top/bottom/left/right 值来观察效果 */
        .absolute-box {
            position: absolute;
            top: 0px;     /* 距离容器顶部50px */
            right: 0px;   /* 距离容器右侧30px */
            /* 尝试修改为 bottom: 20px; 或 left: 20px; 观察效果 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>绝对定位演示</h3>
        <p>容器内的正常内容：</p>
        <div class="box absolute-box">绝对定位</div>
        <p>注意这个文本会被绝对定位元素覆盖，因为绝对定位元素脱离了文档流。</p>
		<div class="box" style="position: absolute; top: 32px; left: 53px;">
            无定位上下文的绝对定位A
        </div>
    </div>
    
    <div style="width: 400px; margin: 20px auto; border: 1px dashed #ccc; padding: 10px;">
        <h4>如果父元素没有设置 position: relative</h4>
        <div class="box" style="position: absolute; top: 20px; left: 20px;">
            无定位上下文的绝对定位B
        </div>
        <p>这个元素会相对于整个页面定位（因为没有已定位的父元素）。</p>
    </div>
</body>
</html>

<div class="relative w-83 h-12 left-[857px] top-[430px] absolute">手机号输入框</div>

.relative类定义了position: relative
.absolute类定义了position: absolute
由于absolute类在 CSS 中通常后声明（根据 Tailwind 默认配置），因此最终生效的是position: absolute

Nuxt.js基础（Tailwind基础）

​​1. 按钮组件实现​​

在 Nuxt 3 中安装和配置 Tailwind CSS

使用官方模块 @nuxtjs/tailwindcss​​

1. 按钮组件实现

使用官方模块 `@nuxtjs/tailwindcss`