tailwind-patterns
Tailwind CSS principles. Responsive design, dark mode, utility patterns.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
skills listSkill Instructions
name: tailwind-patterns description: Tailwind CSS principles. Responsive design, dark mode, utility patterns.
Tailwind Patterns
Utility-first CSS principles.
1. Core Philosophy
| Principle | Meaning |
|---|---|
| Utility-first | Use utilities, not custom CSS |
| Composition | Combine utilities for components |
| Responsive | Mobile-first breakpoints |
| Consistency | Design system via config |
2. Responsive Design
Breakpoint System
| Prefix | Min Width | Target |
|---|---|---|
| (none) | 0px | Mobile |
sm: | 640px | Small tablet |
md: | 768px | Tablet |
lg: | 1024px | Laptop |
xl: | 1280px | Desktop |
2xl: | 1536px | Large desktop |
Mobile-First Pattern
- Start with mobile styles
- Add breakpoints for larger screens
- Example:
w-full md:w-1/2 lg:w-1/3
3. Dark Mode
Approaches
| Method | Use |
|---|---|
class | Manual toggle |
media | System preference |
Pattern
- Add
dark:prefix for dark variants - Example:
bg-white dark:bg-gray-900
4. Common Patterns
Layout
| Pattern | Classes |
|---|---|
| Center | flex items-center justify-center |
| Stack | flex flex-col gap-4 |
| Row | flex flex-row gap-4 |
| Grid | grid grid-cols-1 md:grid-cols-3 gap-4 (Not: Asimetrik/Bento tercih edin!) |
Spacing
| Pattern | Approach |
|---|---|
| Padding | p-{size} or px-, py- |
| Margin | m-{size} or mx-, my- |
| Gap | gap-{size} |
5. Component Patterns
Button Principles
| State | Apply |
|---|---|
| Base | Padding, rounded, font |
| Hover | Background change |
| Focus | Ring for accessibility |
| Disabled | Opacity, cursor |
Card Principles
| Element | Apply |
|---|---|
| Container | Background, rounded, shadow |
| Hover | Shadow increase, subtle scale |
| Padding | Consistent internal spacing |
6. Tailwind v4 Changes (2025)
Key Differences
| v3 | v4 |
|---|---|
| tailwind.config.js | CSS-based @theme |
| Plugin system | Native CSS features |
| postcss | Oxide engine (faster) |
New Features
- CSS-first configuration
- Native nesting support
- Modern CSS variables
- Faster build times
7. Best Practices
| Practice | Why |
|---|---|
| Consistent spacing scale | Visual rhythm |
| Extract components | Reusability |
| Use design tokens | Maintainability |
| Mobile-first | Better CSS cascade |
8. Anti-Patterns
| ❌ Don't | ✅ Do |
|---|---|
| Arbitrary values everywhere | Use design system |
| Inline styles | Use utilities |
| !important | Fix specificity |
| Duplicate class groups | Extract component |
Remember: Tailwind is a design system in code. Respect the constraints.
More by xenitV1
View allAPI design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination. Teaches thinking, not fixed patterns.
Defines different operational modes for AI behavior. Each mode optimizes for specific scenarios like brainstorming, implementation, or debugging.
Database design principles and decision-making. Schema design, indexing strategy, ORM selection, serverless databases. Teaches thinking, not fixed SQL.
Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.