{"id":"e029dd7c-1484-4140-b9bd-09ba4a5de097","shortId":"a4WwT2","kind":"skill","title":"tailwind-best-practices","tagline":"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 \"m","description":"# Tailwind CSS Best Practices\n\nComprehensive patterns for building consistent, maintainable interfaces with Tailwind CSS v3.4+ and v4. Contains 29 rules covering responsive design, dark mode, component patterns, configuration, and v4 migration.\n\n## Metadata\n\n- **Version:** 1.0.0\n- **Framework:** Tailwind CSS v3.4+ / v4.0+\n- **Rule Count:** 29 rules across 8 categories\n- **License:** MIT\n- **Documentation:** [tailwindcss.com/docs](https://tailwindcss.com/docs)\n\n## Step 1: Detect Tailwind Version\n\n**Always check the version before giving any advice.** v3 and v4 are fundamentally different.\n\nCheck `package.json` for the installed version:\n```json\n{ \"tailwindcss\": \"^3.x\" }  // → v3 rules apply\n{ \"tailwindcss\": \"^4.x\" }  // → v4 rules apply\n```\n\nAlso check for these signals:\n\n| Signal | Version |\n|--------|---------|\n| `tailwind.config.js` exists | v3 |\n| `@import \"tailwindcss\"` in CSS | v4 |\n| `@tailwindcss/vite` in dependencies | v4 |\n| `@tailwindcss/postcss` in dependencies | v4 |\n| `@theme {}` block in CSS | v4 |\n\n**If v3**: Apply `resp-`, `dark-`, `comp-`, `config-` rules. Note that v4 is available.\n**If v4**: Apply `v4-` rules. `tailwind.config.js` patterns do NOT apply — use `@theme {}` instead.\n**If migrating v3 → v4**: Follow `v4-migration` rules directly.\n\n## When to Apply\n\nReference these guidelines when:\n- Writing responsive layouts\n- Implementing dark mode\n- Creating reusable component styles\n- Configuring Tailwind (v3 or v4)\n- Migrating a project from v3 to v4\n- Setting up a new project with v4\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix | Version |\n|----------|----------|--------|--------|---------|\n| 1 | Responsive Design | CRITICAL | `resp-` | v3 / v4 |\n| 2 | Dark Mode | CRITICAL | `dark-` | v3 / v4 |\n| 3 | Component Patterns | HIGH | `comp-` | v3 / v4 |\n| 4 | Custom Configuration | HIGH | `config-` | v3 |\n| 5 | V4 & Migration | HIGH | `v4-` | v4 only |\n| 6 | Spacing & Typography | MEDIUM | `space-` | v3 / v4 |\n| 7 | Animation | MEDIUM | `anim-` | v3 / v4 |\n| 8 | Performance | LOW | `perf-` | v3 / v4 |\n\n## Quick Reference\n\n### 1. Responsive Design (CRITICAL)\n\n- `resp-mobile-first` - Mobile-first approach\n- `resp-breakpoints` - Use breakpoints correctly\n- `resp-container` - Container patterns\n- `resp-grid-flex` - Grid vs Flexbox decisions\n- `resp-hidden-shown` - Conditional display\n\n### 2. Dark Mode (CRITICAL)\n\n- `dark-setup` - Configure dark mode\n- `dark-classes` - Apply dark mode classes\n- `dark-toggle` - Implement dark mode toggle\n- `dark-system-preference` - Respect system preference\n- `dark-colors` - Design for both modes\n\n### 3. Component Patterns (HIGH)\n\n- `comp-clsx-cn` - Conditional classes utility\n- `comp-variants` - Component variants pattern\n- `comp-slots` - Slot-based components\n- `comp-composition` - Composing utilities\n\n### 4. Custom Configuration — v3 only (HIGH)\n\n- `config-extend` - Extend vs override theme\n- `config-colors` - Custom color palette\n- `config-fonts` - Custom fonts\n- `config-screens` - Custom breakpoints\n- `config-plugins` - Using plugins\n\n### 5. V4 & Migration (HIGH)\n\n- `v4-installation` - Install v4 with Vite or PostCSS, `@source`, `@reference`\n- `v4-theme-configuration` - Replace `tailwind.config.js` with `@theme {}` in CSS\n- `v4-custom-utilities` - `@utility`, `@custom-variant`, `@variant`, `@plugin`\n- `v4-migration` - Step-by-step v3 → v4 migration with renamed utilities, `starting:`, `forced-colors:`\n\n### 6. Spacing & Typography (MEDIUM)\n\n- `space-consistent` - Consistent spacing scale\n- `space-margins` - Margin patterns\n- `space-padding` - Padding patterns\n- `typo-scale` - Typography scale\n- `typo-line-height` - Line height\n\n### 7. Animation (MEDIUM)\n\n- `anim-transitions` - Transition utilities\n- `anim-keyframes` - Custom keyframes\n- `anim-reduced-motion` - Respect motion preferences\n\n### 8. Performance (LOW)\n\n- `perf-purge` - Content configuration\n- `perf-jit` - JIT mode benefits\n- `perf-arbitrary` - Arbitrary values usage\n\n## Essential Patterns\n\n### Mobile-First Responsive Design\n\n```tsx\n// ✅ Mobile-first: start with mobile, add larger breakpoints\n<div className=\"\n  w-full           // Mobile: full width\n  md:w-1/2         // Tablet: half width\n  lg:w-1/3         // Desktop: third width\n\">\n  <p className=\"\n    text-sm          // Mobile: small text\n    md:text-base     // Tablet: base text\n    lg:text-lg       // Desktop: large text\n  \">\n    Content\n  </p>\n</div>\n\n// ❌ Don't think desktop-first\n<div className=\"w-1/3 md:w-1/2 sm:w-full\">  // Confusing\n```\n\n### Dark Mode Implementation\n\n**v3 — `tailwind.config.js`:**\n```js\nmodule.exports = { darkMode: 'class' }\n```\n\n**v4 — CSS only, no config file:**\n```css\n@import \"tailwindcss\";\n/* dark mode is class-based by default in v4 — no config needed */\n```\n\n**Component — identical in both versions:**\n```tsx\n<div className=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-white\">\n  <h2 className=\"text-gray-900 dark:text-white\">Title</h2>\n  <p className=\"text-gray-600 dark:text-gray-400\">Description</p>\n</div>\n\nfunction toggleDarkMode() {\n  document.documentElement.classList.toggle('dark')\n}\n```\n\n### Conditional Classes with clsx/cn\n\n```tsx\nimport { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\n// cn utility - merges Tailwind classes intelligently\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\n// Usage\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary' | 'danger'\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  children: React.ReactNode\n}\n\nfunction Button({ variant = 'primary', size = 'md', className, children }: ButtonProps) {\n  return (\n    <button\n      className={cn(\n        // Base styles\n        'inline-flex items-center justify-center rounded-md font-medium transition-colors',\n        'focus:outline-none focus:ring-2 focus:ring-offset-2',\n\n        // Variants\n        {\n          'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500':\n            variant === 'primary',\n          'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500':\n            variant === 'secondary',\n          'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500':\n            variant === 'danger',\n        },\n\n        // Sizes\n        {\n          'px-3 py-1.5 text-sm': size === 'sm',\n          'px-4 py-2 text-base': size === 'md',\n          'px-6 py-3 text-lg': size === 'lg',\n        },\n\n        // Allow override\n        className\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n```\n\n### Theme Configuration — v3 vs v4\n\n**v3 — `tailwind.config.js`:**\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./resources/**/*.{blade.php,js,ts,jsx,tsx}'],\n  darkMode: 'class',\n  theme: {\n    extend: {\n      colors: { primary: { 500: '#0ea5e9', 600: '#0284c7' } },\n      fontFamily: { sans: ['Inter', 'sans-serif'] },\n      spacing: { '18': '4.5rem' },\n    },\n  },\n  plugins: [require('@tailwindcss/forms')],\n}\n```\n\n**v4 — `app.css` only, no JS config:**\n```css\n@import \"tailwindcss\";\n\n@theme {\n  --color-primary-500: #0ea5e9;\n  --color-primary-600: #0284c7;\n  --font-sans: Inter, sans-serif;\n  --spacing-18: 4.5rem;\n  --breakpoint-3xl: 1920px;\n}\n```\n\n> See `v4-theme-configuration` and `v4-migration` rules for full details.\n\n### Responsive Grid Layout\n\n```tsx\n// Product grid - responsive columns\n<div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n  {products.map(product => (\n    <ProductCard key={product.id} product={product} />\n  ))}\n</div>\n\n// Dashboard layout - sidebar + main\n<div className=\"flex flex-col lg:flex-row min-h-screen\">\n  <aside className=\"\n    w-full lg:w-64\n    bg-gray-900\n    lg:min-h-screen\n  \">\n    <nav>...</nav>\n  </aside>\n  <main className=\"flex-1 p-4 lg:p-8\">\n    <div className=\"max-w-7xl mx-auto\">\n      {children}\n    </div>\n  </main>\n</div>\n```\n\n### Form Styling\n\n```tsx\n<form className=\"space-y-6\">\n  <div>\n    <label htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\n      Email\n    </label>\n    <input\n      type=\"email\"\n      id=\"email\"\n      className=\"\n        mt-1 block w-full rounded-md\n        border-gray-300 dark:border-gray-600\n        bg-white dark:bg-gray-800\n        text-gray-900 dark:text-white\n        shadow-sm\n        focus:border-blue-500 focus:ring-blue-500\n        disabled:bg-gray-100 disabled:cursor-not-allowed\n      \"\n    />\n  </div>\n\n  <button\n    type=\"submit\"\n    className=\"\n      w-full flex justify-center\n      py-2 px-4\n      border border-transparent rounded-md\n      shadow-sm text-sm font-medium\n      text-white bg-blue-600\n      hover:bg-blue-700\n      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\n      disabled:opacity-50 disabled:cursor-not-allowed\n    \"\n  >\n    Submit\n  </button>\n</form>\n```\n\n### Animations with Reduced Motion\n\n```tsx\n// Respect user's motion preferences\n<div className=\"\n  transition-transform duration-300\n  hover:scale-105\n  motion-reduce:transition-none\n  motion-reduce:hover:transform-none\n\">\n  Card content\n</div>\n\n// Custom animation\n<div className=\"animate-fade-in motion-reduce:animate-none\">\n  Content\n</div>\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      keyframes: {\n        'fade-in': {\n          '0%': { opacity: '0' },\n          '100%': { opacity: '1' },\n        },\n      },\n      animation: {\n        'fade-in': 'fade-in 0.3s ease-out',\n      },\n    },\n  },\n}\n```\n\n## How to Use\n\nAlways run Step 1 (version detection) first, then read the relevant rule files:\n\n**v3 projects:**\n```\nrules/config-extend-theme.md\nrules/dark-setup.md\nrules/comp-clsx-cn.md\nrules/resp-mobile-first.md\n```\n\n**v4 projects:**\n```\nrules/v4-installation.md\nrules/v4-theme-configuration.md\nrules/v4-custom-utilities.md\n```\n\n**Migrating v3 → v4:**\n```\nrules/v4-migration.md\n```\n\n## References\n\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs) - Official documentation\n- [Responsive Design Guide](https://tailwindcss.com/docs/responsive-design) - Mobile-first patterns\n- [Dark Mode Guide](https://tailwindcss.com/docs/dark-mode) - Theme implementation\n- [Configuration Guide](https://tailwindcss.com/docs/configuration) - Customization\n- [Tailwind UI](https://tailwindui.com) - Official component library\n- [Headless UI](https://headlessui.com) - Accessible components\n- [Heroicons](https://heroicons.com) - Icon library\n\n## Ecosystem Tools\n\n- **Tailwind CSS IntelliSense** - VS Code autocomplete and linting\n- **Prettier Plugin** - Automatic class sorting\n- **tailwind-merge** - Conflict-free class merging\n- **clsx** - Conditional class utility\n- **CVA** - Component variant system\n\n## License\n\nMIT License - See repository for full license text.\n\nThis skill is part of the Agent Skills collection, providing AI-powered development assistance with industry best practices.","tags":["tailwind","best","practices","agent","skills","asyrafhussin","agent-rules","agent-skills","ai-agents","ai-slop","claude-code","code-quality"],"capabilities":["skill","source-asyrafhussin","skill-tailwind-best-practices","topic-agent-rules","topic-agent-skills","topic-ai-agents","topic-ai-slop","topic-claude-code","topic-code-quality","topic-code-review","topic-codex","topic-cursor","topic-laravel","topic-nodejs","topic-react"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/AsyrafHussin/agent-skills/tailwind-best-practices","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add AsyrafHussin/agent-skills","source_repo":"https://github.com/AsyrafHussin/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.469","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 39 github stars · SKILL.md body (10,850 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:58:25.483Z","embedding":null,"createdAt":"2026-05-16T18:57:15.129Z","updatedAt":"2026-05-18T18:58:25.483Z","lastSeenAt":"2026-05-18T18:58:25.483Z","tsv":"'-1.5':782 '-18':881 '-2':713,791 '-3':780,800 '-4':789 '-6':798 '/docs)':1005 '/docs/configuration)':1030 '/docs/dark-mode)':1023 '/docs/responsive-design)':1013 '/docs](https://tailwindcss.com/docs)':95 '/resources':824 '0':950,952 '0.3':963 '0284c7':839,872 '0ea5e9':837,867 '1':97,243,298,955,974 '1.0.0':77 '100':742,953 '18':847 '1920px':887 '2':250,335,718 '200':751 '29':62,85 '3':123,257,373 '3xl':886 '4':129,264,402 '4.5':848,882 '5':270,436 '500':736,756,775,836,866 '6':277,488 '600':723,762,838,871 '7':284,519 '700':731,770 '8':88,290,539 '900':746 'access':1041 'across':87 'add':573 'advic':108 'agent':1093 'ai':1098 'ai-pow':1097 'allow':806 'also':134 'alway':101,971 'anim':285,287,520,523,528,533,926,939,956 'anim-keyfram':527 'anim-reduced-mot':532 'anim-transit':522 'app.css':854 'appli':127,133,164,177,184,200,348 'approach':309 'arbitrari':555,556 'assist':1101 'autocomplet':1054 'automat':1059 'avail':174 'base':395,607,687,794 'benefit':552 'best':3,46,1104 'bg':721,729,740,749,760,768 'bg-blue':720,728 'bg-gray':739,748 'bg-red':759,767 'blade.php':825 'block':158 'blue':722,730,735 'breakpoint':312,314,430,575,885 'breakpoint-3xl':884 'build':51 'button':675,684 'buttonprop':661,682 'card':936 'categori':89,235,239 'center':694,697 'check':102,115,135 'children':672,681,809,920 'class':35,347,351,382,592,606,628,648,831,1060,1068,1072 'class-bas':605 'classnam':670,680,685,808 'classvalu':635,654 'clsx':379,633,637,657,1070 'clsx/cn':630 'cn':380,644,652,686 'code':1053 'collect':1095 'color':368,417,419,487,706,834,864,869 'color-primari':863,868 'column':908 'comp':167,261,378,385,391,398 'comp-clsx-cn':377 'comp-composit':397 'comp-slot':390 'comp-vari':384 'compon':20,69,213,258,374,387,396,615,1036,1042,1075 'compos':400 'composit':399 'comprehens':48 'condit':333,381,627,1071 'config':168,268,409,416,422,427,432,597,613,821,858 'config-color':415 'config-extend':408 'config-font':421 'config-plugin':431 'config-screen':426 'configur':22,71,215,266,342,404,454,546,811,892,1026 'conflict':1066 'conflict-fre':1065 'confus':583 'consist':52,494,495 'contain':61,318,319 'content':545,576,823,937,940 'convent':9 'correct':315 'count':84 'cover':64 'creat':18,211 'critic':246,253,301,338 'css':6,40,45,57,80,147,160,460,594,599,859,1001,1050 'custom':265,403,418,424,429,463,467,530,938,1031 'custom-vari':466 'cva':1074 'danger':665,777 'dark':16,38,67,166,209,251,254,336,340,343,346,349,353,356,360,367,584,602,626,1018 'dark-class':345 'dark-color':366 'dark-setup':339 'dark-system-prefer':359 'dark-toggl':352 'darkmod':591,830 'dashboard':916 'decis':328 'default':609 'depend':151,155 'descript':622 'design':14,37,66,245,300,369,565,1009 'desktop':581 'desktop-first':580 'detail':900 'detect':98,976 'develop':1100 'differ':114 'direct':197 'display':334 'document':92,1002,1007 'document.documentelement.classlist.toggle':625 'eas':966 'ease-out':965 'ecosystem':1047 'email':924 'essenti':559 'exist':142 'export':650 'extend':410,411,833,945 'fade':948,958,961 'fade-in':947,957,960 'file':598,983 'first':305,308,563,569,582,977,1016 'flex':324,691 'flexbox':327 'focus':707,711,714,732,752,771 'follow':192 'font':423,425,702,874 'font-medium':701 'font-san':873 'fontfamili':840 'forc':486 'forced-color':485 'form':921 'framework':78 'free':1067 'full':899,1084 'function':623,651,674 'fundament':113 'give':106 'gray':741,745,750,755 'grid':323,325,902,906 'guid':1010,1020,1027 'guidelin':203 'headless':1038 'headlessui.com':1040 'height':516,518 'heroicon':1043 'heroicons.com':1044 'hidden':331 'high':260,267,273,376,407,439 'hover':727,747,766 'icon':1045 'ident':616 'impact':240 'implement':15,208,355,586,1025 'import':144,600,632,638,819,860 'industri':1103 'inlin':690 'inline-flex':689 'input':653,658 'instal':119,442,443 'instead':187 'intellig':649 'intellisens':1051 'inter':842,876 'interfac':54,660 'involv':33 'item':693 'items-cent':692 'jit':549,550 'js':589,817,826,857,941 'json':121 'jsx':828 'justifi':696 'justify-cent':695 'key':912 'keyfram':529,531,946 'larger':574 'layout':207,903,917 'lg':669,803,805 'librari':1037,1046 'licens':90,1078,1080,1085 'line':515,517 'lint':1056 'low':292,541 'm':43 'main':919 'maintain':53 'margin':500,501 'md':668,679,700,796 'medium':280,286,491,521,703 'merg':643,646,1064,1069 'metadata':75 'migrat':25,74,189,195,220,272,438,473,480,896,995 'mit':91,1079 'mobil':304,307,562,568,572,1015 'mobile-first':306,561,567,1014 'mode':17,39,68,210,252,337,344,350,357,372,551,585,603,1019 'module.exports':590,822,943 'motion':535,537,929,934 'need':614 'new':230 'none':710 'note':170 'offici':1006,1035 'offset':717 'opac':951,954 'outlin':709 'outline-non':708 'overrid':413,807 'package.json':116 'pad':505,506 'palett':420 'part':1090 'pattern':7,49,70,181,259,320,375,389,502,507,560,1017 'perf':293,543,548,554 'perf-arbitrari':553 'perf-jit':547 'perf-purg':542 'perform':291,540 'plugin':433,435,470,850,1058 'postcss':448 'power':1099 'practic':4,47,1105 'prefer':362,365,538,935 'prefix':241 'prettier':1057 'primari':663,677,738,835,865,870 'prioriti':237,238 'product':905,910,914,915 'product.id':913 'productcard':911 'products.map':909 'project':222,231,985,991 'provid':1096 'purg':544 'px':779,788,797 'py':781,790,799 'quick':296 'react.reactnode':673 'read':979 'red':761,769,774 'reduc':534,928 'refer':201,297,450,999 'relev':981 'rem':849,883 'renam':482 'replac':455 'repositori':1082 'requir':851 'resp':165,247,303,311,317,322,330 'resp-breakpoint':310 'resp-contain':316 'resp-grid-flex':321 'resp-hidden-shown':329 'resp-mobile-first':302 'respect':363,536,931 'respons':13,36,65,206,244,299,564,901,907,1008 'return':655,683 'reusabl':19,212 'ring':712,716,734,754,773 'ring-blu':733 'ring-gray':753 'ring-offset':715 'ring-r':772 'round':699 'rounded-md':698 'rule':63,83,86,126,132,169,179,196,234,897,982 'rules/comp-clsx-cn.md':988 'rules/config-extend-theme.md':986 'rules/dark-setup.md':987 'rules/resp-mobile-first.md':989 'rules/v4-custom-utilities.md':994 'rules/v4-installation.md':992 'rules/v4-migration.md':998 'rules/v4-theme-configuration.md':993 'run':972 'san':841,844,875,878 'sans-serif':843,877 'scale':497,510,512 'screen':428 'secondari':664,758 'see':888,1081 'serif':845,879 'set':227 'setup':341 'shown':332 'sidebar':918 'signal':138,139 'size':666,678,778,786,795,804 'skill':1088,1094 'skill-tailwind-best-practices' 'slot':392,394 'slot-bas':393 'sm':667,785,787 'sort':1061 'sourc':449 'source-asyrafhussin' 'space':278,281,489,493,496,499,504,846,880 'space-consist':492 'space-margin':498 'space-pad':503 'start':484,570 'step':96,475,477,973 'step-by-step':474 'string':671 'style':21,41,214,688,922 'submit':925 'system':361,364,1077 'tailwind':2,5,23,34,44,56,79,99,216,642,647,1000,1032,1049,1063 'tailwind-best-practic':1 'tailwind-merg':641,1062 'tailwind.config.js':141,180,456,588,816,942 'tailwindcss':122,128,145,601,820,861 'tailwindcss.com':94,1004,1012,1022,1029 'tailwindcss.com/docs)':1003 'tailwindcss.com/docs/configuration)':1028 'tailwindcss.com/docs/dark-mode)':1021 'tailwindcss.com/docs/responsive-design)':1011 'tailwindcss.com/docs](https://tailwindcss.com/docs)':93 'tailwindcss/forms':852 'tailwindcss/postcss':153 'tailwindcss/vite':149 'tailwindui.com':1034 'task':32 'text':725,744,764,784,793,802,1086 'text-bas':792 'text-gray':743 'text-lg':801 'text-sm':783 'text-whit':724,763 'theme':157,186,414,453,458,810,832,862,891,944,1024 'think':579 'titl':621 'toggl':354,358 'toggledarkmod':624 'tool':1048 'topic-agent-rules' 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-slop' 'topic-claude-code' 'topic-code-quality' 'topic-code-review' 'topic-codex' 'topic-cursor' 'topic-laravel' 'topic-nodejs' 'topic-react' 'transit':524,525,705 'transition-color':704 'trigger':30 'ts':827 'tsx':566,620,631,829,904,923,930 'twmerg':639,656 'type':634,818 'typo':509,514 'typo-line-height':513 'typo-scal':508 'typographi':279,490,511 'ui':1033,1039 'usag':558,659 'use':10,185,313,434,970 'user':932 'util':383,401,464,465,483,526,645,1073 'v3':27,109,125,143,163,190,217,224,248,255,262,269,282,288,294,405,478,587,812,815,984,996 'v3.4':58,81 'v4':29,60,73,111,131,148,152,156,161,172,176,178,191,194,219,226,233,249,256,263,271,274,275,283,289,295,437,441,444,452,462,472,479,593,611,814,853,890,895,990,997 'v4-custom-utilities':461 'v4-installation':440 'v4-migration':193,471,894 'v4-theme-configuration':451,889 'v4.0':82 'valu':557 'variant':386,388,468,469,662,676,719,737,757,776,1076 'version':76,100,104,120,140,242,619,975 'vite':446 'vs':326,412,813,1052 'white':726,765 'write':12,205 'x':124,130","prices":[{"id":"f57dab2c-6d6c-4a1a-9414-c25351ef3708","listingId":"e029dd7c-1484-4140-b9bd-09ba4a5de097","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"AsyrafHussin","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-16T18:57:15.129Z"}],"sources":[{"listingId":"e029dd7c-1484-4140-b9bd-09ba4a5de097","source":"github","sourceId":"AsyrafHussin/agent-skills/tailwind-best-practices","sourceUrl":"https://github.com/AsyrafHussin/agent-skills/tree/main/skills/tailwind-best-practices","isPrimary":false,"firstSeenAt":"2026-05-16T18:57:15.129Z","lastSeenAt":"2026-05-18T18:58:25.483Z"}],"details":{"listingId":"e029dd7c-1484-4140-b9bd-09ba4a5de097","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"AsyrafHussin","slug":"tailwind-best-practices","github":{"repo":"AsyrafHussin/agent-skills","stars":39,"topics":["agent-rules","agent-skills","ai-agents","ai-slop","claude-code","code-quality","code-review","codex","cursor","laravel","nodejs","react","technical-debt","typescript","windsurf"],"license":"mit","html_url":"https://github.com/AsyrafHussin/agent-skills","pushed_at":"2026-05-16T19:24:02Z","description":"Agent skills for AI coding agents (Claude Code, Cursor, Codex, Windsurf) — Laravel, React, TypeScript, MySQL, code quality, technical debt, documentation, and security.","skill_md_sha":"a5c7a2630273a9f7225eb02e1f5edbccc1c3026a","skill_md_path":"skills/tailwind-best-practices/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/AsyrafHussin/agent-skills/tree/main/skills/tailwind-best-practices"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"tailwind-best-practices","license":"MIT","description":"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\"."},"skills_sh_url":"https://skills.sh/AsyrafHussin/agent-skills/tailwind-best-practices"},"updatedAt":"2026-05-18T18:58:25.483Z"}}