uView Plus Vue3 ： （ VIP Plus 付费版 ）

# TailwindCSS

官网【vpn】 👉 https://tailwindcss.com/docs (opens new window)

中文【国内】 👉 https://tailwind.nodejs.cn/docs (opens new window)

# 🧩 common.css 样式


.whitespace-nowrap {
	white-space: nowrap;
}
.w-full {
	width: 100%;
}
.bg-red-500 {
	background: red;
}
.bg-pink-500 {
	background: pink;
}
.bg-white {
	background: #fff;
}
.min-h-44 {
	min-height: 88rpx;
}

.padding-0-15 {
	padding: 0 30rpx;
}
.box-border {
	box-sizing: border-box;
}

.mr-30 {
	margin-right: 60rpx;
}

.max-w-200 {
	max-width: 400rpx;
}
.mt-15 {
	margin-top: 30rpx;
}


.mt-1 {
	margin-top: 1px;
}
// ===========================
// flex 模块
.flex {
	display: flex;
	
}
.flex-col {
	flex-direction: column;
}
.items-center {
	align-items: center;
}

.items-start {
	align-items: flex-start;
}
.items-end {
	align-items: flex-end;
}
.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

// 超出1行自动隐藏
.text-overflow-one {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
// 超出2行自动隐藏
.text-overflow-two {
	overflow: hidden;               /* 超出隐藏 */
	text-overflow: ellipsis;        /* 文字超出显示... */
	display: -webkit-box;           /* 必须结合 -webkit-box 实现 */
	-webkit-line-clamp: 2;          /* 限制显示 2 行 */
	-webkit-box-orient: vertical;   /* 垂直排列 */
	word-break: break-word;         /* 自动换行，避免长单词或英文溢出 */
}


✅ Copy success!

# 🔹 建议你这样学 Tailwind

  1. 先记几个常用的：

    • bg-* 背景色
    • text-* 文字样式
    • flex / grid 布局
    • p-* / m-* 内外边距
    • rounded-* 圆角

# 🔹 Tailwind 是什么？

👉 TailwindCSS = 原子化 CSS 框架

  • 传统 CSS：自己写 .class { ... } 然后在标签上用 class 引用
  • Tailwind：已经帮你写好了一堆 小工具类（utility classes），直接用 class="..." 就能快速组合出样式

换句话说：不用写 CSS 文件，直接在标签的 class 里写样式。

# 1️⃣ 安装 TailwindCSS

在 Nuxt3 项目里运行：

npx nuxi@latest module add tailwindcss

✅ Copy success!

会自动生成配置文件：

  • tailwind.config.ts
  • assets/css/tailwind.css

# 2️⃣ 修改 nuxt.config.ts

确保加载了 Tailwind 的全局样式：

// nuxt.config.ts
export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
})

✅ Copy success!

# 3️⃣ 写一个页面 pages/index.vue

<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-100">
    <!-- 头部 -->
    <header class="w-full bg-blue-600 text-white p-4 text-center text-xl font-bold">
      我的 Nuxt3 响应式 Demo
    </header>

    <!-- 主体内容 -->
    <main class="flex-1 flex flex-col md:flex-row w-full max-w-6xl mx-auto p-4 gap-4">
      <!-- 左侧菜单（PC 显示 / 手机隐藏） -->
      <aside class="hidden md:block w-1/4 bg-white p-4 rounded shadow">
        <h2 class="font-semibold mb-2">📋 菜单</h2>
        <ul class="space-y-2">
          <li class="hover:text-blue-600 cursor-pointer">首页</li>
          <li class="hover:text-blue-600 cursor-pointer">新闻</li>
          <li class="hover:text-blue-600 cursor-pointer">关于我们</li>
        </ul>
      </aside>

      <!-- 内容区 -->
      <section class="flex-1 bg-white p-4 rounded shadow">
        <h1 class="text-2xl font-bold mb-4">欢迎访问</h1>
        <p class="mb-2">
          这是一个 <span class="text-blue-600">Nuxt3 + Tailwind</span> 的自适应 demo。
        </p>
        <p>
          👉 打开开发者工具，切换到 <strong>手机端</strong> 试试。
        </p>
      </section>
    </main>

    <!-- 底部导航（手机端显示 / PC 隐藏） -->
    <nav class="md:hidden fixed bottom-0 left-0 w-full bg-blue-600 text-white flex justify-around py-3">
      <div class="flex flex-col items-center">
        <span>🏠</span>
        <span class="text-sm">首页</span>
      </div>
      <div class="flex flex-col items-center">
        <span>📰</span>
        <span class="text-sm">新闻</span>
      </div>
      <div class="flex flex-col items-center">
        <span>ℹ️</span>
        <span class="text-sm">关于</span>
      </div>
    </nav>
  </div>
