TailWindCSS 4，你用过吗？让我来带你打开新世界的大门！

一、除了常规CSS，还有哪些样式体系方案，详细说明各自核心概念与缺点。

名称	代表/示例	核心概念	优点	缺点
CSS 预处理器【已过时】	Sass、Less、Stylus	- 变量、嵌套规则、混合器(Mixin)继承(Extend)、运算。 - 提供强大工具和逻辑控制(条件、循环)	- 提升CSS开发效率，代码模块化、易维护 - 提供逻辑控制功能。	- 需要编译，增加开发流程复杂性。 - 生成CSS可能冗余，性能优势较低。
CSS in JS	Styled-components、Emotion、JSS	- 样式与组件绑定，动态生成CSS。 - 支持模块化与作用域隔离。	- 与React等框架无缝集成，动态样式管理简单 - 避免全局样式污染。	- 运行时性能开销大。 - 学习曲线较陡峭。
CSS模块化(CSS Modules)	Webpack支持	- 自动生成唯一类名避免冲突，样式按需加载。	- 避免命名冲突，性能优于CSS in Js。 - 适合模块化项目，维护性强。	- 需要构建工具支持。 - 动态样式支持不够灵活。
Atomic CSS / Utility-FirstCSS	Tailwind CSS、Bootstrap Utilities	- 提供大量小型功能类名，通过组合构建页面。	- 快速开发，无需自定义CSS规则。 - 样式统一，社区生态强大（如Tailwind）	- 学习成本高（大量类） - HTML文件样式类名多，可读性较差。
PostCSS	-	CSS工具平台，通过插件链实现功能扩展（如自动前缀、变量）	- 灵活性强，插件链可定制。 - 与现代构建工具无缝集成。	- 学习插件配置复杂，增加开发成本。
BEM命名规范	-	- 基于类名的命名约定：Block(模块) Element(元素) Modifier(变体)。 - 示例：button_icon--large	- 命名清晰，团队协作友好。 - 无工具依赖，简单直接。	- 类名较长，增加代码冗长感。 - 无法动态生成样式，灵活性低于CSS in JS。
Functional CSS	Tachyons	- 样式为功能块，极简类名代表单一功能。 - 类似Atomic CSS，但更注重功能抽象化。	- 功能清晰，简化CSS开发。 - 易于理解和维护。	- 可读性差。依赖记忆文档
Scoped CSS	Vue scoped样式、ShadowDOM	样式作用域限制在组件内（如Vue的scoped或WebComponents的Shadow DOM）	- 样式隔离强，代码结构清晰。 - 不受外部影响。	- 需要工具链支持。 - 增加复杂性，全局样式覆盖困难。

二、请举例css、cssinjs、tailwindcss 的使用技巧与方案价值体现

css使用技巧与价值体现

css值得关注的技巧

• 变量复用： 通过 :root 定义全局变量，提升可维护性。
• BEM命名规范：使代码更清晰。
• Flex布局： 快速实现响应式设计。

：root {
  --clor-primary: #123456;
  --bg-primary: withe

  --margin: 2px;
  --padding: 2px;
}

价值

• 通过变量和BEM规范，增强了代码的模块化和复用性。
• 响应式设计提升了适配能力。

CSS-in-JS使用技巧与价值体现

CSS-in-JS亮点：

• 动态样式: 支持根据状态生成样式。
• 样式隔离: 避免全局污染。
• 嵌套规则: 便于层级关系定义。

import React, { useState } from "react"
import styled from "styled-components"

// 动态样式
const Button = styled.button`
  padding: 10px 20px;
  border-radius: 5px;
  boeder: none;
  color: white;
  font-size: 16px;
  cursor: poniter;
  background-color: ${{props) => (props.primary ? "#3498db": "#2ecc71")};
  &:hover {
    background-color: ${{props) => (props.primary ? "#2966db": "#2ecc78")};
  }
`;

const App=()=>{
  const [primary,setPrimary] = usestate(true);
  return(
    <div>
      <Button primary={primary} onclick={()=> setPrimary(!primary)}>
        {primary ? "Primary Button" : "Secondary Button")
      </Button>
    </div>
  )
}

价值

• 样式与组件绑定，减少上下文切换，易于理解。
• 动态样式让交互更灵活(如 primary 属性)。

Tailwindcss 使用技巧与价值体现

TailwindCss 优势:

• 原子化设计: 快速实现复杂布局。
• 样式集中管理: 通过配置文件定制主题。
• 快速迭代: 减少自定义CSS编写时间。

价值

• 开箱即用的类名加快开发速度。
• 配置灵活(如主题扩展)满足不同项目需求。

总结

