tailwind-theme-styling

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind Theme Styling

Tailwind主题样式设置

This skill covers styling the dev-quiz-battle application with Tailwind CSS v4.

本技能介绍如何使用Tailwind CSS v4为dev-quiz-battle应用设置样式。

Step-by-step instructions

分步说明

1. Using Tailwind v4 Syntax

1. 使用Tailwind v4语法

Tailwind 4 uses simplified syntax:

css

@import "tailwindcss";

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
  }

  .card {
    @apply rounded-lg border border-gray-200 shadow-sm p-6;
  }
}

Tailwind 4采用简化语法：

css

@import "tailwindcss";

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
  }

  .card {
    @apply rounded-lg border border-gray-200 shadow-sm p-6;
  }
}

2. OKLCH Color Format

2. OKLCH色彩格式

Use OKLCH for CSS custom properties:

css

:root {
  --color-primary: oklch(0.65 0.15 260);
  --color-accent: oklch(0.7 0.12 40);
  --color-success: oklch(0.65 0.15 150);
  --color-error: oklch(0.65 0.22 30);
}

.element {
  color: var(--color-primary);
}

为CSS自定义属性使用OKLCH格式：

css

:root {
  --color-primary: oklch(0.65 0.15 260);
  --color-accent: oklch(0.7 0.12 40);
  --color-success: oklch(0.65 0.15 150);
  --color-error: oklch(0.65 0.22 30);
}

.element {
  color: var(--color-primary);
}

3. Dark Mode Implementation

3. 暗色模式实现

Use next-themes for theme switching:

typescript

// In layout.tsx
import { ThemeProvider } from "@/components/theme-provider";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

使用next-themes进行主题切换：

typescript

// In layout.tsx
import { ThemeProvider } from "@/components/theme-provider";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

4. Responsive Design

4. 响应式设计

Use Tailwind breakpoints:

typescript

export const ResponsiveLayout = ({ children }: Props) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {children}
    </div>
  );
};

使用Tailwind断点：

typescript

export const ResponsiveLayout = ({ children }: Props) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {children}
    </div>
  );
};

5. Component Styling

5. 组件样式设置

Style game components with utility classes:

typescript

export const GameCard = ({ title, children }: Props) => {
  return (
    <div className="rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm p-6 hover:shadow-md transition-shadow bg-white dark:bg-gray-900">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
        {title}
      </h3>
      {children}
    </div>
  );
};

使用工具类为游戏组件设置样式：

typescript

export const GameCard = ({ title, children }: Props) => {
  return (
    <div className="rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm p-6 hover:shadow-md transition-shadow bg-white dark:bg-gray-900">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
        {title}
      </h3>
      {children}
    </div>
  );
};

6. Animation and Transitions

6. 动画与过渡效果

Use Tailwind's animation utilities:

typescript

export const LoadingSpinner = () => {
  return (
    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
  );
};

export const FadeInComponent = ({ children }: Props) => {
  return <div className="animate-fade-in duration-300">{children}</div>;
};

使用Tailwind的动画工具类：

typescript

export const LoadingSpinner = () => {
  return (
    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
  );
};

export const FadeInComponent = ({ children }: Props) => {
  return <div className="animate-fade-in duration-300">{children}</div>;
};

7. Gradient Text

7. 渐变文字

Create modern gradient effects:

typescript

export const GradientHeading = ({ text }: Props) => {
  return (
    <h1 className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent text-4xl font-bold">
      {text}
    </h1>
  );
};

创建现代渐变效果：

typescript

export const GradientHeading = ({ text }: Props) => {
  return (
    <h1 className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent text-4xl font-bold">
      {text}
    </h1>
  );
};

Common Patterns

常见模式

Card components: Border, shadow, rounded corners
Buttons: Primary, secondary, danger variants
Forms: Input styling, error states, labels
Navigation: Sticky headers, active states
Games: Score displays, player cards, status badges

卡片组件：边框、阴影、圆角
按钮：主按钮、次级按钮、危险按钮变体
表单：输入框样式、错误状态、标签
导航：粘性头部、激活状态
游戏相关：分数展示、玩家卡片、状态徽章

Color Palette

调色板

Use these Tailwind colors throughout:

Primary:
```
blue-500
```
,
```
blue-600
```
Secondary:
```
purple-500
```
,
```
purple-600
```
Success:
```
green-500
```
,
```
green-600
```
Error:
```
red-500
```
,
```
red-600
```
Background:
```
white
```
/
```
gray-900
```
(dark mode)

在全局使用以下Tailwind颜色：

主色：
```
blue-500
```
,
```
blue-600
```
次色：
```
purple-500
```
,
```
purple-600
```
成功色：
```
green-500
```
,
```
green-600
```
错误色：
```
red-500
```
,
```
red-600
```
背景色：
```
white
```
/
```
gray-900
```
（暗色模式）

Dark Mode Classes

暗色模式类

Always include dark mode variants:

typescript

className = "bg-white dark:bg-gray-900 text-gray-900 dark:text-white";

See Theme Configuration Reference for detailed color system.

始终包含暗色模式变体：

typescript

className = "bg-white dark:bg-gray-900 text-gray-900 dark:text-white";

查看主题配置参考文档了解详细的色彩系统。