# 创建项目
npx create-react-app my-react-app
cd my-react-app

# 启动开发服务器
npm start

# 创建项目
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

my-react-app/
├── src/
│   ├── components/          # 组件目录
│   ├── styles/              # 全局样式目录
│   ├── App.jsx              # 根组件
│   └── index.js/main.jsx    # 入口文件
├── package.json
└── ...

// 01-inline-static.jsx —— 可直接复制运行
function StaticStyle() {
  return (
    <div
      style={{
        backgroundColor: "#4CAF50", // CSS 中的 background-color
        color: "white", // 文本颜色
        padding: "20px", // 内边距
        borderRadius: "8px", // CSS 中的 border-radius
        fontSize: "18px", // CSS 中的 font-size
        textAlign: "center", // CSS 中的 text-align
      }}
    >
      我是带内联样式的盒子
    </div>
  );
}

export default StaticStyle;

// 02-inline-organization.jsx —— 可直接复制运行
function StyleOrganization() {
  // 方式一：对象直接写在 JSX 中（适合只有少量属性的场景）
  const boxStyle1 = {
    backgroundColor: "#2196F3",
    padding: 15, // 数字，React 自动加 px
    marginBottom: 10,
    color: "white",
  };

  // 方式二：提取样式对象到外部变量（推荐，更清晰）
  const boxStyle2 = {
    backgroundColor: "#FF9800",
    padding: 20,
    marginTop: 10, // 驼峰命名
    color: "white",
    borderRadius: 6,
  };

  return (
    <div>
      {/* 方式一 */}
      <div style={boxStyle1}>样式对象方式一</div>

      {/* 方式二：直接写对象字面量（注意两层花括号） */}
      <div
        style={{
          backgroundColor: "#4CAF50",
          padding: 20,
          color: "white",
          marginTop: 10,
        }}
      >
        样式对象方式二
      </div>

      {/* 方式三：使用外部变量 */}
      <div style={boxStyle2}>样式对象方式三</div>

      {/* 方式四：合并多个样式对象 */}
      <div style={{ ...boxStyle1, ...boxStyle2 }}>
        合并样式（后者属性会覆盖前者同名属性）
      </div>
    </div>
  );
}

export default StyleOrganization;

// 03-dynamic-state.jsx —— 可直接复制运行
import { useState } from "react";

function StateDrivenStyle() {
  const [isActive, setIsActive] = useState(false);

  // 根据状态动态计算样式
  const containerStyle = {
    padding: "30px",
    textAlign: "center",
    // 关键：根据 isActive 状态切换背景色
    backgroundColor: isActive ? "#4CAF50" : "#f44336",
    color: "white",
    fontSize: "20px",
    borderRadius: "8px",
    cursor: "pointer",
    transition: "background-color 0.3s ease", // transition 不受限制，可以正常使用
    userSelect: "none",
  };

  return (
    <div style={containerStyle} onClick={() => setIsActive(!isActive)}>
      当前状态：{isActive ? "激活 🟢" : "未激活 🔴"}
      <br />
      <span
        style={{ fontSize: "14px", marginTop: "8px", display: "inline-block" }}
      >
        点击我切换状态
      </span>
    </div>
  );
}

export default StateDrivenStyle;

// 04-dynamic-props.jsx —— 可直接复制运行
function DynamicButton({ size = "medium", variant = "default", children }) {
  // 根据 size prop 计算实际像素值
  const sizeMap = {
    small: { padding: "6px 12px", fontSize: 12 },
    medium: { padding: "10px 20px", fontSize: 16 },
    large: { padding: "14px 28px", fontSize: 20 },
  };

  // 根据 variant prop 计算配色
  const variantMap = {
    default: { backgroundColor: "#e0e0e0", color: "#333" },
    primary: { backgroundColor: "#1976D2", color: "white" },
    danger: { backgroundColor: "#D32F2F", color: "white" },
  };

  // 合并 size 和 variant 的样式
  const buttonStyle = {
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
    fontWeight: "bold",
    transition: "all 0.2s ease",
    // 关键：展开运算符合并两个对象
    ...sizeMap[size],
    ...variantMap[variant],
  };

  return <button style={buttonStyle}>{children || "按钮"}</button>;
}