特性	CSS	CSS-in-JS	TailwindCSS
学习曲线	低	中	高
动态样式支持	弱	强	强
可维护性	高(配合BEM等)	高(模块化、隔离)	中(HTML中类名较多)
适合场景	静态页面、小型项目	React等现代框架	快速开发、设计系统

三、TailWindCSS学习

准备阶段

安装

npm install tailwindcss @tailwindcss/vite

配置

• 导入tailwindcss

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss()
  ],
})

• 将加载 Tailwind 的指令添加到你的 CSS 文件中

@import "tailwindcss";

基础概念

Tailwind CSS的本质

用大量可复用的原子类来代替传统的手写 CSS，让开发者通过组合这些类快速构建响应式、现代化的界面。

我们依然使用类，但是不用定义了。每个Tailwind 类只是一个预定义的CSS规则。

这是不就是内联样式吗？ NO!

<div style="color: red; margin-top: 16px;"></div>

内联样式无法复用、没有响应式、没有伪类、维护性差。

区别

• Tailwind 是类名，不是直接写 CSS 属性，会自动按需加载。
• 这些类名在全局 CSS 文件中定义好，浏览器解析时会自动应用对应的样式。
• 支持响应式（如 md:bg-blue-500）、伪类（如 hover:bg-blue-500）、主题切换等高级特性。
• 可复用，且不会污染全局样式。

<div class="text-red-500 mt-4 hover:bg-blue-500"></div>

Tailwind CSS 常用类名

1. 颜色相关

类名	作用说明	示例
text-{color}	文本颜色	text-blue-500
bg-{color}	背景颜色	bg-gray-100
border-{color}	边框颜色	border-red-400
divide-{color}	分割线颜色	divide-gray-200
placeholder-{color}	占位符文本颜色	placeholder-gray-400

text-orange-200 这种写法中的 200 表示颜色的“深浅程度”或“色阶（shade）”

常见的色阶有：50、100、200、300、400、500、600、700、800、900、950。

常见的颜色有：gray（灰色）red（红色）yellow（黄色）green（绿色）blue（蓝色）indigo（靛青色）purple（紫色）pink（粉色）orange（橙色）teal（蓝绿色）cyan（青色）lime（青柠）emerald（祖母绿）sky（天蓝）violet（紫罗兰）amber（琥珀色）rose（玫瑰色）fuchsia（紫红） stone、neutral、zinc、slate（多种灰色系）

bg-transparent：背景完全透明。

bg-current：背景色等于当前元素的文本颜色（currentColor）。

2. 字体与排版

类名	作用说明	示例
text-{size}	字体大小	text-lg, text-xs
font-{weight}	字体粗细	font-bold, font-light，font-normal
italic	斜体
not-italic	非斜体
uppercase	全部大写
lowercase	全部小写
capitalize	首字母大写
tracking-{value}	字间距	tracking-wide
leading-{value}	行高	leading-tight``leading-snug``leading-normal leading-relaxed``leading-none
truncate	单行溢出省略号
text-ellipsis	多行溢出省略号
text-center	居中对齐
text-left	左对齐
text-right	右对齐
text-justify	两端对齐

关于text- {size} ：

• text-xs（超小）
• text-sm（小）
• text-base（正常/默认）
• text-lg（大）
• text-xl（更大）
• text-2xl、text-3xl 等（更大）

size = 1 表示4个像素

3. 布局与间距

类名	作用说明	示例
m-{size}	外边距	m-4, mt-2
mx-auto	水平居中
p-{size}	内边距	p-2, py-4
w-{size}	宽度	w-8, w-full
h-{size}	高度	h-16, h-screen
min-w-{size}	最小宽度	min-w-0
max-w-{size}	最大宽度	max-w-xs
min-h-{size}	最小高度	min-h-screen
max-h-{size}	最大高度	max-h-96

对于margin/padding的补充

控制上下或者左右使用mx-{size}``my-{size}

上：mt-{size}下：mt-{size}左：mt-{size}右：mt-{size}

4. 边框与圆角

类名	作用说明	示例
border	边框宽度	border-2
border-{side}	指定边框	border-t, border-b-4
rounded	圆角	rounded-lg
rounded-{side}	指定方向圆角	rounded-tl
divide-x/divide-y	分割线	divide-x-2

5. Flex 和 Grid

类名	作用说明	示例
flex	启用 flex 布局
flex-row/flex-col	主轴方向
items-center	交叉轴居中
justify-between	主轴两端对齐
gap-{size}	间距	gap-4
grid	启用 grid 布局
grid-cols-{n}	列数	grid-cols-3
col-span-{n}	跨列	col-span-2

