Loading...
Loading...
Style the dev-quiz-battle app using Tailwind CSS v4 with OKLCH colors, dark mode support, and modern design patterns. Use when creating responsive layouts, applying themes, and implementing visual components.
npx skill4agent add violabg/dev-quiz-battle tailwind-theme-styling@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;
}
}: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);
}// 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>
);
}export const ResponsiveLayout = ({ children }: Props) => {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{children}
</div>
);
};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>
);
};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>;
};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>
);
};blue-500blue-600purple-500purple-600green-500green-600red-500red-600whitegray-900className = "bg-white dark:bg-gray-900 text-gray-900 dark:text-white";