// 使用示例
function App() {
  return (
    <div style={{ display: "flex", gap: "10px", padding: "20px" }}>
      {/* 小号默认按钮 */}
      <DynamicButton size="small">小按钮</DynamicButton>
      {/* 中号主要按钮 */}
      <DynamicButton size="medium" variant="primary">
        主要按钮
      </DynamicButton>
      {/* 大号危险按钮 */}
      <DynamicButton size="large" variant="danger">
        删除
      </DynamicButton>
    </div>
  );
}

export default App;

/* styles/global-button.css */
.btn {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: #1976d2;
  color: #fff;
}

.btn-primary:hover {
  background-color: #1565c0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.btn-danger {
  background-color: #d32f2f;
  color: #fff;
}

.btn-danger:hover {
  background-color: #b71c1c;
}

.btn-large {
  padding: 14px 36px;
  font-size: 20px;
}

.btn-small {
  padding: 4px 12px;
  font-size: 12px;
}

// 05-external-css.jsx —— 与上面的 CSS 文件配合使用
import "./styles/global-button.css"; // 直接 import CSS 文件

function ExternalCSSDemo() {
  return (
    <div
      style={{
        padding: "30px",
        display: "flex",
        gap: "12px",
        alignItems: "center",
      }}
    >
      {/* className 是 JSX 中对应 HTML class 属性的写法 */}
      <button className="btn btn-primary">普通按钮</button>
      <button className="btn btn-danger">危险按钮</button>
      {/* 多个类名用空格分隔 */}
      <button className="btn btn-primary btn-large">大号按钮</button>
      <button className="btn btn-primary btn-small">小号按钮</button>
    </div>
  );
}

export default ExternalCSSDemo;

/* BEM 命名格式：block__element--modifier */

/* 块（Block）：独立的组件 */
.header {
}

/* 元素（Element）：块的子元素，用双下划线连接 */
.header__logo {
}
.header__nav {
}

/* 修饰符（Modifier）：块或元素的变体，用双连字符连接 */
.header--dark {
}
.header__nav--collapsed {
}
.btn--disabled {
}

/* styles/card.css —— BEM 命名示范 */
.card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card__body {
  padding: 16px;
}

.card__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}