<div class="flex h-80 w-80 items-center justify-between bg-pink-300">
  <div class="h-25 w-25 bg-orange-300">1</div>
  <div class="h-25 w-25 bg-sky-300">2</div>
  <div class="h-25 w-25 bg-red-900">3</div>
</div>

6. 定位与显示

类名	作用说明	示例
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位
top-0, left-4	偏移量
z-{n}	层级	z-10
hidden	隐藏元素
block	块级显示
inline-block	行内块
inline	行内显示

7. 背景与阴影

类名	作用说明	示例
bg-{color}	背景色	bg-green-200
bg-gradient-to-r	渐变背景
from-{color} to-{color}	渐变起止色
shadow	阴影	shadow-lg
shadow-none	无阴影

8. 透明度与过渡

类名	作用说明	示例
opacity-{n}	透明度	opacity-50
transition	启用过渡
duration-{n}	过渡持续时间	duration-300
ease-in ease-out ease-linear ease-in-out	过渡曲线
delay-{n}	过渡动画延迟时间	delay-200 延迟200ms

<button class="transition-colors duration-300 hover:bg-blue-500">
  颜色过渡
</button>

<div class="transition-transform duration-300 hover:scale-110">
  鼠标悬停放大
</div>

<div class="transition-opacity duration-500 hover:opacity-50">
  透明度过渡
</div>

<button class="transition-all duration-500 ease-in-out hover:bg-green-500 hover:scale-105 hover:shadow-lg">
  组合过渡
</button>

9. 交互状态

类名	作用说明	示例
hover:bg-blue-700	悬停时背景色
focus:outline-none	聚焦时无外边框
active:scale-95	激活时缩放
disabled:opacity-50	禁用时透明度

10. 其他常用

类名	作用说明	示例
cursor-pointer	鼠标指针
select-none	禁止文本选中
overflow-hidden	超出隐藏
overflow-auto	超出滚动
resize	可拖拽调整大小

---

更多内容详见 Tailwind CSS 官方文档

小练习1：实现flex响应式布局

<div class="flex items-center bg-green-200 px-2">
  <div class="h-6 w-10 bg-blue-200">logo</div>
  <div class="flex-1 text-center">search</div>
  <ul class="flex items-center space-x-2">
    <li class="cursor-pointer">百度</li>
    <li class="cursor-pointer">京东</li>
    <li class="cursor-pointer">淘宝</li>
  </ul>
</div>
<div class="flex items-center md:w-[70%] my-0 mx-auto h-[calc(100vh-24px)]">
  <div class="bg-orange-200 w-40 h-full hidden md:block px-2">专栏</div>
  <div class="bg-pink-200 h-full w-full px-2">内容区</div>
</div>

小练习2：实现grid响应式布局

<h1 class="text-center">grid布局</h1>
<div class="mx-auto my-2 grid min-h-[500px] w-[80%] grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3 rounded-md border-amber-100 bg-amber-50 p-3 shadow">
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
  <div class="flex items-center justify-center rounded-md bg-orange-300 p-3">box</div>
</div>

如何让你的网页适配不同端？ --移动优先断点

在编写样式时，默认的样式优先适配移动端（小屏幕），然后通过断点（breakpoints）为更大的屏幕（如平板、桌面）增加或覆盖样式。

sm仅适用于small及以上版本

md仅适用于medium及以上版本

暗色切换练习

<template>
  <div class="mx-auto flex h-100 w-100 flex-col items-start justify-center rounded-2xl bg-amber-50 p-5 dark:bg-gray-600">
    <h1 class="text-3xl font-bold dark:text-teal-50">hello world</h1>
    <p class="mt-3 mb-8 text-gray-500 dark:text-gray-100">
      The Zero Gravity Pen can be used to writein any orientation, including upside-down. lteven works in outer space.
    </p>
    <button class="cursor-pointer rounded-md bg-blue-100 p-3 font-bold text-indigo-900 transition-colors duration-500 hover:bg-blue-200" @click="toggleDarkModel">
      Toggle Dark Model
    </button>
  </div>
</template>
<script setup>
  const toggleDarkModel = () => {
    document.documentElement.classList.toggle('dark')
  }
</script>

自定义变量

各命名空间的含义

Namespace	Utility classes 示例
--color-*	颜色相关，如 bg-red-500、text-sky-300 等
--font-*	字体家族，如 font-sans
--text-*	字体大小，如 text-xl
--font-weight-*	字体粗细，如 font-bold
--tracking-*	字符间距，如 tracking-wide
--leading-*	行高，如 leading-tight
--breakpoint-*	响应式断点，如 sm:*
--container-*	容器查询和尺寸，如 @sm:*、max-w-md
--spacing-*	间距和尺寸，如 px-4、max-h-16
--radius-*	圆角，如 rounded-sm
--shadow-*	阴影，如 shadow-md
--inset-shadow-*	内阴影，如 inset-shadow-xs
--drop-shadow-*	投影滤镜，如 drop-shadow-md
--blur-*	模糊滤镜，如 blur-md
--perspective-*	透视效果，如 perspective-near
--aspect-*	宽高比，如 aspect-video
--ease-*	动画缓动函数，如 ease-out
--animate-*	动画效果，如 animate-spin

