Long Nextjs Compile Time Fix With Tailwind Config

[SanditZZ]

In case anyone's experiencing similar slow compile time while on dev.
I noticed that I've added safelist in my tailwind.config.ts and this caused the compile time to increase significantly ~20 - 50 seconds.

const config: Config = {
  content: [
    "./src/**/*.{ts,tsx}",
  ],
  safelist: [
    {
      pattern:
        /^bg-(red|blue|green|yellow|orange|gray|pink|purple|teal|indigo|zinc)-[1-9]00(\/\d+)?$/,
    },  // REMOVE THIS LINE
    {
      pattern:
        /^text-(red|blue|green|yellow|orange|gray|pink|purple|teal|indigo|zinc)-[1-9]00(\/\d+)?$/,
    },  // REMOVE THIS LINE
    {
      pattern:
        /^border-(red|blue|green|yellow|orange|gray|pink|purple|teal|indigo|zinc)-[1-9]00(\/\d+)?$/,
    },  // REMOVE THIS LINE
    // { pattern: /bg-./ },  // REMOVE THIS LINE
    // { pattern: /text-./ },  // REMOVE THIS LINE
    // { pattern: /border-./ },  // REMOVE THIS LINE
  ],

I still didn't remove the three lines of the bg, text, border though because I need them when using dynamic colors I need when setting classNames fetched from db.

For anyone who's experiencing similar issues, do you guys have a solution for this? Would love to hear anything that's related. Thank you!

[SMatvii]

Why does this happen?

• Each pattern in safelist is matched against all possible utility classes, which is a huge set.
• Patterns with many alternations (like yours) or broad wildcards (/bg-./) cause Tailwind to generate and process a massive number of classes—even for colors you might never use.

---

Possible Solutions

1. Reduce Pattern Complexity and Scope

• Limit the number of colors or shades if you don't need them all.
• Example: If you only use a subset, specify just those.

  safelist: [
    { pattern: /^bg-(red|blue|green)-[4-9]00$/ },
  ],

2. Use Explicit Safelisting Where Possible

• Instead of regex, list out the exact classes you expect from the DB, if feasible:

  safelist: [
    "bg-red-500", "bg-blue-500", "text-green-700", // etc.
  ],

  • If you can precompute or export a list from your DB, do that!

3. Use a Build Script to Pre-generate Safelist

• If your dynamic colors are known at build time (e.g., fetched from a config or DB), you can generate the safelist array programmatically before starting Tailwind.

  Example:

  // tailwind.safelist.js
  export const safelist = colorListFromDb.map(
    color => `bg-${color}-500`
  );

  Then import into your Tailwind config.

4. Move Safelist Out of Dev

• Only enable the safelist in production builds if possible. In dev, you can comment it out or use a reduced version.

5. Leverage JIT Mode + Content Paths

• With Tailwind JIT (default now), ensure your content paths are highly specific and point only to files that actually use dynamic class names.
• If you inject dynamic class names, consider writing a comment in those files to help Tailwind find them, e.g.:

  // tailwindcss: bg-red-500 bg-blue-500

6. Consider a Custom Extraction Plugin

• For advanced use-cases, you can write a custom extractor to parse your dynamic class names and feed them to Tailwind.

---

Summary Table

Approach	Compile Speed	Flexibility	Maintenance
Broad regex patterns	Very slow	High	Easy
Explicit class listing	Fast	Low/Medium	Tedious
Programmatic safelist	Fast	High	Moderate
Prod-only safelist	Fast in dev	High	Easy

---

Quick Fix: Reduce Patterns

If you can't do any of the above right now, at least narrow your regex, or reduce the number of color/shade combinations.

---

Community Links

• Tailwind docs: Safelisting dynamic classes
• GitHub Issue: Large safelist slows down compilation

---