csh/playbook
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📦 deps(skills): sync thirdparty skills

Browse Source
This commit is contained in:
ci[bot]
2026-08-14 17:16:06 +08:00
parent 5d73964db8
commit 7233646398
68 changed files with 66265 additions and 4343 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/thirdparty/ui-ux-pro-max/data/stacks/html-tailwind.csv
Vendored
+60 -56
View File
@@ -1,56 +1,60 @@
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
1,Animation,Use Tailwind animate utilities,Built-in animations are optimized and respect reduced-motion,Use animate-pulse animate-spin animate-ping,Custom @keyframes for simple effects,animate-pulse,@keyframes pulse {...},Medium,https://tailwindcss.com/docs/animation
2,Animation,Limit bounce animations,Continuous bounce is distracting and causes motion sickness,Use animate-bounce sparingly on CTAs only,Multiple bounce animations on page,Single CTA with animate-bounce,5+ elements with animate-bounce,High,
3,Animation,Transition duration,Use appropriate transition speeds for UI feedback,duration-150 to duration-300 for UI,duration-1000 or longer for UI elements,transition-all duration-200,transition-all duration-1000,Medium,https://tailwindcss.com/docs/transition-duration
4,Animation,Hover transitions,Add smooth transitions on hover state changes,Add transition class with hover states,Instant hover changes without transition,hover:bg-gray-100 transition-colors,hover:bg-gray-100 (no transition),Low,
5,Z-Index,Use Tailwind z-* scale,Consistent stacking context with predefined scale,z-0 z-10 z-20 z-30 z-40 z-50,Arbitrary z-index values,z-50 for modals,z-[9999],Medium,https://tailwindcss.com/docs/z-index
6,Z-Index,Fixed elements z-index,Fixed navigation and modals need explicit z-index,z-50 for nav z-40 for dropdowns,Relying on DOM order for stacking,fixed top-0 z-50,fixed top-0 (no z-index),High,
7,Z-Index,Negative z-index for backgrounds,Use negative z-index for decorative backgrounds,z-[-1] for background elements,Positive z-index for backgrounds,-z-10 for decorative,z-10 for background,Low,
8,Layout,Container max-width,Limit content width for readability,max-w-7xl mx-auto for main content,Full-width content on large screens,max-w-7xl mx-auto px-4,w-full (no max-width),Medium,https://tailwindcss.com/docs/container
9,Layout,Responsive padding,Adjust padding for different screen sizes,px-4 md:px-6 lg:px-8,Same padding all sizes,px-4 sm:px-6 lg:px-8,px-8 (same all sizes),Medium,
10,Layout,Grid gaps,Use consistent gap utilities for spacing,gap-4 gap-6 gap-8,Margins on individual items,grid gap-6,grid with mb-4 on each item,Medium,https://tailwindcss.com/docs/gap
11,Layout,Flexbox alignment,Use flex utilities for alignment,items-center justify-between,Multiple nested wrappers,flex items-center justify-between,Nested divs for alignment,Low,
12,Images,Aspect ratio,Maintain consistent image aspect ratios,aspect-video aspect-square,No aspect ratio on containers,aspect-video rounded-lg,No aspect control,Medium,https://tailwindcss.com/docs/aspect-ratio
13,Images,Object fit,Control image scaling within containers,object-cover object-contain,Stretched distorted images,object-cover w-full h-full,No object-fit,Medium,https://tailwindcss.com/docs/object-fit
14,Images,Lazy loading,Defer loading of off-screen images,loading='lazy' on images,All images eager load,<img loading='lazy'>,<img> without lazy,High,
15,Images,Responsive images,Serve appropriate image sizes,srcset and sizes attributes,Same large image all devices,srcset with multiple sizes,4000px image everywhere,High,
16,Typography,Prose plugin,Use @tailwindcss/typography for rich text,prose prose-lg for article content,Custom styles for markdown,prose prose-lg max-w-none,Custom text styling,Medium,https://tailwindcss.com/docs/typography-plugin
17,Typography,Line height,Use appropriate line height for readability,leading-relaxed for body text,Default tight line height,leading-relaxed (1.625),leading-none or leading-tight,Medium,https://tailwindcss.com/docs/line-height
18,Typography,Font size scale,Use consistent text size scale,text-sm text-base text-lg text-xl,Arbitrary font sizes,text-lg,text-[17px],Low,https://tailwindcss.com/docs/font-size
19,Typography,Text truncation,Handle long text gracefully,truncate or line-clamp-*,Overflow breaking layout,line-clamp-2,No overflow handling,Medium,https://tailwindcss.com/docs/text-overflow
20,Colors,Opacity utilities,Use color opacity utilities,bg-black/50 text-white/80,Separate opacity class,bg-black/50,bg-black opacity-50,Low,https://tailwindcss.com/docs/background-color
21,Colors,Dark mode,Support dark mode with dark: prefix,dark:bg-gray-900 dark:text-white,No dark mode support,dark:bg-gray-900,Only light theme,Medium,https://tailwindcss.com/docs/dark-mode
22,Colors,Semantic colors,Use semantic color naming in config,primary secondary danger success,Generic color names in components,bg-primary,bg-blue-500 everywhere,Medium,
23,Spacing,Consistent spacing scale,Use Tailwind spacing scale consistently,p-4 m-6 gap-8,Arbitrary pixel values,p-4 (1rem),p-[15px],Low,https://tailwindcss.com/docs/customizing-spacing
24,Spacing,Negative margins,Use sparingly for overlapping effects,-mt-4 for overlapping elements,Negative margins for layout fixing,-mt-8 for card overlap,-m-2 to fix spacing issues,Medium,
25,Spacing,Space between,Use space-y-* for vertical lists,space-y-4 on flex/grid column,Margin on each child,space-y-4,Each child has mb-4,Low,https://tailwindcss.com/docs/space
26,Forms,Focus states,Always show focus indicators,focus:ring-2 focus:ring-blue-500,Remove focus outline,focus:ring-2 focus:ring-offset-2,focus:outline-none (no replacement),High,
27,Forms,Input sizing,Consistent input dimensions,h-10 px-3 for inputs,Inconsistent input heights,h-10 w-full px-3,Various heights per input,Medium,
28,Forms,Disabled states,Clear disabled styling,disabled:opacity-50 disabled:cursor-not-allowed,No disabled indication,disabled:opacity-50,Same style as enabled,Medium,
29,Forms,Placeholder styling,Style placeholder text appropriately,placeholder:text-gray-400,Dark placeholder text,placeholder:text-gray-400,Default dark placeholder,Low,
30,Responsive,Mobile-first approach,Start with mobile styles and add breakpoints,Default mobile + md: lg: xl:,Desktop-first approach,text-sm md:text-base,text-base max-md:text-sm,Medium,https://tailwindcss.com/docs/responsive-design
31,Responsive,Breakpoint testing,Test at standard breakpoints,320 375 768 1024 1280 1536,Only test on development device,Test all breakpoints,Single device testing,High,
32,Responsive,Hidden/shown utilities,Control visibility per breakpoint,hidden md:block,Different content per breakpoint,hidden md:flex,Separate mobile/desktop components,Low,https://tailwindcss.com/docs/display
33,Buttons,Button sizing,Consistent button dimensions,px-4 py-2 or px-6 py-3,Inconsistent button sizes,px-4 py-2 text-sm,Various padding per button,Medium,
34,Buttons,Touch targets,Minimum 44px touch target on mobile,min-h-[44px] on mobile,Small buttons on mobile,min-h-[44px] min-w-[44px],h-8 w-8 on mobile,High,
35,Buttons,Loading states,Show loading feedback,disabled + spinner icon,Clickable during loading,<Button disabled><Spinner/></Button>,Button without loading state,High,
36,Buttons,Icon buttons,Accessible icon-only buttons,aria-label on icon buttons,Icon button without label,<button aria-label='Close'><XIcon/></button>,<button><XIcon/></button>,High,
37,Cards,Card structure,Consistent card styling,rounded-lg shadow-md p-6,Inconsistent card styles,rounded-2xl shadow-lg p-6,Mixed card styling,Low,
38,Cards,Card hover states,Interactive cards should have hover feedback,hover:shadow-lg transition-shadow,No hover on clickable cards,hover:shadow-xl transition-shadow,Static cards that are clickable,Medium,
39,Cards,Card spacing,Consistent internal card spacing,space-y-4 for card content,Inconsistent internal spacing,space-y-4 or p-6,Mixed mb-2 mb-4 mb-6,Low,
40,Accessibility,Screen reader text,Provide context for screen readers,sr-only for hidden labels,Missing context for icons,<span class='sr-only'>Close menu</span>,No label for icon button,High,https://tailwindcss.com/docs/screen-readers
41,Accessibility,Focus visible,Show focus only for keyboard users,focus-visible:ring-2,Focus on all interactions,focus-visible:ring-2,focus:ring-2 (shows on click too),Medium,
42,Accessibility,Reduced motion,Respect user motion preferences,motion-reduce:animate-none,Ignore motion preferences,motion-reduce:transition-none,No reduced motion support,High,https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion
43,Performance,Configure content paths,Tailwind needs to know where classes are used,Use 'content' array in config,Use deprecated 'purge' option (v2),"content: ['./src/**/*.{js,ts,jsx,tsx}']",purge: [...],High,https://tailwindcss.com/docs/content-configuration
44,Performance,JIT mode,Use JIT for faster builds and smaller bundles,JIT enabled (default in v3),Full CSS in development,Tailwind v3 defaults,Tailwind v2 without JIT,Medium,
45,Performance,Avoid @apply bloat,Use @apply sparingly,Direct utilities in HTML,Heavy @apply usage,class='px-4 py-2 rounded',@apply px-4 py-2 rounded;,Low,https://tailwindcss.com/docs/reusing-styles
46,Plugins,Official plugins,Use official Tailwind plugins,@tailwindcss/forms typography aspect-ratio,Custom implementations,@tailwindcss/forms,Custom form reset CSS,Medium,https://tailwindcss.com/docs/plugins
47,Plugins,Custom utilities,Create utilities for repeated patterns,Custom utility in config,Repeated arbitrary values,Custom shadow utility,"shadow-[0_4px_20px_rgba(0,0,0,0.1)] everywhere",Medium,
48,Layout,Container Queries,Use @container for component-based responsiveness,Use @container and @lg: etc.,Media queries for component internals,@container @lg:grid-cols-2,@media (min-width: ...) inside component,Medium,https://github.com/tailwindlabs/tailwindcss-container-queries
49,Interactivity,Group and Peer,Style based on parent/sibling state,group-hover peer-checked,JS for simple state interactions,group-hover:text-blue-500,onMouseEnter={() => setHover(true)},Low,https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
50,Customization,Arbitrary Values,Use [] for one-off values,w-[350px] for specific needs,Creating config for single use,top-[117px] (if strictly needed),style={{ top: '117px' }},Low,https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
51,Colors,Theme color variables,Define colors in Tailwind theme and use directly,bg-primary text-success border-cta,bg-[var(--color-primary)] text-[var(--color-success)],bg-primary,bg-[var(--color-primary)],Medium,https://tailwindcss.com/docs/customizing-colors
52,Colors,Use bg-linear-to-* for gradients,Tailwind v4 uses bg-linear-to-* syntax for gradients,bg-linear-to-r bg-linear-to-b,bg-gradient-to-* (deprecated in v4),bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500 to-purple-500,Medium,https://tailwindcss.com/docs/background-image
53,Layout,Use shrink-0 shorthand,Shorter class name for flex-shrink-0,shrink-0 shrink,flex-shrink-0 flex-shrink,shrink-0,flex-shrink-0,Low,https://tailwindcss.com/docs/flex-shrink
54,Layout,Use size-* for square dimensions,Single utility for equal width and height,size-4 size-8 size-12,Separate h-* w-* for squares,size-6,h-6 w-6,Low,https://tailwindcss.com/docs/size
55,Images,SVG explicit dimensions,Add width/height attributes to SVGs to prevent layout shift before CSS loads,<svg class='size-6' width='24' height='24'>,SVG without explicit dimensions,<svg class='size-6' width='24' height='24'>,<svg class='size-6'>,High,
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
1,Animation,Use Tailwind animate utilities,Built-in animations are optimized and respect reduced-motion,Use animate-pulse animate-spin animate-ping,Custom @keyframes for simple effects,animate-pulse,@keyframes pulse {...},Medium,https://tailwindcss.com/docs/animation,html-tailwind 4.3,active,2026-08-13
2,Animation,Limit bounce animations,Continuous bounce is distracting and can conflict with reduced-motion preferences,Use animate-bounce sparingly and add motion-reduce:animate-none,Multiple unbounded bounce animations,animate-bounce motion-reduce:animate-none,5+ elements with animate-bounce,High,https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion,html-tailwind 4.3,active,2026-08-13
3,Animation,Transition duration,Use appropriate transition speeds for UI feedback,duration-150 to duration-300 for UI,duration-1000 or longer for UI elements,transition-all duration-200,transition-all duration-1000,Medium,https://tailwindcss.com/docs/transition-duration,html-tailwind 4.3,active,2026-08-13
4,Animation,Hover transitions,Add smooth transitions on hover state changes,Add transition class with hover states,Instant hover changes without transition,hover:bg-gray-100 transition-colors,hover:bg-gray-100 (no transition),Low,,html-tailwind 4.3,active,2026-08-13
5,Z-Index,Use Tailwind z-* scale,Consistent stacking context with predefined scale,z-0 z-10 z-20 z-30 z-40 z-50,Arbitrary z-index values,z-50 for modals,z-[9999],Medium,https://tailwindcss.com/docs/z-index,html-tailwind 4.3,active,2026-08-13
6,Z-Index,Fixed elements z-index,Fixed navigation and overlays need an intentional stacking order,Use documented z-* tokens for the application layer,Rely only on DOM order for stacking,fixed top-0 z-50,fixed top-0 (no z-index),High,https://tailwindcss.com/docs/z-index,html-tailwind 4.3,active,2026-08-13
7,Z-Index,Negative z-index for backgrounds,Use negative z-index for decorative backgrounds,z-[-1] for background elements,Positive z-index for backgrounds,-z-10 for decorative,z-10 for background,Low,,html-tailwind 4.3,active,2026-08-13
8,Layout,Container max-width,Limit content width for readability,max-w-7xl mx-auto for main content,Full-width content on large screens,max-w-7xl mx-auto px-4,w-full (no max-width),Medium,https://tailwindcss.com/docs/container,html-tailwind 4.3,active,2026-08-13
9,Layout,Responsive padding,Adjust padding for different screen sizes,px-4 md:px-6 lg:px-8,Same padding all sizes,px-4 sm:px-6 lg:px-8,px-8 (same all sizes),Medium,,html-tailwind 4.3,active,2026-08-13
10,Layout,Grid gaps,Use consistent gap utilities for spacing,gap-4 gap-6 gap-8,Margins on individual items,grid gap-6,grid with mb-4 on each item,Medium,https://tailwindcss.com/docs/gap,html-tailwind 4.3,active,2026-08-13
11,Layout,Flexbox alignment,Use flex utilities for alignment,items-center justify-between,Multiple nested wrappers,flex items-center justify-between,Nested divs for alignment,Low,,html-tailwind 4.3,active,2026-08-13
12,Images,Aspect ratio,Maintain consistent image aspect ratios,aspect-video aspect-square,No aspect ratio on containers,aspect-video rounded-lg,No aspect control,Medium,https://tailwindcss.com/docs/aspect-ratio,html-tailwind 4.3,active,2026-08-13
13,Images,Object fit,Control image scaling within containers,object-cover object-contain,Stretched distorted images,object-cover w-full h-full,No object-fit,Medium,https://tailwindcss.com/docs/object-fit,html-tailwind 4.3,active,2026-08-13
14,Images,Reserve image space,Give image wrappers an aspect ratio or dimensions to avoid layout shifts,aspect-video or explicit dimensions,Let images determine layout after load,aspect-video overflow-hidden,Image without reserved space,High,https://tailwindcss.com/docs/aspect-ratio,html-tailwind 4.3,active,2026-08-13
15,Images,Responsive image layout,Adjust image sizing and placement mobile-first with breakpoint variants,w-full md:w-1/2,Use a fixed desktop width at every viewport,w-full md:max-w-xl,w-[900px],High,https://tailwindcss.com/docs/responsive-design,html-tailwind 4.3,active,2026-08-13
16,Typography,Prose plugin,Use @tailwindcss/typography for rich text,prose prose-lg for article content,Custom styles for markdown,prose prose-lg max-w-none,Custom text styling,Medium,https://tailwindcss.com/docs/typography-plugin,html-tailwind 4.3,active,2026-08-13
17,Typography,Line height,Use appropriate line height for readability,leading-relaxed for body text,Default tight line height,leading-relaxed (1.625),leading-none or leading-tight,Medium,https://tailwindcss.com/docs/line-height,html-tailwind 4.3,active,2026-08-13
18,Typography,Font size scale,Use consistent text size scale,text-sm text-base text-lg text-xl,Arbitrary font sizes,text-lg,text-[17px],Low,https://tailwindcss.com/docs/font-size,html-tailwind 4.3,active,2026-08-13
19,Typography,Text truncation,Handle long text gracefully,truncate or line-clamp-*,Overflow breaking layout,line-clamp-2,No overflow handling,Medium,https://tailwindcss.com/docs/text-overflow,html-tailwind 4.3,active,2026-08-13
20,Colors,Opacity utilities,Use color opacity utilities,bg-black/50 text-white/80,Separate opacity class,bg-black/50,bg-black opacity-50,Low,https://tailwindcss.com/docs/background-color,html-tailwind 4.3,active,2026-08-13
21,Colors,Dark mode,Support dark mode with dark: prefix,dark:bg-gray-900 dark:text-white,No dark mode support,dark:bg-gray-900,Only light theme,Medium,https://tailwindcss.com/docs/dark-mode,html-tailwind 4.3,active,2026-08-13
22,Colors,Semantic colors,Define semantic design tokens with CSS-first @theme,Declare --color-primary and related tokens in @theme,Repeat palette utilities in components,bg-primary,bg-blue-500 everywhere,Medium,https://tailwindcss.com/docs/theme,html-tailwind 4.3,active,2026-08-13
23,Spacing,Consistent spacing scale,Use Tailwind spacing scale consistently,p-4 m-6 gap-8,Arbitrary pixel values,p-4 (1rem),p-[15px],Low,https://tailwindcss.com/docs/customizing-spacing,html-tailwind 4.3,active,2026-08-13
24,Spacing,Negative margins,Use sparingly for overlapping effects,-mt-4 for overlapping elements,Negative margins for layout fixing,-mt-8 for card overlap,-m-2 to fix spacing issues,Medium,,html-tailwind 4.3,active,2026-08-13
25,Spacing,Space between,Use space-y-* for vertical lists,space-y-4 on flex/grid column,Margin on each child,space-y-4,Each child has mb-4,Low,https://tailwindcss.com/docs/space,html-tailwind 4.3,active,2026-08-13
26,Forms,Focus states,Always show focus indicators,focus:ring-2 focus:ring-blue-500,Remove focus outline,focus:ring-2 focus:ring-offset-2,focus:outline-none (no replacement),High,https://tailwindcss.com/docs/hover-focus-and-other-states#focus,html-tailwind 4.3,active,2026-08-13
27,Forms,Input sizing,Consistent input dimensions,h-10 px-3 for inputs,Inconsistent input heights,h-10 w-full px-3,Various heights per input,Medium,,html-tailwind 4.3,active,2026-08-13
28,Forms,Disabled states,Clear disabled styling,disabled:opacity-50 disabled:cursor-not-allowed,No disabled indication,disabled:opacity-50,Same style as enabled,Medium,,html-tailwind 4.3,active,2026-08-13
29,Forms,Placeholder styling,Style placeholder text appropriately,placeholder:text-gray-400,Dark placeholder text,placeholder:text-gray-400,Default dark placeholder,Low,,html-tailwind 4.3,active,2026-08-13
30,Responsive,Mobile-first approach,Start with mobile styles and add breakpoints,Default mobile + md: lg: xl:,Desktop-first approach,text-sm md:text-base,text-base max-md:text-sm,Medium,https://tailwindcss.com/docs/responsive-design,html-tailwind 4.3,active,2026-08-13
31,Responsive,Breakpoint testing,Test across breakpoint boundaries and representative viewport sizes,Test below at and above configured breakpoints,Only test on development device,Test mobile through 2xl boundaries,Single device testing,High,https://tailwindcss.com/docs/responsive-design,html-tailwind 4.3,active,2026-08-13
32,Responsive,Hidden/shown utilities,Control visibility per breakpoint,hidden md:block,Different content per breakpoint,hidden md:flex,Separate mobile/desktop components,Low,https://tailwindcss.com/docs/display,html-tailwind 4.3,active,2026-08-13
33,Buttons,Button sizing,Consistent button dimensions,px-4 py-2 or px-6 py-3,Inconsistent button sizes,px-4 py-2 text-sm,Various padding per button,Medium,,html-tailwind 4.3,active,2026-08-13
34,Buttons,Touch targets,Minimum 44px touch target on mobile,min-h-11 min-w-11 on mobile,Small buttons on mobile,min-h-11 min-w-11,h-8 w-8 on mobile,High,https://tailwindcss.com/docs/min-height,html-tailwind 4.3,active,2026-08-13
35,Buttons,Loading states,Show loading feedback and prevent duplicate activation,Disable the action and expose busy state,Leave button clickable during loading,<button disabled aria-busy='true'>Saving</button>,Button without loading state,High,https://tailwindcss.com/docs/opacity,html-tailwind 4.3,active,2026-08-13
36,Buttons,Icon buttons,Accessible icon-only buttons,aria-label on icon buttons,Icon button without label,<button aria-label='Close'><XIcon/></button>,<button><XIcon/></button>,High,https://tailwindcss.com/docs/screen-readers,html-tailwind 4.3,active,2026-08-13
37,Cards,Card structure,Consistent card styling,rounded-lg shadow-md p-6,Inconsistent card styles,rounded-2xl shadow-lg p-6,Mixed card styling,Low,,html-tailwind 4.3,active,2026-08-13
38,Cards,Card hover states,Interactive cards should have hover feedback,hover:shadow-lg transition-shadow,No hover on clickable cards,hover:shadow-xl transition-shadow,Static cards that are clickable,Medium,,html-tailwind 4.3,active,2026-08-13
39,Cards,Card spacing,Consistent internal card spacing,space-y-4 for card content,Inconsistent internal spacing,space-y-4 or p-6,Mixed mb-2 mb-4 mb-6,Low,,html-tailwind 4.3,active,2026-08-13
40,Accessibility,Screen reader text,Provide context for screen readers,sr-only for hidden labels,Missing context for icons,<span class='sr-only'>Close menu</span>,No label for icon button,High,https://tailwindcss.com/docs/screen-readers,html-tailwind 4.3,active,2026-08-13
41,Accessibility,Focus visible,Show focus only for keyboard users,focus-visible:ring-2,Focus on all interactions,focus-visible:ring-2,focus:ring-2 (shows on click too),Medium,,html-tailwind 4.3,active,2026-08-13
42,Accessibility,Reduced motion,Respect user motion preferences,motion-reduce:animate-none,Ignore motion preferences,motion-reduce:transition-none,No reduced motion support,High,https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion,html-tailwind 4.3,active,2026-08-13
43,Performance,Declare non-detected sources,Tailwind v4 detects source files automatically; use @source only for ignored or external paths,@source '../node_modules/@acme/ui',Maintain a legacy content array for ordinary v4 sources,@source '../node_modules/@acme/ui',"content: ['./src/**/*.{js,ts,jsx,tsx}']",High,https://tailwindcss.com/docs/detecting-classes-in-source-files,html-tailwind 4.3,active,2026-08-13
44,Performance,JIT mode migration,Tailwind v3 made JIT the default; remove obsolete mode configuration during migration,Use the v3 default compiler behavior,Keep mode:'jit' as a current v4 requirement,Tailwind v3 defaults,"mode: 'jit'",Medium,https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css,html-tailwind legacy 3.x,deprecated,2026-08-13
45,Performance,Avoid @apply bloat,Use @apply sparingly,Direct utilities in HTML,Heavy @apply usage,class='px-4 py-2 rounded',@apply px-4 py-2 rounded;,Low,https://tailwindcss.com/docs/reusing-styles,html-tailwind 4.3,active,2026-08-13
46,Plugins,Official plugins,Use maintained plugins only for capabilities not built into core,@tailwindcss/forms or @tailwindcss/typography,Install legacy aspect-ratio or container-query plugins,@tailwindcss/forms,@tailwindcss/aspect-ratio,Medium,https://tailwindcss.com/docs/functions-and-directives#plugin-directive,html-tailwind 4.3,active,2026-08-13
47,Plugins,Custom utilities,Define reusable custom utilities with @utility,@utility content-auto { content-visibility: auto; },Repeat complex arbitrary values,@utility content-auto { content-visibility: auto; },"[content-visibility:auto] everywhere",Medium,https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities,html-tailwind 4.3,active,2026-08-13
48,Layout,Container queries,Use built-in container queries and Tailwind 4.3 container-size queries for component responsiveness,@container with @lg variants and @container-size when both dimensions matter,Install the retired container-query plugin,@container @lg:grid-cols-2,@tailwindcss/container-queries,Medium,https://tailwindcss.com/blog/tailwindcss-v4-3,html-tailwind 4.3,active,2026-08-13
49,Interactivity,Group and Peer,Style based on parent/sibling state,group-hover peer-checked,JS for simple state interactions,group-hover:text-blue-500,onMouseEnter={() => setHover(true)},Low,https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state,html-tailwind 4.3,active,2026-08-13
50,Customization,Arbitrary Values,Use [] for one-off values,w-[350px] for specific needs,Creating config for single use,top-[117px] (if strictly needed),style={{ top: '117px' }},Low,https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values,html-tailwind 4.3,active,2026-08-13
51,Colors,Theme color variables,Declare color namespaces in @theme so Tailwind generates semantic utilities,@theme { --color-primary: oklch(...); },Use arbitrary CSS-variable utilities for registered tokens,bg-primary,bg-[var(--color-primary)],Medium,https://tailwindcss.com/docs/colors#customizing-your-colors,html-tailwind 4.3,active,2026-08-13
52,Colors,Use bg-linear-to-* for gradients,Tailwind v4 uses bg-linear-to-* syntax for gradients,bg-linear-to-r bg-linear-to-b,bg-gradient-to-* (deprecated in v4),bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500 to-purple-500,Medium,https://tailwindcss.com/docs/background-image,html-tailwind 4.3,active,2026-08-13
53,Layout,Use shrink-0 shorthand,Shorter class name for flex-shrink-0,shrink-0 shrink,flex-shrink-0 flex-shrink,shrink-0,flex-shrink-0,Low,https://tailwindcss.com/docs/flex-shrink,html-tailwind 4.3,active,2026-08-13
54,Layout,Use size-* for square dimensions,Single utility for equal width and height,size-4 size-8 size-12,Separate h-* w-* for squares,size-6,h-6 w-6,Low,https://tailwindcss.com/docs/size,html-tailwind 4.3,active,2026-08-13
55,Images,SVG explicit dimensions,Add width and height attributes to reserve intrinsic SVG space before CSS loads,<svg class='size-6' width='24' height='24'>,SVG without intrinsic dimensions,<svg class='size-6' width='24' height='24'>,<svg class='size-6'>,High,https://tailwindcss.com/docs/width,html-tailwind 4.3,active,2026-08-13
56,Performance,Use complete class tokens,Keep utility class names statically detectable in source,Map variants to complete tokens like colorMap[color],Construct partial tokens with interpolation,"const colorMap = { red: 'bg-red-500', blue: 'bg-blue-500' }","`bg-${color}-500`",High,https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names,html-tailwind 4.3,active,2026-08-13
57,Typography,Balanced heading wrapping,Polish short multi-line headings without fixing exact line breaks,Use text-balance with a readable max-width and natural wrapping fallback,Insert hardcoded br tags or blanket nonbreaking spaces,max-w-xl text-balance,whitespace-nowrap with manual br,Medium,https://tailwindcss.com/docs/text-wrap,html-tailwind 4.3,active,2026-08-13
58,Typography,Long token resilience,Allow URLs identifiers and user content to break without widening flex layouts,Use wrap-anywhere on unpredictable text and min-w-0 on its flexible parent,Use break-all globally or keep the flex child at its intrinsic minimum,flex min-w-0 with wrap-anywhere,flex with whitespace-nowrap,High,https://tailwindcss.com/docs/overflow-wrap,html-tailwind 4.3,active,2026-08-13
59,Layout,Compact label layout,Handle chip and badge text overflow without breaking compact labels or hiding collection values,Use flex flex-wrap gap-2 for collections; for one label use whitespace-nowrap bounded min-w-0 truncate and shrink-0 controls,Clip a fixed-height row let labels wrap inside a pill or let dismiss icons shrink,flex flex-wrap gap-2; label min-w-0 whitespace-nowrap truncate; icon shrink-0,flex h-8 overflow-hidden,High,https://tailwindcss.com/docs/flex-wrap,html-tailwind 4.3,active,2026-08-13
1 No Category Guideline Description Do Don't Code Good Code Bad Severity Docs URL Applies To Status Verified At
2 1 Animation Use Tailwind animate utilities Built-in animations are optimized and respect reduced-motion Use animate-pulse animate-spin animate-ping Custom @keyframes for simple effects animate-pulse @keyframes pulse {...} Medium https://tailwindcss.com/docs/animation html-tailwind 4.3 active 2026-08-13
3 2 Animation Limit bounce animations Continuous bounce is distracting and causes motion sickness Continuous bounce is distracting and can conflict with reduced-motion preferences Use animate-bounce sparingly on CTAs only Use animate-bounce sparingly and add motion-reduce:animate-none Multiple bounce animations on page Multiple unbounded bounce animations Single CTA with animate-bounce animate-bounce motion-reduce:animate-none 5+ elements with animate-bounce High https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion html-tailwind 4.3 active 2026-08-13
4 3 Animation Transition duration Use appropriate transition speeds for UI feedback duration-150 to duration-300 for UI duration-1000 or longer for UI elements transition-all duration-200 transition-all duration-1000 Medium https://tailwindcss.com/docs/transition-duration html-tailwind 4.3 active 2026-08-13
5 4 Animation Hover transitions Add smooth transitions on hover state changes Add transition class with hover states Instant hover changes without transition hover:bg-gray-100 transition-colors hover:bg-gray-100 (no transition) Low html-tailwind 4.3 active 2026-08-13
6 5 Z-Index Use Tailwind z-* scale Consistent stacking context with predefined scale z-0 z-10 z-20 z-30 z-40 z-50 Arbitrary z-index values z-50 for modals z-[9999] Medium https://tailwindcss.com/docs/z-index html-tailwind 4.3 active 2026-08-13
7 6 Z-Index Fixed elements z-index Fixed navigation and modals need explicit z-index Fixed navigation and overlays need an intentional stacking order z-50 for nav z-40 for dropdowns Use documented z-* tokens for the application layer Relying on DOM order for stacking Rely only on DOM order for stacking fixed top-0 z-50 fixed top-0 (no z-index) High https://tailwindcss.com/docs/z-index html-tailwind 4.3 active 2026-08-13
8 7 Z-Index Negative z-index for backgrounds Use negative z-index for decorative backgrounds z-[-1] for background elements Positive z-index for backgrounds -z-10 for decorative z-10 for background Low html-tailwind 4.3 active 2026-08-13
9 8 Layout Container max-width Limit content width for readability max-w-7xl mx-auto for main content Full-width content on large screens max-w-7xl mx-auto px-4 w-full (no max-width) Medium https://tailwindcss.com/docs/container html-tailwind 4.3 active 2026-08-13
10 9 Layout Responsive padding Adjust padding for different screen sizes px-4 md:px-6 lg:px-8 Same padding all sizes px-4 sm:px-6 lg:px-8 px-8 (same all sizes) Medium html-tailwind 4.3 active 2026-08-13
11 10 Layout Grid gaps Use consistent gap utilities for spacing gap-4 gap-6 gap-8 Margins on individual items grid gap-6 grid with mb-4 on each item Medium https://tailwindcss.com/docs/gap html-tailwind 4.3 active 2026-08-13
12 11 Layout Flexbox alignment Use flex utilities for alignment items-center justify-between Multiple nested wrappers flex items-center justify-between Nested divs for alignment Low html-tailwind 4.3 active 2026-08-13
13 12 Images Aspect ratio Maintain consistent image aspect ratios aspect-video aspect-square No aspect ratio on containers aspect-video rounded-lg No aspect control Medium https://tailwindcss.com/docs/aspect-ratio html-tailwind 4.3 active 2026-08-13
14 13 Images Object fit Control image scaling within containers object-cover object-contain Stretched distorted images object-cover w-full h-full No object-fit Medium https://tailwindcss.com/docs/object-fit html-tailwind 4.3 active 2026-08-13
15 14 Images Lazy loading Reserve image space Defer loading of off-screen images Give image wrappers an aspect ratio or dimensions to avoid layout shifts loading='lazy' on images aspect-video or explicit dimensions All images eager load Let images determine layout after load <img loading='lazy'> aspect-video overflow-hidden <img> without lazy Image without reserved space High https://tailwindcss.com/docs/aspect-ratio html-tailwind 4.3 active 2026-08-13
16 15 Images Responsive images Responsive image layout Serve appropriate image sizes Adjust image sizing and placement mobile-first with breakpoint variants srcset and sizes attributes w-full md:w-1/2 Same large image all devices Use a fixed desktop width at every viewport srcset with multiple sizes w-full md:max-w-xl 4000px image everywhere w-[900px] High https://tailwindcss.com/docs/responsive-design html-tailwind 4.3 active 2026-08-13
17 16 Typography Prose plugin Use @tailwindcss/typography for rich text prose prose-lg for article content Custom styles for markdown prose prose-lg max-w-none Custom text styling Medium https://tailwindcss.com/docs/typography-plugin html-tailwind 4.3 active 2026-08-13
18 17 Typography Line height Use appropriate line height for readability leading-relaxed for body text Default tight line height leading-relaxed (1.625) leading-none or leading-tight Medium https://tailwindcss.com/docs/line-height html-tailwind 4.3 active 2026-08-13
19 18 Typography Font size scale Use consistent text size scale text-sm text-base text-lg text-xl Arbitrary font sizes text-lg text-[17px] Low https://tailwindcss.com/docs/font-size html-tailwind 4.3 active 2026-08-13
20 19 Typography Text truncation Handle long text gracefully truncate or line-clamp-* Overflow breaking layout line-clamp-2 No overflow handling Medium https://tailwindcss.com/docs/text-overflow html-tailwind 4.3 active 2026-08-13
21 20 Colors Opacity utilities Use color opacity utilities bg-black/50 text-white/80 Separate opacity class bg-black/50 bg-black opacity-50 Low https://tailwindcss.com/docs/background-color html-tailwind 4.3 active 2026-08-13
22 21 Colors Dark mode Support dark mode with dark: prefix dark:bg-gray-900 dark:text-white No dark mode support dark:bg-gray-900 Only light theme Medium https://tailwindcss.com/docs/dark-mode html-tailwind 4.3 active 2026-08-13
23 22 Colors Semantic colors Use semantic color naming in config Define semantic design tokens with CSS-first @theme primary secondary danger success Declare --color-primary and related tokens in @theme Generic color names in components Repeat palette utilities in components bg-primary bg-blue-500 everywhere Medium https://tailwindcss.com/docs/theme html-tailwind 4.3 active 2026-08-13
24 23 Spacing Consistent spacing scale Use Tailwind spacing scale consistently p-4 m-6 gap-8 Arbitrary pixel values p-4 (1rem) p-[15px] Low https://tailwindcss.com/docs/customizing-spacing html-tailwind 4.3 active 2026-08-13
25 24 Spacing Negative margins Use sparingly for overlapping effects -mt-4 for overlapping elements Negative margins for layout fixing -mt-8 for card overlap -m-2 to fix spacing issues Medium html-tailwind 4.3 active 2026-08-13
26 25 Spacing Space between Use space-y-* for vertical lists space-y-4 on flex/grid column Margin on each child space-y-4 Each child has mb-4 Low https://tailwindcss.com/docs/space html-tailwind 4.3 active 2026-08-13
27 26 Forms Focus states Always show focus indicators focus:ring-2 focus:ring-blue-500 Remove focus outline focus:ring-2 focus:ring-offset-2 focus:outline-none (no replacement) High https://tailwindcss.com/docs/hover-focus-and-other-states#focus html-tailwind 4.3 active 2026-08-13
28 27 Forms Input sizing Consistent input dimensions h-10 px-3 for inputs Inconsistent input heights h-10 w-full px-3 Various heights per input Medium html-tailwind 4.3 active 2026-08-13
29 28 Forms Disabled states Clear disabled styling disabled:opacity-50 disabled:cursor-not-allowed No disabled indication disabled:opacity-50 Same style as enabled Medium html-tailwind 4.3 active 2026-08-13
30 29 Forms Placeholder styling Style placeholder text appropriately placeholder:text-gray-400 Dark placeholder text placeholder:text-gray-400 Default dark placeholder Low html-tailwind 4.3 active 2026-08-13
31 30 Responsive Mobile-first approach Start with mobile styles and add breakpoints Default mobile + md: lg: xl: Desktop-first approach text-sm md:text-base text-base max-md:text-sm Medium https://tailwindcss.com/docs/responsive-design html-tailwind 4.3 active 2026-08-13
32 31 Responsive Breakpoint testing Test at standard breakpoints Test across breakpoint boundaries and representative viewport sizes 320 375 768 1024 1280 1536 Test below at and above configured breakpoints Only test on development device Test all breakpoints Test mobile through 2xl boundaries Single device testing High https://tailwindcss.com/docs/responsive-design html-tailwind 4.3 active 2026-08-13
33 32 Responsive Hidden/shown utilities Control visibility per breakpoint hidden md:block Different content per breakpoint hidden md:flex Separate mobile/desktop components Low https://tailwindcss.com/docs/display html-tailwind 4.3 active 2026-08-13
34 33 Buttons Button sizing Consistent button dimensions px-4 py-2 or px-6 py-3 Inconsistent button sizes px-4 py-2 text-sm Various padding per button Medium html-tailwind 4.3 active 2026-08-13
35 34 Buttons Touch targets Minimum 44px touch target on mobile min-h-[44px] on mobile min-h-11 min-w-11 on mobile Small buttons on mobile min-h-[44px] min-w-[44px] min-h-11 min-w-11 h-8 w-8 on mobile High https://tailwindcss.com/docs/min-height html-tailwind 4.3 active 2026-08-13
36 35 Buttons Loading states Show loading feedback Show loading feedback and prevent duplicate activation disabled + spinner icon Disable the action and expose busy state Clickable during loading Leave button clickable during loading <Button disabled><Spinner/></Button> <button disabled aria-busy='true'>Saving</button> Button without loading state High https://tailwindcss.com/docs/opacity html-tailwind 4.3 active 2026-08-13
37 36 Buttons Icon buttons Accessible icon-only buttons aria-label on icon buttons Icon button without label <button aria-label='Close'><XIcon/></button> <button><XIcon/></button> High https://tailwindcss.com/docs/screen-readers html-tailwind 4.3 active 2026-08-13
38 37 Cards Card structure Consistent card styling rounded-lg shadow-md p-6 Inconsistent card styles rounded-2xl shadow-lg p-6 Mixed card styling Low html-tailwind 4.3 active 2026-08-13
39 38 Cards Card hover states Interactive cards should have hover feedback hover:shadow-lg transition-shadow No hover on clickable cards hover:shadow-xl transition-shadow Static cards that are clickable Medium html-tailwind 4.3 active 2026-08-13
40 39 Cards Card spacing Consistent internal card spacing space-y-4 for card content Inconsistent internal spacing space-y-4 or p-6 Mixed mb-2 mb-4 mb-6 Low html-tailwind 4.3 active 2026-08-13
41 40 Accessibility Screen reader text Provide context for screen readers sr-only for hidden labels Missing context for icons <span class='sr-only'>Close menu</span> No label for icon button High https://tailwindcss.com/docs/screen-readers html-tailwind 4.3 active 2026-08-13
42 41 Accessibility Focus visible Show focus only for keyboard users focus-visible:ring-2 Focus on all interactions focus-visible:ring-2 focus:ring-2 (shows on click too) Medium html-tailwind 4.3 active 2026-08-13
43 42 Accessibility Reduced motion Respect user motion preferences motion-reduce:animate-none Ignore motion preferences motion-reduce:transition-none No reduced motion support High https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion html-tailwind 4.3 active 2026-08-13
44 43 Performance Configure content paths Declare non-detected sources Tailwind needs to know where classes are used Tailwind v4 detects source files automatically; use @source only for ignored or external paths Use 'content' array in config @source '../node_modules/@acme/ui' Use deprecated 'purge' option (v2) Maintain a legacy content array for ordinary v4 sources content: ['./src/**/*.{js,ts,jsx,tsx}'] @source '../node_modules/@acme/ui' purge: [...] content: ['./src/**/*.{js,ts,jsx,tsx}'] High https://tailwindcss.com/docs/content-configuration https://tailwindcss.com/docs/detecting-classes-in-source-files html-tailwind 4.3 active 2026-08-13
45 44 Performance JIT mode JIT mode migration Use JIT for faster builds and smaller bundles Tailwind v3 made JIT the default; remove obsolete mode configuration during migration JIT enabled (default in v3) Use the v3 default compiler behavior Full CSS in development Keep mode:'jit' as a current v4 requirement Tailwind v3 defaults Tailwind v2 without JIT mode: 'jit' Medium https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css html-tailwind legacy 3.x deprecated 2026-08-13
46 45 Performance Avoid @apply bloat Use @apply sparingly Direct utilities in HTML Heavy @apply usage class='px-4 py-2 rounded' @apply px-4 py-2 rounded; Low https://tailwindcss.com/docs/reusing-styles html-tailwind 4.3 active 2026-08-13
47 46 Plugins Official plugins Use official Tailwind plugins Use maintained plugins only for capabilities not built into core @tailwindcss/forms typography aspect-ratio @tailwindcss/forms or @tailwindcss/typography Custom implementations Install legacy aspect-ratio or container-query plugins @tailwindcss/forms Custom form reset CSS @tailwindcss/aspect-ratio Medium https://tailwindcss.com/docs/plugins https://tailwindcss.com/docs/functions-and-directives#plugin-directive html-tailwind 4.3 active 2026-08-13
48 47 Plugins Custom utilities Create utilities for repeated patterns Define reusable custom utilities with @utility Custom utility in config @utility content-auto { content-visibility: auto; } Repeated arbitrary values Repeat complex arbitrary values Custom shadow utility @utility content-auto { content-visibility: auto; } shadow-[0_4px_20px_rgba(0,0,0,0.1)] everywhere [content-visibility:auto] everywhere Medium https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities html-tailwind 4.3 active 2026-08-13
49 48 Layout Container Queries Container queries Use @container for component-based responsiveness Use built-in container queries and Tailwind 4.3 container-size queries for component responsiveness Use @container and @lg: etc. @container with @lg variants and @container-size when both dimensions matter Media queries for component internals Install the retired container-query plugin @container @lg:grid-cols-2 @media (min-width: ...) inside component @tailwindcss/container-queries Medium https://github.com/tailwindlabs/tailwindcss-container-queries https://tailwindcss.com/blog/tailwindcss-v4-3 html-tailwind 4.3 active 2026-08-13
50 49 Interactivity Group and Peer Style based on parent/sibling state group-hover peer-checked JS for simple state interactions group-hover:text-blue-500 onMouseEnter={() => setHover(true)} Low https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state html-tailwind 4.3 active 2026-08-13
51 50 Customization Arbitrary Values Use [] for one-off values w-[350px] for specific needs Creating config for single use top-[117px] (if strictly needed) style={{ top: '117px' }} Low https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values html-tailwind 4.3 active 2026-08-13
52 51 Colors Theme color variables Define colors in Tailwind theme and use directly Declare color namespaces in @theme so Tailwind generates semantic utilities bg-primary text-success border-cta @theme { --color-primary: oklch(...); } bg-[var(--color-primary)] text-[var(--color-success)] Use arbitrary CSS-variable utilities for registered tokens bg-primary bg-[var(--color-primary)] Medium https://tailwindcss.com/docs/customizing-colors https://tailwindcss.com/docs/colors#customizing-your-colors html-tailwind 4.3 active 2026-08-13
53 52 Colors Use bg-linear-to-* for gradients Tailwind v4 uses bg-linear-to-* syntax for gradients bg-linear-to-r bg-linear-to-b bg-gradient-to-* (deprecated in v4) bg-linear-to-r from-blue-500 to-purple-500 bg-gradient-to-r from-blue-500 to-purple-500 Medium https://tailwindcss.com/docs/background-image html-tailwind 4.3 active 2026-08-13
54 53 Layout Use shrink-0 shorthand Shorter class name for flex-shrink-0 shrink-0 shrink flex-shrink-0 flex-shrink shrink-0 flex-shrink-0 Low https://tailwindcss.com/docs/flex-shrink html-tailwind 4.3 active 2026-08-13
55 54 Layout Use size-* for square dimensions Single utility for equal width and height size-4 size-8 size-12 Separate h-* w-* for squares size-6 h-6 w-6 Low https://tailwindcss.com/docs/size html-tailwind 4.3 active 2026-08-13
56 55 Images SVG explicit dimensions Add width/height attributes to SVGs to prevent layout shift before CSS loads Add width and height attributes to reserve intrinsic SVG space before CSS loads <svg class='size-6' width='24' height='24'> SVG without explicit dimensions SVG without intrinsic dimensions <svg class='size-6' width='24' height='24'> <svg class='size-6'> High https://tailwindcss.com/docs/width html-tailwind 4.3 active 2026-08-13
57 56 Performance Use complete class tokens Keep utility class names statically detectable in source Map variants to complete tokens like colorMap[color] Construct partial tokens with interpolation const colorMap = { red: 'bg-red-500', blue: 'bg-blue-500' } `bg-${color}-500` High https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names html-tailwind 4.3 active 2026-08-13
58 57 Typography Balanced heading wrapping Polish short multi-line headings without fixing exact line breaks Use text-balance with a readable max-width and natural wrapping fallback Insert hardcoded br tags or blanket nonbreaking spaces max-w-xl text-balance whitespace-nowrap with manual br Medium https://tailwindcss.com/docs/text-wrap html-tailwind 4.3 active 2026-08-13
59 58 Typography Long token resilience Allow URLs identifiers and user content to break without widening flex layouts Use wrap-anywhere on unpredictable text and min-w-0 on its flexible parent Use break-all globally or keep the flex child at its intrinsic minimum flex min-w-0 with wrap-anywhere flex with whitespace-nowrap High https://tailwindcss.com/docs/overflow-wrap html-tailwind 4.3 active 2026-08-13
60 59 Layout Compact label layout Handle chip and badge text overflow without breaking compact labels or hiding collection values Use flex flex-wrap gap-2 for collections; for one label use whitespace-nowrap bounded min-w-0 truncate and shrink-0 controls Clip a fixed-height row let labels wrap inside a pill or let dismiss icons shrink flex flex-wrap gap-2; label min-w-0 whitespace-nowrap truncate; icon shrink-0 flex h-8 overflow-hidden High https://tailwindcss.com/docs/flex-wrap html-tailwind 4.3 active 2026-08-13