# Tailwind Mastery
> Master Tailwind CSS v4 for building stunning, responsive portfolio designs with advanced patterns, animations, and custom design systems.
- Skill: `jaivishchauhan/tailwind-mastery` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jaivishchauhan/tailwind-mastery`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jaivishchauhan/tailwind-mastery/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: JaivishChauhan (https://skillmd.com/u/jaivishchauhan)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/jaivishchauhan/tailwind-mastery
---
# Tailwind CSS Mastery for Portfolio Design
## Core Philosophy
Tailwind is not just utility classes—it's a **design system engine**. For portfolios, we create distinctive, memorable designs while maintaining consistency. Every spacing, color, and animation decision should feel intentional.
## Tailwind v4 Configuration
### CSS-First Configuration (v4)
```css
/* app/globals.css */
@import "tailwindcss";
/* Custom theme using CSS variables */
@theme {
/* Colors - Portfolio Brand */
--color-brand-50: oklch(0.97 0.02 280);
--color-brand-100: oklch(0.93 0.04 280);
--color-brand-500: oklch(0.55 0.25 280);
--color-brand-600: oklch(0.45 0.25 280);
--color-brand-900: oklch(0.25 0.15 280);
/* Semantic Colors */
--color-background: var(--color-zinc-950);
--color-foreground: var(--color-zinc-50);
--color-muted: var(--color-zinc-400);
--color-accent: var(--color-brand-500);
/* Typography Scale */
--font-sans: "Inter Variable", system-ui, sans-serif;
--font-heading: "Cal Sans", var(--font-sans);
--font-mono: "JetBrains Mono", monospace;
/* Custom Spacing */
--spacing-section: 6rem;
--spacing-container: 1.5rem;
/* Animation Timing */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
/* Border Radius */
--radius-soft: 0.75rem;
--radius-card: 1rem;
}
/* Dark mode (default for portfolio) */
@variant dark (&:where(.dark, .dark *));
/* Light mode override */
@media (prefers-color-scheme: light) {
:root:not(.dark) {
--color-background: var(--color-zinc-50);
--color-foreground: var(--color-zinc-950);
--color-muted: var(--color-zinc-600);
}
}
```
### Legacy Config (v3)
```js
// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config: Config = {
darkMode: 'class',
content: [
'./app/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./content/**/*.mdx',
],
theme: {
extend: {
colors: {
brand: {
50: '#f5f3ff',
500: '#8b5cf6',
600: '#7c3aed',
900: '#4c1d95',
},
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
},
fontFamily: {
sans: ['var(--font-inter)'],
heading: ['var(--font-cal)'],
},
animation: {
'fade-in': 'fade-in 0.5s ease-out forwards',
'slide-up': 'slide-up 0.5s ease-out forwards',
'scale-in': 'scale-in 0.3s ease-out forwards',
'spin-slow': 'spin 3s linear infinite',
'pulse-slow': 'pulse 4s ease-in-out infinite',
'gradient': 'gradient 8s linear infinite',
},
keyframes: {
'fade-in': {
from: { opacity: '0' },
to: { opacity: '1' },
},
'slide-up': {
from: { opacity: '0', transform: 'translateY(20px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
'scale-in': {
from: { opacity: '0', transform: 'scale(0.95)' },
to: { opacity: '1', transform: 'scale(1)' },
},
gradient: {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
},
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'hero-pattern': "url('/images/grid.svg')",
'noise': "url('/images/noise.png')",
},
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
],
};
export default config;
```
## Portfolio Design Patterns
### 1. Hero Section
```tsx
export function HeroSection() {
return (
{/* Gradient Background */}
{/* Grid Pattern Overlay */}
{/* Content */}
{/* Badge */}
Available for work
{/* Heading */}
Building digital
experiences
{/* Description */}
Full-stack developer crafting beautiful, performant web applications.
Currently focused on React, Next.js, and the modern web.
{/* CTA Buttons */}
);
}
```
### 2. Project Card with Hover Effects
```tsx
export function ProjectCard({ project }: { project: Project }) {
return (
{/* Image */}
{/* Content */}
{/* Tags */}
{project.tags.map((tag) => (
{tag}
))}
{/* Title */}
{project.title}
{/* Description */}
{project.description}
{/* Links */}
{children}
);
}
export function BentoCard({
className,
title,
description,
icon: Icon,
}: BentoCardProps) {
return (
{/* Icon */}
{/* Content */}
{title}
{description}
{/* Hover Glow */}
{/* Base gradient */}
{/* Animated gradient orbs */}
{/* Noise overlay */}
{/* Glass card content */}
;
{
/* Navigation with glass */
}
;
```
### 2. Text Gradient
```tsx
Gradient Text
;
{
/* Animated gradient text */
}
Animated Gradient
;
```
### 3. Focus & Active States
```tsx
```
### 4. Container Queries
```tsx
// Parent needs @container class
{/* Responsive based on container, not viewport */}
```
### 5. Group & Peer Modifiers
```tsx
{/* Parent hover affects children */}
{/* Sibling state affects styling */}
Please enter a valid email
```
## Responsive Design
### Mobile-First Approach
```tsx
```
### Common Responsive Patterns
```tsx
{/* Stack to row */}
{/* Grid columns */}
{/* Hidden on mobile */}