Tailwind Best Practices
by asyrafhussin1aa0ff717c10MIT86 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 6 weeks ago
Tailwind CSS patterns and conventions. Use when writing responsive designs, implementing dark mode, creating reusable component styles, configuring Tailwind, or migrating from v3 to v4. Triggers on tasks involving Tailwind classes, responsive design, dark mode, CSS styling, or "migrate to Tailwind v4".
Only the file list is public. File contents are available once the skill is installed in a workspace.
| Path | Size | Type |
|---|---|---|
| AGENTS.md | 12.7 KB | text/markdown |
| metadata.json | 8.7 KB | application/json |
| README.md | 1.8 KB | text/markdown |
| rules/comp-clsx-cn.md | 5.1 KB | text/markdown |
| rules/component-btn-variants.md | 6.1 KB | text/markdown |
| rules/component-card-patterns.md | 6.4 KB | text/markdown |
| rules/component-form-elements.md | 8.3 KB | text/markdown |
| rules/component-modals.md | 7.7 KB | text/markdown |
| rules/component-navigation.md | 8.9 KB | text/markdown |
| rules/component-tables.md | 8.5 KB | text/markdown |
| rules/config-custom-colors.md | 5.7 KB | text/markdown |
| rules/config-custom-fonts.md | 6.4 KB | text/markdown |
| rules/config-custom-spacing.md | 4.7 KB | text/markdown |
| rules/config-extend-theme.md | 5.5 KB | text/markdown |
| rules/config-plugins.md | 7.2 KB | text/markdown |
| rules/config-presets.md | 5.7 KB | text/markdown |
| rules/dark-class-strategy.md | 4.2 KB | text/markdown |
| rules/dark-color-scheme.md | 5 KB | text/markdown |
| rules/dark-custom-colors.md | 5.5 KB | text/markdown |
| rules/dark-media-strategy.md | 4.4 KB | text/markdown |
| rules/dark-setup.md | 5.6 KB | text/markdown |
| rules/dark-transitions.md | 4.7 KB | text/markdown |
| rules/resp-mobile-first.md | 3.4 KB | text/markdown |
| rules/responsive-aspect-ratio.md | 3.1 KB | text/markdown |
| rules/responsive-breakpoint-order.md | 2 KB | text/markdown |
| rules/responsive-container-queries.md | 3.5 KB | text/markdown |
| rules/responsive-fluid-typography.md | 3.2 KB | text/markdown |
| rules/responsive-grid-system.md | 3.7 KB | text/markdown |
| rules/_sections.md | 4 KB | text/markdown |
| rules/_template.md | 4.1 KB | text/markdown |
| rules/v4-custom-utilities.md | 3.9 KB | text/markdown |
| rules/v4-installation.md | 2.5 KB | text/markdown |
| rules/v4-migration.md | 5.7 KB | text/markdown |
| rules/v4-theme-configuration.md | 2.4 KB | text/markdown |
| SKILL.md | 11.1 KB | text/markdown |
Source and attribution
Source:asyrafhussin/agent-skillsinskills/tailwind-best-practicesat commit1aa0ff7
License: MIT
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from asyrafhussin/agent-skills
Web Design Guidelines
asyrafhussin
Audits web UI code for WCAG accessibility, form usability, motion and performance best practices.
Typescript React Patterns
asyrafhussin
Provides 33 TypeScript rules for typing React components, hooks, events, refs, generics, and context.
State Management
asyrafhussin
Reference patterns for React Query v5 and Zustand v5 state management, covering data fetching, caching, mutations and client stores.
Prd Writing
asyrafhussin
Guides an agent through a six-step workflow for writing Product Requirements Documents.
Php Best Practices
asyrafhussin
Reference rules for reviewing PHP 8.x code against type safety, PSR standards, SOLID principles, error handling, performance and security.
Laravel Testing
asyrafhussin
Guidance for writing Laravel 13 tests with Pest PHP 4 or PHPUnit 12, covering HTTP, factories, database assertions, fakes and auth.
More in Software Development
Playground
anthropics
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
M5 Onboard
anthropics
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
Cardputer Buddy
anthropics
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
Web Design Guidelines
vercel-labs
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
Vercel React Native Skills
vercel-labs
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
Vercel React Best Practices
vercel-labs
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.