tailwind-patterns
Modern utility-first CSS with CSS-native configuration, container queries, and design token architecture.
- Tailwind v4 uses CSS-first
@themedirectives instead of JavaScript config, powered by the Oxide engine for 10x faster compilation - Container queries enable component-level responsive design independent of viewport, complementing traditional breakpoint-based layouts
- Design token architecture spans primitives (raw colors), semantic tokens (purpose-based naming), and component-specific values exposed as CSS variables
- Mobile-first responsive strategy with six breakpoint prefixes (
sm:,md:,lg:,xl:,2xl:) and dark mode support viaclass,media, or custom selectors - Modern layout patterns include flexbox utilities, CSS Grid with auto-fit responsive columns, and asymmetric Bento-style grids; avoid
@applyin favor of component extraction
Tailwind CSS Patterns (v4 - 2025)
Modern utility-first CSS with CSS-native configuration.
When to Use
Use this skill when configuring Tailwind v4, using CSS-first theme and design tokens, or implementing container queries and modern Tailwind patterns.
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 |
More from sickn33/antigravity-awesome-skills
docker-expert
You are an advanced Docker containerization expert with comprehensive, practical knowledge of container optimization, security hardening, multi-stage builds, orchestration patterns, and production deployment strategies based on current industry best practices.
15.0Knodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
11.2Ktypescript-expert
TypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and modern tooling.
8.3Kapi-security-best-practices
Implement secure API design patterns including authentication, authorization, input validation, rate limiting, and protection against common API vulnerabilities
7.0Kclean-code
This skill embodies the principles of \"Clean Code\" by Robert C. Martin (Uncle Bob). Use it to transform \"code that works\" into \"code that is clean.\"
6.6Knextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
5.2K