Tailwind v4 JIT Fails to Generate Standard Spacing Utilities (e.g. .mb-4, .mt-2) Even When Present in Content

[mdbrennan]

Title:

Tailwind v4 JIT Fails to Generate Standard Spacing Utilities (e.g. .mb-4, .mt-2) Even When Present in Content

Summary:

In Tailwind CSS v4.1.11, the JIT engine does not generate standard spacing utility classes (like .mb-4, .mt-2, .p-4, etc.) even when they are clearly present in the content files. This occurs with both the local install and the official @tailwindcss/cli, and is reproducible with a minimal HTML file and config.

Steps to Reproduce:

1. Create a minimal HTML file:

   <div class="mb-4 mt-2 p-4 text-center">Test content</div>

2. Use a minimal input CSS:

   @import "tailwindcss/preflight";
   @tailwind utilities;

3. Run the CLI:

   npx @tailwindcss/cli -i input.css -o output.css --content test.html
   

4. Check output.css for .mb-4, .mt-2, .p-4 — they are missing.

What I Expected:

All standard spacing utilities used in the content should be generated in the output CSS.

What Actually Happens:

• Custom classes (e.g. mb-[60px]) and some other utilities are generated.
• Standard spacing utilities (e.g. .mb-4, .mt-2, .p-4) are not generated at all.

Workarounds Tried:

• Using a static HTML snapshot as the only content file.
• Adding a “utility dump” block with all standard classes.
• Using both local and standalone CLI.
• No custom config, no corePlugins disabled, no plugins.
• Only workaround is to manually define the missing utilities in the input CSS.

Environment:

• Tailwind CSS v4.1.11
• Node.js v23.11.0
• macOS
• Reproducible in a clean project

Impact:

This breaks static site generation workflows and makes it impossible to rely on Tailwind’s default spacing scale for static builds.

[wongjn]

The padding and spacing values rely on the --spacing theme token. This does not exist with your input CSS. You could add it using @theme:

 @import "tailwindcss/preflight";
+
+@theme {
+  --spacing: 0.25rem;
+}
+
 @tailwind utilities;

Or import Tailwind default theme tokens:

+@import "tailwindcss/theme.css";
 @import "tailwindcss/preflight";
 @tailwind utilities;

https://play.tailwindcss.com/5kBiPaBjOy?file=css

[mdbrennan]

Thanks a lot, this sorted my problem out.