majiayu000 Tailwind Theme Styling
This skill covers styling the dev-quiz-battle application with Tailwind CSS v4.
Step-by-step instructions
1. Using Tailwind v4 Syntax
Tailwind 4 uses simplified syntax:
@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
Use OKLCH for CSS custom properties:
: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
Use next-themes for theme switching:
// 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
Use Tailwind breakpoints:
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
Style game components with utility classes:
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
Use Tailwind's animation utilities:
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
Create modern gradient effects:
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)
Dark Mode Classes
Always include dark mode variants:
className = "bg-white dark:bg-gray-900 text-gray-900 dark:text-white";
See Theme Configuration Reference for detailed color system.