tailwind-patterns
Tailwind CSS Patterns (v4 - 2025)
Modern utility-first CSS with CSS-native configuration.
1. Tailwind v4 Architecture
What Changed from v3
| v3 (Legacy) | v4 (Current) |
|---|---|
tailwind.config.js |
CSS-based @theme directive |
| PostCSS plugin | Oxide engine (10x faster) |
| JIT mode | Native, always-on |
| Plugin system | CSS-native features |
@apply directive |
Still works, discouraged |
v4 Core Concepts
More from haniakrim21/everything-claude-code
react-bits
Build stunning animated React UIs using the react-bits component library — 110+ free, customizable text animations, UI components, and backgrounds.
283d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
2page-cro
>
1geo-fundamentals
Generative Engine Optimization for AI search engines (ChatGPT, Claude, Perplexity).
1frontend-design
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboards, or frontend applications.
1frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
1