SerinaNya/KLALB
1
1
Fork 0
forked from KNEMC/KLALB
Code Pull Requests Activity

remove: ui ux pro max skill

Browse Source
This commit is contained in:
SerinaNya
2026-08-23 01:08:48 +08:00
parent 984031c6e2
commit cc811eddfe
172 changed files with 0 additions and 88283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv
-60
View File
@@ -1,60 +0,0 @@
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 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
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 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
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 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
16 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
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 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
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 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
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-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
36 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
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 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
45 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
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 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
48 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
49 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
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 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
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 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
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