Tailwind CSS Advanced Patterns

--- name: "Tailwind CSS Advanced Patterns" description: "Advanced Tailwind CSS: config best practices, responsive design (container queries, clamp), dark mode (class + CSS variables), animations (tailwindcss-animate), layout recipes (sticky header, sidebar," version: "1.0.0" author: "skynet" category: "dev" tags: ["tailwind", "css", "responsive", "dark-mode", "animations", "layout"] --- This reference guide outlines advanced Tailwind CSS patterns used to build high-end, scalable, and maintainable SaaS interfaces. --- ### 1. Configuration: `tailwind.config.ts` Best Practices In premium SaaS products, the config is used to enforce a strict design system rather than just adding random values. * **HSL Variables for Dynamic Opacity:** Instead of hardcoding hex values, use CSS variables with HSL. This allows Tailwind's opacity modifier (e.g., `bg-primary/50`) to work with custom colors. * **Extend vs. Override:** Always use `extend` for colors and spacing to keep the default palette available, unless you are building a strictly themed white-label product. ```typescript // tailwind.config.ts import type { Config } from 'tailwindcss' const config: Config = { content: ['./src/**/*.{ts,tsx}'], theme: { extend: { colors: { // Defined in CSS as: --primary: 222.2 47.4% 11.2%; primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', }, sidebar: 'hsl(var(--sidebar-background))', }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } export default config ``` --- ### 2. Responsive Design & Container Queries Modern SaaS moves away from simple screen-size breakpoints toward **Component-Driven Responsiveness**. * **Breakpoint Strategy:** Mobile-first is the law. Use `sm:`, `md:`, `lg:` prefixes to *add* styles as screens grow. * **Fluid Typography:** Use `clamp()` for headings so they scale smoothly without dozens of breakpoint classes. * `text-[clamp(2rem,5vw,3.5rem)]` * **Container Queries:** Use the `@container` plugin to style a component based on its parent's width, not the viewport. * *Parent:* `grid @container` * *Child:* `flex flex-col @md:flex-row` (Changes layout when the *container* hits 768px). --- ### 3. Professional Dark Mode Avoid pure black (`#000`). Premium dark modes use deep navies or charcoal grays to maintain depth and shadows. * **Setup:** Use `darkMode: 'class'` to allow manual toggling via a state provider. * **The Variable Approach:** ```css :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; } ``` * **Semantic Classes:** Use `bg-background text-foreground` everywhere. Then, the `dark:` prefix is only needed for specific overrides like `dark:bg-zinc-950/50`. --- ### 4. High-End Animations SaaS products should feel "snappy" but "soft." Use the `tailwindcss-animate` plugin for entry animations. * **The "Entrance" Pattern:** `animate-in fade-in zoom-in-95 duration-300 slide-in-from-top-2` * **Framer Motion Integration:** Use Tailwind for the initial state and Framer Motion for complex physics. ```tsx <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="w-full bg-card p-6 rounded-xl border shadow-sm" /> ``` --- ### 5. Advanced Layout Patterns #### Sticky Header with Glassmorphism `sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60` #### The Standard SaaS Sidebar Layout ```html <div class="flex min-h-screen"> <aside class="hidden w-64 border-r bg-sidebar md:block"> <!-- Navigation --> </aside> <main class="flex-1 overflow-y-auto"> <header class="h-14 border-b px-6 flex items-center">Dashboard</header> <div class="p-8 max-w-7xl mx-auto"> <!-- Content --> </div> </main> </div> ``` --- ### 6. Component Recipes * **The "Shadcn" Button:** `inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90` * **Glass Card (Modern SaaS):** `relative overflow-hidden rounded-xl border bg-white/50 dark:bg-zinc-900/50 backdrop-blur-md p-6 shadow-sm transition-all hover:shadow-md` * **Animated Gradient Text:** `bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent animate-gradient-x` --- ### 7. Performance & Tooling #### The `cn()` Utility Never concatenate strings manually. Use `clsx` and `tailwind-merge` to handle conditional classes and prevent style conflicts. ```typescript import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } // Usage <div className={cn("bg-red-500", isActive && "bg-blue-500")} /> ``` * **Avoid Dynamic Strings:** Never do `text-${color}-500`. Tailwind's purger won't see it. Use a lookup object: `const colors = { red: 'text-red-500', blue: 'text-blue-500' }`. --- ### 8. Essential Plugins 1. **`@tailwindcss/typography`:** Use `prose dark:prose-invert` for rendered Markdown/Blog content. 2. **`@tailwindcss/forms`:** Resets form elements to be easily styleable with utility classes. 3. **`tailwind-scrollbar`:** Use `scrollbar-hide` or `scrollbar-thin scrollbar-thumb-zinc-200`. 4. **`tailwindcss-animate`:** Standard for Radix UI / Shadcn components. --- ### 9. Tailwind v4: The Future Tailwind v4 is a significant rewrite focusing on "CSS-first" configuration. * **Zero-JS Config:** Configuration moves into CSS using the `@theme` directive. * **Native Nesting:** No more `postcss-nesting` required. * **Automatic Content Detection:** No need to specify `content: []` paths in most cases. * **Migration:** v4 is designed to be backwards compatible, but you will eventually move `tailwind.config.js` logic into your main `.css` file. ```css /* Tailwind v4 Style */ @import "tailwindcss"; @theme { --color-brand: #3b82f6; --font-sans: "Inter", sans-serif; } ``` --- ### 10. Anti-Patterns to Avoid * **Utility Soup:** If a `div` has more than 15 classes, it’s likely a component. Don't use `@apply` in CSS; instead, create a React/Vue component. * **Hardcoded Magic Values:** Avoid `top-[13px]`. Use the spacing scale `top-3` (12px) or `top-3.5` (14px). If you must use a custom value, add it to the config. * **`!important` Abuse:** If you need `!important`, your CSS specificity or selector logic is likely broken. Use `tailwind-merge` to resolve conflicts instead. * **Inconsistent Shadows:** Define `shadow-sm`, `shadow`, and `shadow-md` in your design system and stick to them. Don't use arbitrary `shadow-[0_4px_10px_rgba(0,0,0,0.1)]` on every card.