ui-ux-pro-max-skill/cli/assets/data/stacks/html-tailwind.csv

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