.card__description {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* 修饰符：不同类型的卡片变体 */
.card--featured {
  border-color: #1976d2;
  border-width: 2px;
}

.card--horizontal {
  display: flex;
}

.card--horizontal .card__image {
  width: 200px;
  height: auto;
}

// 06-bem-card.jsx —— BEM 实战
import "./styles/card.css";

function Card({ title, description, imageUrl, featured, horizontal }) {
  // 动态拼接类名
  const cardClass = [
    "card",
    featured && "card--featured", // 条件类名
    horizontal && "card--horizontal", // 条件类名
  ]
    .filter(Boolean) // 过滤掉 false/null/undefined
    .join(" "); // 用空格连接

  return (
    <div className={cardClass}>
      <img className="card__image" src={imageUrl} alt={title} />
      <div className="card__body">
        <h3 className="card__title">{title}</h3>
        <p className="card__description">{description}</p>
      </div>
    </div>
  );
}

export default Card;

/* Button.module.css */

/* 在 CSS Module 中，类名可以随意取，不必担心全局冲突 */
.button {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary {
  background-color: #1976d2;
  color: #ffffff;
}

.primary:hover {
  background-color: #1565c0;
}

.danger {
  background-color: #d32f2f;
  color: #ffffff;
}

.large {
  padding: 14px 36px;
  font-size: 20px;
}

/* 可以使用 :global 声明全局样式（谨慎使用） */
:global(.reset-margin) {
  margin: 0;
}

// 07-css-modules.jsx —— 可直接复制运行
// 注意：import 后得到一个包含所有类名的对象
import styles from "./Button.module.css";

function CSSModulesButton({ variant = "primary", size, children }) {
  // styles 对象结构示例（编译后）：
  // {
  //   button: 'Button_button__a1b2c',
  //   primary: 'Button_primary__d3e4f',
  //   danger: 'Button_danger__g5h6i',
  //   large: 'Button_large__j7k8l'
  // }

  return (
    <button
      className={[
        styles.button, // 基础样式
        styles[variant], // 动态取变体样式（key 就是 CSS 中的类名）
        size === "large" && styles.large, // 条件类名
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {children}
    </button>
  );
}

export default CSSModulesButton;

// 08-css-modules-advance.jsx —— 动态类名处理
import styles from "./Card.module.css";

function Card({ type, isActive, isDisabled }) {
  // 技巧 1：使用数组 + filter + join（推荐，最灵活）
  const cardClass1 = [
    styles.card,
    styles[type], // 动态取对应类名
    isActive && styles.active, // 条件类名
    isDisabled && styles.disabled,
  ]
    .filter(Boolean)
    .join(" ");

  // 技巧 2：使用模板字符串（适合只有两个类名的情况）
  const cardClass2 = `${styles.card} ${isActive ? styles.active : ""}`.trim();

  // 技巧 3：使用 classnames 库（需要安装：npm install classnames）
  // import classNames from 'classnames';
  // const cardClass3 = classNames({
  //   [styles.card]: true,
  //   [styles.active]: isActive,
  //   [styles.disabled]: isDisabled,
  // });

  return <div className={cardClass1}>{/* 卡片内容 */}</div>;
}

export default Card;

/* Demo.module.css */
.title {
  font-size: 20px;
}
.container {
  display: flex;
}

/* 编译后：类名被自动加上了哈希后缀 */
.Demo_title__3xk9f {
  font-size: 20px;
}
.Demo_container__a7b2m {
  display: flex;
}

// import styles from './Demo.module.css' 的实际效果
const styles = {
  title: "Demo_title__3xk9f",
  container: "Demo_container__a7b2m",
};

npm install styled-components

npm install -D @types/styled-components

// 09-styled-basic.jsx —— 可直接复制运行
import styled from "styled-components";

// 创建一个带样式的 div 组件
const Card = styled.div`
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
  /* hover 伪类直接写在模板字符串中 */
  &:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
`;

// 创建带样式的 h2 组件
const Title = styled.h2`
  font-size: 1.5rem;
  color: #333;
  margin: 0 0 12px 0;
`;

// 创建带样式的 p 组件
const Description = styled.p`
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
`;

function StyledComponentsDemo() {
  return (
    <Card>
      <Title>卡片标题</Title>
      <Description>
        styled-components 让你用写 CSS 的方式写组件样式。
        &:hover、媒体查询、动画等都能使用，语法和原生 CSS 完全一致。
      </Description>
    </Card>
  );
}

export default StyledComponentsDemo;

// 10-styled-props.jsx —— Props 驱动的动态样式
import styled from "styled-components";

// 根据 $variant prop 动态改变样式
// 注意：使用 $ 前缀的 transient prop 不会传递到 DOM 元素（React 18+ 推荐）
const StyledButton = styled.button`
  /* 基础样式 */
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;

  /* 根据 $variant prop 动态计算背景色和文字色 */
  background-color: ${({ $variant }) => {
    switch ($variant) {
      case "primary":
        return "#1976D2";
      case "danger":
        return "#D32F2F";
      case "success":
        return "#388E3C";
      default:
        return "#e0e0e0";
    }
  }};

  color: ${({ $variant }) => ($variant === "default" ? "#333" : "#ffffff")};

  /* 根据 $size prop 动态调整尺寸 */
  padding: ${({ $size }) => {
    switch ($size) {
      case "small":
        return "6px 14px";
      case "large":
        return "16px 36px";
      default:
        return "10px 24px";
    }
  }};

  font-size: ${({ $size }) => {
    switch ($size) {
      case "small":
        return "0.8rem";
      case "large":
        return "1.2rem";
      default:
        return "1rem";
    }
  }};

  /* 伪类 hover 样式（也支持动态样式） */
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px
      ${({ $variant }) =>
        $variant === "primary"
          ? "rgba(25, 118, 210, 0.3)"
          : $variant === "danger"
            ? "rgba(211, 47, 47, 0.3)"
            : "rgba(0, 0, 0, 0.1)"};
  }

  /* 伪类 active */
  &:active {
    transform: translateY(0);
  }

  /* 禁用状态 */
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

function PropsDemo() {
  return (
    <div
      style={{
        display: "flex",
        gap: "12px",
        flexWrap: "wrap",
        padding: "20px",
      }}
    >
      <StyledButton $variant="primary">主要按钮</StyledButton>
      <StyledButton $variant="danger">危险按钮</StyledButton>
      <StyledButton $variant="success">成功按钮</StyledButton>
      <StyledButton $variant="default">默认按钮</StyledButton>
      <StyledButton $variant="primary" $size="large">
        大号按钮
      </StyledButton>
      <StyledButton $variant="primary" $size="small">
        小号按钮
      </StyledButton>
      <StyledButton $variant="primary" disabled>
        禁用按钮
      </StyledButton>
    </div>
  );
}

export default PropsDemo;

// 11-styled-responsive.jsx —— 响应式 + 嵌套
import styled from "styled-components";

const ResponsiveCard = styled.div`
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* 嵌套子元素 */
  .card-header {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .card-body {
    color: #555;
    line-height: 1.7;
  }

  /* 媒体查询 —— 语法和原生 CSS 完全一样 */
  @media (max-width: 768px) {
    padding: 16px;

    .card-header {
      font-size: 1.1rem;
    }

    .card-body {
      font-size: 0.9rem;
    }
  }

  @media (max-width: 480px) {
    padding: 12px;
    border-radius: 8px;
  }
`;

export default ResponsiveCard;

// 12-global-style.jsx —— 全局样式
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  /* CSS Reset 或全局基础样式 */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f5f5f5;
    color: #333;
  }

  a {
    text-decoration: none;
    color: inherit;
  }
`;

// 在根组件中使用（放在最顶层）
function App() {
  return (
    <>
      <GlobalStyle />
      {/* 其他组件 */}
    </>
  );
}

export default App;

// 13-styled-theme.jsx —— 企业级按钮组件（完整可运行）
import styled, { ThemeProvider } from "styled-components";

// ==================== 1. 定义主题对象 ====================
const lightTheme = {
  colors: {
    primary: "#1976D2",
    primaryHover: "#1565C0",
    danger: "#D32F2F",
    dangerHover: "#B71C1C",
    success: "#388E3C",
    successHover: "#2E7D32",
    text: "#333",
    textOnPrimary: "#fff",
  },
  radii: {
    sm: "4px",
    md: "8px",
    lg: "12px",
  },
};

const darkTheme = {
  colors: {
    primary: "#64B5F6",
    primaryHover: "#42A5F5",
    danger: "#EF5350",
    dangerHover: "#E53935",
    success: "#66BB6A",
    successHover: "#4CAF50",
    text: "#f5f5f5",
    textOnPrimary: "#1a1a1a",
  },
  radii: {
    sm: "4px",
    md: "8px",
    lg: "12px",
  },
};

// ==================== 2. 创建主题化按钮组件 ====================
const ThemeButton = styled.button`
  /* 基础样式 */
  padding: ${({ $size }) =>
    $size === "large"
      ? "14px 36px"
      : $size === "small"
        ? "6px 14px"
        : "10px 24px"};
  font-size: ${({ $size }) =>
    $size === "large" ? "1.2rem" : $size === "small" ? "0.8rem" : "1rem"};
  font-weight: 600;
  border: none;
  border-radius: ${({ theme }) => theme.radii.md};
  cursor: pointer;
  transition: all 0.2s ease;

  /* 通过 theme 对象获取颜色（核心用法） */
  background-color: ${({ $variant, theme }) =>
    theme.colors[$variant] || theme.colors.primary};
  color: ${({ theme }) => theme.colors.textOnPrimary};

  /* hover 态 */
  &:hover {
    background-color: ${({ $variant, theme }) => {
      const hoverKey = $variant + "Hover";
      return theme.colors[hoverKey] || theme.colors.primaryHover;
    }};
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
  }

  /* 响应式：移动端按钮更宽，方便手指点击 */
  @media (max-width: 480px) {
    width: 100%;
    padding: 12px 0;
    text-align: center;
  }
`;

// ==================== 3. 应用入口 ====================
function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <div style={{ padding: "40px", textAlign: "center" }}>
        <button onClick={() => setIsDark(!isDark)}>
          切换为{isDark ? "浅色" : "深色"}主题
        </button>
        <div
          style={{
            display: "flex",
            gap: "12px",
            marginTop: "20px",
            justifyContent: "center",
          }}
        >
          <ThemeButton $variant="primary">主要按钮</ThemeButton>
          <ThemeButton $variant="danger">危险按钮</ThemeButton>
          <ThemeButton $variant="success">成功按钮</ThemeButton>
          <ThemeButton $variant="primary" $size="large">
            大号按钮
          </ThemeButton>
        </div>
      </div>
    </ThemeProvider>
  );
}

export default App;

npm install @emotion/react @emotion/styled

/** @jsxImportSource @emotion/react */
import styled from "@emotion/styled";

const EmotionButton = styled.button`
  padding: 10px 24px;
  background-color: ${({ variant }) =>
    variant === "primary" ? "#1976D2" : "#e0e0e0"};
  color: ${({ variant }) => (variant === "primary" ? "#fff" : "#333")};
  border: none;
  border-radius: 6px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

// 使用方式完全一样，直接 <EmotionButton variant="primary">点我</EmotionButton>

/** @jsxImportSource @emotion/react */
// 注意：文件顶部必须有 /** @jsxImportSource @emotion/react */ 这行 pragma 注释
import { css } from "@emotion/react";

function EmotionDemo() {
  const baseStyle = css`
    padding: 12px 20px;
    border-radius: 8px;
  `;

  const primaryStyle = css`
    background-color: #1976d2;
    color: white;
    &:hover {
      background-color: #1565c0;
    }
  `;

  // css prop 可以直接传入样式，支持组合
  return <button css={[baseStyle, primaryStyle]}>Emotion css prop 方式</button>;
}

<!-- 传统方式：写自定义类 -->
<button class="my-custom-btn">按钮</button>

<!-- Tailwind 方式：组合原子工具类 -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
  按钮
</button>

# 1. 安装 Tailwind 及其依赖
npm install -D tailwindcss postcss autoprefixer

# 2. 生成配置文件
npx tailwindcss init -p

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 告诉 Tailwind 扫描哪些文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

# 1. 安装 Tailwind
npm install -D tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

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

/* src/index.css */
@import "tailwindcss";

// 14-tailwind-card.jsx —— 可直接复制运行
function TailwindCard({ title, description, imageUrl }) {
  return (
    <div className="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
      {/* 图片区域 */}
      <img className="w-full h-48 object-cover" src={imageUrl} alt={title} />
      {/* 内容区域 */}
      <div className="p-6">
        <h3 className="text-xl font-bold text-gray-800 mb-2">{title}</h3>
        <p className="text-gray-600 text-sm leading-relaxed">{description}</p>
        {/* 底部按钮 */}
        <button className="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors duration-200">
          了解更多
        </button>
      </div>
    </div>
  );
}

export default TailwindCard;

// 15-tailwind-responsive.jsx
function ResponsiveBox() {
  return (
    <div
      className="
        w-full                    /* 默认（移动端）：宽度 100% */
        sm:w-3/4                  /* >=640px：宽度 75% */
        md:w-1/2                  /* >=768px：宽度 50% */
        lg:w-1/3                  /* >=1024px：宽度 33% */
        mx-auto                   /* 水平居中 */
        p-4 sm:p-6 lg:p-8         /* 不同屏幕的内边距 */
        bg-blue-100 sm:bg-green-100 md:bg-yellow-100 lg:bg-purple-100  /* 不同大小不同背景色 */
        text-sm md:text-base lg:text-lg  /* 字体大小响应式 */
        rounded-md lg:rounded-xl
      "
    >
      <p className="text-center">调整浏览器宽度看我的变化！</p>
    </div>
  );
}

export default ResponsiveBox;

// 16-tailwind-states.jsx —— 各种交互状态
function InteractiveInput() {
  return (
    <div className="max-w-md mx-auto space-y-4 p-6">
      {/* hover 态按钮 */}
      <button
        className="
          px-6 py-3 bg-indigo-500 text-white font-semibold rounded-lg
          hover:bg-indigo-600           /* 悬停：背景加深 */
          hover:scale-105                /* 悬停：放大 5% */
          active:scale-95                /* 按下：略微缩小 */
          focus:outline-none             /* 聚焦：去掉默认轮廓 */
          focus:ring-2 focus:ring-indigo-300  /* 聚焦：显示光环 */
          transition-all duration-200    /* 平滑过渡 */
        "
      >
        交互按钮
      </button>

      {/* focus 态输入框 */}
      <input
        type="text"
        placeholder="聚焦我试试"
        className="
          w-full px-4 py-3 border-2 border-gray-300 rounded-lg
          focus:border-blue-500          /* 聚焦：边框变蓝 */
          focus:outline-none             /* 聚焦：去掉默认轮廓 */
          focus:ring-2 focus:ring-blue-200  /* 聚焦：蓝色光环 */
          placeholder:text-gray-400      /* 占位文字颜色 */
          transition-all duration-200
        "
      />

      {/* disabled 态 */}
      <button
        disabled
        className="
          px-6 py-3 bg-gray-400 text-white font-semibold rounded-lg
          cursor-not-allowed opacity-50
        "
      >
        禁用状态
      </button>
    </div>
  );
}

export default InteractiveInput;

// tailwind.config.js —— 自定义主题
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      // 扩展自定义颜色
      colors: {
        brand: {
          50: "#eef2ff",
          100: "#e0e7ff",
          500: "#6366f1", // 主品牌色
          600: "#4f46e5",
          700: "#4338ca",
        },
      },
      // 扩展自定义间距
      spacing: {
        128: "32rem",
        144: "36rem",
      },
      // 扩展自定义字体大小
      fontSize: {
        xxs: "0.625rem",
      },
      // 扩展自定义动画
      animation: {
        "fade-in": "fadeIn 0.5s ease-out",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0", transform: "translateY(-10px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
      },
    },
  },
  plugins: [],
};

<div className="bg-brand-500 text-brand-50 hover:bg-brand-600">
  品牌色按钮
</div>

<div className="animate-fade-in">
  淡入动画
</div>

// 17-tailwind-navbar.jsx —— 完整可运行的响应式导航栏
import { useState } from "react";

function Navbar() {
  const [isOpen, setIsOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  // 监听滚动：超过 50px 时改变导航栏样式
  if (typeof window !== "undefined") {
    window.onscroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
  }

  return (
    <nav
      className={`
        sticky top-0 z-50
        transition-all duration-300
        ${
          isScrolled
            ? "bg-white shadow-lg backdrop-blur-sm bg-white/90"
            : "bg-transparent"
        }
      `}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <div className="flex-shrink-0">
            <span className="text-2xl font-bold text-indigo-600 cursor-pointer">
              MyLogo
            </span>
          </div>

          {/* 桌面端菜单 */}
          <div className="hidden md:flex items-center space-x-8">
            <a
              href="#"
              className="text-gray-700 hover:text-indigo-600 transition-colors font-medium"
            >
              首页
            </a>
            <a
              href="#"
              className="text-gray-700 hover:text-indigo-600 transition-colors font-medium"
            >
              产品
            </a>
            <a
              href="#"
              className="text-gray-700 hover:text-indigo-600 transition-colors font-medium"
            >
              关于
            </a>
            <a
              href="#"
              className="text-gray-700 hover:text-indigo-600 transition-colors font-medium"
            >
              联系
            </a>
            <button className="px-5 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold">
              立即体验
            </button>
          </div>

          {/* 移动端汉堡按钮 */}
          <div className="md:hidden">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className="text-gray-700 hover:text-indigo-600 focus:outline-none p-2"
            >
              {/* 汉堡图标：三条线 */}
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                {isOpen ? (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                ) : (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                )}
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* 移动端折叠菜单 */}
      <div
        className={`
          md:hidden overflow-hidden transition-all duration-300 ease-in-out
          ${isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}
        `}
      >
        <div className="px-4 py-3 space-y-2 bg-white border-t border-gray-100">
          <a
            href="#"
            className="block px-3 py-2 rounded-lg text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-colors"
          >
            首页
          </a>
          <a
            href="#"
            className="block px-3 py-2 rounded-lg text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-colors"
          >
            产品
          </a>
          <a
            href="#"
            className="block px-3 py-2 rounded-lg text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-colors"
          >
            关于
          </a>
          <a
            href="#"
            className="block px-3 py-2 rounded-lg text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-colors"
          >
            联系
          </a>
          <button className="w-full mt-2 px-5 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold">
            立即体验
          </button>
        </div>
      </div>
    </nav>
  );
}

export default Navbar;

npm install clsx

// 18-tailwind-clsx.jsx
import clsx from "clsx";

function StatusBadge({ status }) {
  return (
    <span
      className={clsx(
        // 基础类名（始终存在）
        "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium",
        // 条件类名（根据 status 切换）
        {
          "bg-green-100 text-green-800": status === "success",
          "bg-red-100 text-red-800": status === "error",
          "bg-yellow-100 text-yellow-800": status === "warning",
          "bg-blue-100 text-blue-800": status === "info",
        },
      )}
    >
      {status}
    </span>
  );
}

// 用法：<StatusBadge status="success" />
export default StatusBadge;