Back to Details

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";
查看主题配置参考文档了解详细的色彩系统。