css Errors

•Check specificity — another CSS rule may be overriding. Use !important modifier: !text-red-500
•Verify the class name is correct (e.g., text-grey-500 vs text-gray-500)

css3 fixes

Tailwind purge/content removing needed classes

purge.*removed.*class|class.*missing.*production|styles.*missing.*build

•Add all template file paths to content array in tailwind.config.js: content: ['./src/**/*.{html,ts,tsx,jsx}']
•Don't construct class names dynamically (e.g., `text-${color}-500`) — use complete class strings

css3 fixes

Tailwind dark mode classes not activating

dark.*mode.*not.*working|dark:.*class.*no effect

•Set darkMode strategy in config: darkMode: 'class' (manual) or 'media' (system preference)
•For 'class' strategy, ensure 'dark' class is on the <html> or <body> element

css3 fixes

Tailwind custom config not loading

tailwind.*config.*not.*loading|custom.*theme.*not.*applied

•Verify tailwind.config.js is in the project root (or specified path in PostCSS config)
•Restart the dev server after changing tailwind.config.js — changes aren't always hot-reloaded

css3 fixes

Tailwind @apply directive not working

@apply.*not.*working|Cannot apply.*unknown utility|@apply.*error

•Ensure the class being applied exists in Tailwind's utility set or is defined in the config
•@apply cannot use classes with modifiers like hover: or responsive prefixes — apply the base class and add the variant separately

css3 fixes

Tailwind JIT mode not compiling classes

JIT.*error|tailwind.*JIT.*mode.*not.*compiling|watching.*not.*detecting

•JIT is default since Tailwind v3 — ensure content paths are correct so the compiler can find classes
•Restart the dev server — JIT watches files specified in content config

css3 fixes

Tailwind arbitrary value syntax not working

arbitrary.*value.*not.*working|\[.*\].*class.*ignored

•Ensure no spaces inside the brackets: w-[300px] not w-[ 300px ]
•Escape special characters: content-['hello\_world'] for underscore-as-space

css3 fixes

Tailwind plugin registration error

plugin.*not.*registered|addUtilities.*not.*function|tailwind.*plugin.*error

•Install the plugin package: npm install @tailwindcss/forms and add to config plugins array
•Use the correct plugin API: plugin(({ addUtilities, theme }) => { ... })

css3 fixes

Tailwind CSS package not found by PostCSS

Cannot find module 'tailwindcss'|postcss.*tailwindcss.*not found

•Install tailwindcss: npm install -D tailwindcss postcss autoprefixer
•Ensure postcss.config.js includes tailwindcss: module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }

css3 fixes

Tailwind PostCSS version incompatibility

peer.*dependency.*postcss|postcss.*version.*incompatible.*tailwind

•Tailwind v3 requires PostCSS 8 — upgrade: npm install -D postcss@8 autoprefixer@latest
•If stuck on PostCSS 7, use the compatibility build: npm install -D @tailwindcss/postcss7-compat

css3 fixes

Tailwind responsive breakpoint classes not working

responsive.*breakpoint.*not.*working|sm:|md:|lg:.*no effect

•Tailwind uses mobile-first: sm: applies at 640px AND UP — base styles are mobile, add breakpoints for larger
•Add viewport meta tag: <meta name='viewport' content='width=device-width, initial-scale=1'>

css3 fixes

Tailwind group/peer modifiers not triggering

group-hover.*not.*working|peer.*modifier.*no effect

•Add the 'group' class to the parent element: <div class='group'> and 'group-hover:' to child
•For peer, the peer element must come BEFORE the target in the DOM (CSS ~ selector limitation)

css3 fixes

Tailwind important modifier not taking effect

important.*modifier.*not.*overriding|!.*class.*still overridden

•Use the ! prefix: !text-red-500 generates text-red-500 !important
•Set important: true in tailwind.config.js to make ALL utilities !important

css3 fixes

Tailwind animation or transition classes not working

animation.*not.*working|animate-.*no effect|transition.*class.*ignored

•For transitions, you need both the transition utility AND the property to transition: 'transition-colors duration-300'
•Ensure the element has different states to transition between (hover:bg-blue-500 with transition)

css3 fixes

Tailwind container class not behaving as expected

container.*not.*centered|container.*full.*width.*issue

•Container doesn't auto-center — add mx-auto: <div class='container mx-auto'>
•Configure container center in config: theme: { container: { center: true, padding: '2rem' } }

css3 fixes

Tailwind color opacity modifier not working

color.*opacity.*modifier.*not.*working|/\d{2}.*no effect

•Use the slash syntax: bg-red-500/50 for 50% opacity (requires Tailwind v3+)
•For older versions, use bg-opacity-50 as a separate class

css3 fixes

Tailwind Typography plugin prose class not working

prose.*class.*not.*styling|typography.*plugin.*no effect

•Install the plugin: npm install -D @tailwindcss/typography and add to plugins in config
•Add the 'prose' class to the container wrapping your HTML content

css3 fixes

Tailwind space/divide utilities not affecting children

space-.*not working|divide-.*no effect|between.*children

•space-x/y and divide-x/y only work on direct children — they use > * + * selector
•Ensure the parent has the class, not the children: <div class='space-y-4'> <child/> <child/> </div>

css3 fixes

Tailwind ring utility not visible

ring.*not.*showing|ring-.*offset.*wrong|focus.*ring.*invisible

•Ring needs both ring width AND color: 'ring-2 ring-blue-500' (default ring color may be transparent)
•For focus rings, use: 'focus:ring-2 focus:ring-blue-500 focus:outline-none'

css3 fixes

Tailwind @layer directive styles not applied correctly

layer.*base.*not.*working|@layer.*styles.*missing|base.*styles.*overridden

•Ensure @tailwind base; @tailwind components; @tailwind utilities; are in your main CSS file in that order
•Styles in @layer base have lower specificity than utilities — this is by design for overridability

css3 fixes

z-index Not Working

z-index.*not working|z-index has no effect|stacking context

•z-index only works on positioned elements — add `position: relative`, `absolute`, or `fixed`
•Check for stacking context created by parent elements (opacity < 1, transform, filter, will-change)

css3 fixes

Flexbox Content Overflow

flex.*overflow|flex item.*overflow|text overflow.*flex|flex-shrink

•Add `min-width: 0` to the flex item — flex items default to `min-width: auto` which prevents shrinking below content size
•For text overflow, add `overflow: hidden; text-overflow: ellipsis; white-space: nowrap` on the flex child

css3 fixes

position: sticky Not Working

position.*sticky.*not working|sticky.*no effect|sticky.*scroll

•Ensure a threshold is set: `top: 0` (or left/right/bottom) — sticky won't work without it
•Check that no ancestor has `overflow: hidden`, `overflow: auto`, or `overflow: scroll` — this breaks sticky

css3 fixes

@import Must Precede All Other Rules

@import must.*first|@import.*after|@import.*ignored|@import not at top

•Move all @import statements to the very top of the CSS file, before any other rules or @charset
•In SCSS/Sass, use @use instead of @import — it's order-independent and avoids this issue

css3 fixes

SCSS/Sass Variable Undefined

Undefined variable|undefined.*\$|variable.*not found|SassError.*Undefined

•Ensure the file defining the variable is imported before usage: `@use 'variables' as *` or `@import 'variables'`
•Check for typos in variable name — SCSS variables are case-sensitive: `$myColor` ≠ `$mycolor`