Tailwind Config Validator

Overview

Paste a tailwind.config.js (or .ts) and the validator checks for common mistakes - missing content glob, unrecognised top-level keys, plugin entries that aren't functions, theme overrides that should be extensions, and safelist patterns that won't match anything.

It's for front-end developers debugging "why doesn't this class apply?" issues, and for teams enforcing Tailwind config hygiene in PR review. Reach for it after a Tailwind upgrade that changes config expectations, or when a colleague's content: glob silently misses half the components.

How it works

The validator parses the config as JavaScript (or TypeScript) and walks the exported object. Each key is checked against Tailwind's documented config shape (top-level keys: content, theme, plugins, presets, darkMode, corePlugins, safelist, important, prefix).

The content glob is the most common pitfall - if your patterns don't match your source files, Tailwind purges all your utilities. The validator runs the globs against a sample list of paths to confirm they catch typical filenames. Theme keys are checked against the known scale names; unknown keys are reported as likely typos.

Examples

• Common mistake (overriding theme instead of extending):

  // wrong - replaces the entire default colour palette
  theme: { colors: { brand: '#000' } }
  
  // right - extends
  theme: { extend: { colors: { brand: '#000' } } }
  

• Empty content glob:

  content: []   // warning: no files matched, all utilities will be purged
  

• Plugin not a function:

  plugins: [{}]   // error: plugins must be functions or plugin objects
  

• Typo in theme key:

  theme: { extend: { borderWdith: { 5: '5px' } } }
  // warning: 'borderWdith' is not a known theme key (did you mean 'borderWidth'?)
  

FAQ

Why does my class not apply?

Most common cause: the file containing the class isn't matched by content. Run the validator with your repo paths to confirm.

Should I use theme or theme.extend?

theme.<key> replaces the default scale entirely; theme.extend.<key> adds to it. Use extend unless you really want to wipe out, e.g., the default spacing scale.

What's safelist for?

To force inclusion of specific class names even if the scanner can't see them (dynamically-generated classes from a CMS, for example). Use sparingly - it bloats the output CSS.

Does it work with Tailwind v4?

Tailwind v4 moves config to CSS (@theme). This validator targets v3-style JS configs. For v4, validate the CSS directly.

Try Tailwind Config Validator