@import "tailwindcss";

@theme {
  --color-primary:#1e40af // 在这里可以自定义你需要的变量
}

组件复用

官方推荐复用方式：@apply 指令 + @layer components

@layer base：用于定义全局的基础样式，通常会影响所有页面的基础 HTML 元素（如 h1、p、a 等）。

@layer components：用于定义项目中可复用的组件类（class），比如卡片、按钮、表单等。

@utility ：用来定义一些非常小巧、单一职责、可复用性极高的工具类（utility class）。

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  h1 {
    @apply text-3xl font-bold dark:text-teal-50
  }

  p {
    @apply mt-3 mb-8 text-gray-500 dark:text-gray-100
  }
}

@layer components {
  .card {
    @apply mx-auto flex h-100 w-100 flex-col items-start justify-center rounded-2xl bg-amber-50 p-5 dark:bg-gray-600
  }
  .switch-button {
    @apply m-3 cursor-pointer rounded-md bg-blue-100 p-3 font-bold text-indigo-900 transition-colors duration-500 hover:bg-blue-200
  }
}

@utility flex-center {
  @apply flex justify-center items-center
}

<template>
<div class="card flex-center">
  <h1>hello world</h1>
  <p>The Zero Gravity Pen can be used to writein any orientation, including upside-down. lteven works in outer space.</p>
  <button class="switch-button" @click="toggleDarkModel">Toggle Dark Model</button>
  <button class="switch-button" @click="toggleDarkModel">Toggle light Model</button>
</div>
</template>
<script setup>
  const toggleDarkModel = () => {
    document.documentElement.classList.toggle('dark')
  }
</script>

小Tips

accent-{color}：用于设置表单控件（如 checkbox、radio、range、progress）的主题色（高亮色）

<!-- Accent -->
<div class="my-4 ml-2 flex flex-col">
  <label> <input type="checkbox" checked />Brower defalut </label>
  <label> <input type="checkbox" class="accent-pink-500" checked />Customized </label>
</div>

Fluid Texts: 字体大小不再是固定的，而是根据屏幕宽度在一定区间内线性变化----流动字体

<!-- Fluid Texts -->
<!-- <p class="sm:text-7xl text-5xl">Hello TailWindCSS</p> --> 
<p class="text-[min(10vw,70px)]">Hello TailWindCSS</p>

注释掉的实现是一种僵硬的字体大小“跳变”的方式。下面的是流动字体。

file:xxx是专门用来给 <input type="file"> 元素的“选择文件”按钮部分添加样式

<!-- File -->
<div class="h-80 w-80 bg-indigo-950 flex justify-center items-center">
  <label class="my-4 block">
    <input type="file" class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100" />
  </label>
</div>

Highlight: 文字高亮设置

<div class="selection:bg-orange-400 selection:text-white">
  <p>夜色如墨，城市的霓虹在雨后朦胧中闪烁。林然独自走在回家的路上，耳边回荡着远处的钢琴声。她停下脚步，抬头望见那扇熟悉的窗，灯光温暖。她忽然明白，人生的答案，也许就在这平凡的夜晚里悄然降临。
</p>
</div>

使用折叠实现 less JavaScript

<template>
<div class="max-w-xl mx-auto p-8 bg-orange-200 rounded-lg">
  <div class="max-w-lg mx-auto p-8">
    <details class="rounded-lg p-6 open:bg-white open:shadow-lg open:ring-1 open:ring-black/5 dark:open:bg-slate-900 dark:open:ring-white/10">
      <summary class="text-sm leading-6 font-semibold text-slate-900 select-none dark:text-white">Why do they call it Ovaltine?</summary>
      <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
        <p>The mug is round. The jar is round. They should call it Roundtine.</p>
      </div>
    </details>
    <button class="switch-button" @click="toggleDarkModel">toggle dark model</button>
  </div>
</div>

</template>
<script setup>
  const toggleDarkModel = () => {
    document.documentElement.classList.toggle('dark')
  }
</script>

caret-{color} ****在文本框输入时改变光标颜色

<!-- Caret -->
<textarea class="m-2 w-200 p-2 text-slate-900 caret-pink-500" placeholder="type something nice.."></textarea>