</template>

✅ Copy success!

# 4️⃣ 效果

  • 电脑端（宽屏 ≥ 768px）

    • 左侧有菜单，底部导航隐藏

  • 手机端（窄屏 ≤ 768px）

    • 菜单隐藏，底部显示导航栏

好的 👍 我给你写一个 Nuxt3 + TailwindCSS 响应式布局 demo，直接复制就能跑起来，适配 PC + 手机端。

# 🔹 举个例子

# 普通写法：

<style>
.btn {
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
}
</style>

<button class="btn">按钮</button>

✅ Copy success!

# Tailwind 写法：

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">按钮</button>

✅ Copy success!

📌 解释一下这些 class：

  • bg-blue-500 → 背景颜色 蓝色
  • text-white → 字体颜色 白色
  • px-4 → padding 左右 1rem
  • py-2 → padding 上下 0.5rem
  • rounded-lg → 圆角

# 🔹 响应式写法（PC/手机不同样式）

Tailwind 自带响应式断点，比如：

<div class="text-sm md:text-lg lg:text-xl">
  我会在不同屏幕下变大
</div>

✅ Copy success!

解释：

  • text-sm → 默认小屏用小字体
  • md:text-lg → 中屏以上（≥768px）用大一点字体
  • lg:text-xl → 大屏（≥1024px）再大一点

# 🔹 为什么要用 Tailwind？

  • 不用自己维护一堆 CSS 文件
  • 写法简单，适合快速开发
  • 原子化 class 名直观，比如 bg-red-500 一看就知道是红色背景
  • 特别适合 Nuxt / Vue 这种前端项目

要不要我给你整理一个 “Tailwind 最常用的 20 个 class 对照表”？这样你直接对照表查就能写样式了。

太好了 👍 我帮你整理一个 TailwindCSS 最常用的 20 个 class 对照表，这样你不用背，直接查就能写样式。

# 📘 Tailwind 最常用 20 个 class 对照表

类名 作用 示例效果
bg-blue-500 背景色 蓝色 蓝底背景
text-white 字体颜色 白色 白色文字
text-sm / text-lg / text-xl 字体大小 小 / 中 / 大号字
font-bold 字体加粗 粗体字
p-4 内边距 padding: 1rem 四周都有间距
px-4 / py-2 内边距：左右 / 上下 例：左右 1rem、上下 0.5rem
m-4 外边距 margin: 1rem 元素外边距
rounded-lg 圆角 圆角矩形
shadow 阴影 卡片阴影效果
flex Flex 布局 水平/垂直布局
items-center Flex 子项垂直居中 垂直居中
justify-center Flex 子项水平居中 水平居中
justify-between Flex 子项两端对齐 左右分布
grid grid-cols-2 网格布局，2 列 自动均分两列
w-full 宽度 100% 占满父容器
h-screen 高度等于屏幕高度 全屏高度
hidden 隐藏元素 display: none
block 显示为块元素 类似 <div>
md:hidden 中屏以上隐藏 适配手机端
md:block 中屏以上显示 适配 PC 端

# 🔹 例子：按钮

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow">
  提交
</button>

✅ Copy success!

# 🔹 例子：PC 和手机不同显示

<!-- 手机端显示 -->
<div class="block md:hidden bg-green-500 text-white p-2">📱 手机导航</div>

<!-- 电脑端显示 -->
<div class="hidden md:block bg-blue-500 text-white p-4">💻 电脑菜单</div>

✅ Copy success!

这样，你只要看 class 就能猜出大部分意思了。

要不要我再帮你做一个 速查图（带颜色和大小效果预览的图表版），你能一眼看到效果？

← wss_socket →