Dokhacgiakhoa Tailwind CSS Patterns (v4 - 2025)
Modern utility-first CSS with CSS-native configuration.
Tailwind Patterns by Dokhacgiakhoa · 9faf491
npx skillmds@latest add dokhacgiakhoa/tailwind-patterns File contents
---name: tailwind-patternsdescription: Tailwind CSS v4 principles and modern design tokens.---
# Tailwind CSS Patterns (v4 - 2025)
> Modern utility-first CSS with CSS-native configuration.
---
## 1. Tailwind v4 Architecture
## 🧠 Knowledge Modules (Fractal Skills)
### 1. [What Changed from v3](./sub-skills/what-changed-from-v3.md)
### 2. [v4 Core Concepts](./sub-skills/v4-core-concepts.md)
### 3. [Theme Definition](./sub-skills/theme-definition.md)
### 4. [When to Extend vs Override](./sub-skills/when-to-extend-vs-override.md)
### 5. [Breakpoint vs Container](./sub-skills/breakpoint-vs-container.md)
### 6. [Container Query Usage](./sub-skills/container-query-usage.md)
### 7. [When to Use](./sub-skills/when-to-use.md)
### 8. [Breakpoint System](./sub-skills/breakpoint-system.md)
### 9. [Mobile-First Principle](./sub-skills/mobile-first-principle.md)
### 10. [Configuration Strategies](./sub-skills/configuration-strategies.md)
### 11. [Dark Mode Pattern](./sub-skills/dark-mode-pattern.md)
### 12. [Flexbox Patterns](./sub-skills/flexbox-patterns.md)
### 13. [Grid Patterns](./sub-skills/grid-patterns.md)
### 14. [OKLCH vs RGB/HSL](./sub-skills/oklch-vs-rgbhsl.md)
### 15. [Color Token Architecture](./sub-skills/color-token-architecture.md)
### 16. [Font Stack Pattern](./sub-skills/font-stack-pattern.md)
### 17. [Type Scale](./sub-skills/type-scale.md)
### 18. [Built-in Animations](./sub-skills/built-in-animations.md)
### 19. [Transition Patterns](./sub-skills/transition-patterns.md)
### 20. [When to Extract](./sub-skills/when-to-extract.md)
### 21. [Extraction Methods](./sub-skills/extraction-methods.md)
Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI/tree/main/.agent/skills/tailwind-patterns commit 9faf4910d9
Frequently asked questions
Run npx skillmds@latest add dokhacgiakhoa/tailwind-patterns in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Tailwind CSS v4 principles and modern design tokens. It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Dokhacgiakhoa (@dokhacgiakhoa) published this skill. Their other Agent Skills are listed on their SkillMD profile.