Tailwind CSS Cheatsheet - Utility Class Reference

SymptomA class renders with no styles and the browser shows the class is present in the HTML but absent from the stylesheet.

CauseThe file containing that markup is not matched by the content globs in the Tailwind config, so it was never scanned.

FixAdd the directory to content (for example "./src/**/*.tsx") and restart the dev server so the JIT watcher rescans.

SymptomA margin or padding utility has no effect on a flex or grid child.

CauseA utility defined on a later class in the stylesheet loses to another utility in the cascade because both set the same property with equal specificity.

FixResolve the conflict explicitly by removing the competing utility, or use an arbitrary property or important modifier when the override is intentional.

SymptomThe dark theme never applies, or applies while the OS is in light mode.

CauseDark mode is driven by prefers-color-scheme by default, and the class strategy was configured in CSS without the matching dark variant, or the html class was never toggled.

FixEither respect the OS setting, or enable the class strategy in the config and toggle the class on <html> from your own theme code.

SymptomLayout works in development but a production build drops the styles.

CauseThe content globs matched absolute or non-existent paths, so Tailwind purged nearly every class as unused.

FixCheck the compiled CSS size after the build and confirm the globs resolve from the directory where the build runs, typically using paths relative to the config file.

SymptomTransitions or hover effects are not applied because outline-none removed the focus ring.

Causeoutline-none was used to hide the default focus indicator, which breaks keyboard accessibility.

FixReplace it with focus-visible:ring-2 or focus:outline-2 so keyboard users still see a focus state.

SymptomThe stylesheet keeps growing and the build gets slower as the project does.

CauseSafelist entries are too broad, or the content globs include a whole node_modules tree or build output.

FixNarrow content to your source directories, keep safelist entries to exact class names, and exclude generated output.

SymptomA preflight reset overrides the browser default styles and a form looks unstyled.

CauseTailwind injects preflight, which normalises margins, borders and box sizing across all elements.

FixSet corePlugins: { preflight: false } in the config to disable it, and add your own reset, or style the affected components explicitly.

Symptomabsolute 定位的元素跑到页面边缘或被裁掉，z-index 加了也没用

Causeabsolute 会相对最近的定位祖先（position 非 static）定位；若祖先没有 relative/absolute，元素就相对更外层甚至初始包含块定位，同时可能被 overflow-hidden 裁剪。

Fix给预期作为参照的父容器加 relative 定位，再调整 z-10 / z-50 的层叠顺序。