Syntax Highlighting Colors Fix

The Problem

The syntax highlighting colors in code blocks keep disappearing from the domain sites (biturl, contacts, homepage, etc.). This happens because Tailwind CSS purges unused classes during build time.

Why This Keeps Happening

1. Dynamic Class Construction: The CodeHighlight.tsx component uses dynamic class names like:

   • text-purple-400 (keywords)
   • text-yellow-400 (strings)
   • text-orange-400 (numbers)
   • etc.

2. Tailwind's Static Analysis: Tailwind CSS v4 uses static analysis to determine which classes to include in the final CSS. It cannot detect dynamically constructed class names.

3. Purging: During production builds, Tailwind removes any classes it doesn't find in the source code, causing the colors to disappear.

The Permanent Solution

We've added a safelist to all domain site Tailwind configurations. This tells Tailwind to always include these classes regardless of whether it finds them in the code.

Updated Files (January 2025)

• apps/webs/biturl/tailwind.config.ts
• apps/webs/homepage/tailwind.config.ts
• apps/webs/isup/tailwind.config.ts
• apps/webs/sell/tailwind.config.ts
• apps/webs/send/tailwind.config.ts
• apps/webs/sms/tailwind.config.ts
• apps/webs/talk/tailwind.config.ts
• apps/webs/telco/tailwind.config.ts
• apps/webs/transcribe/tailwind.config.ts
• apps/webs/voicemail/tailwind.config.ts
• apps/webs/voip/tailwind.config.ts

Added Configuration

safelist: [
  // Syntax highlighting colors for code blocks
  "text-purple-400", // keywords
  "text-yellow-400", // strings
  "text-orange-400", // numbers
  "text-blue-400",   // functions
  "text-green-400",  // classes
  "text-gray-300",   // default
  "text-gray-400",   // properties
  "text-gray-500",   // comments
],

How to Apply the Fix

1. Development: Restart the dev server after making changes to tailwind.config.ts

   # Kill the existing process
   pkill -f "next dev"
   
   # Start again
   pnpm dev

2. Production: The changes will be applied automatically on the next build

Alternative Solutions (Not Recommended)

1. Inline Styles: Use inline styles instead of Tailwind classes in CodeHighlight.tsx
2. Static Classes: Use a map of static class names instead of dynamic construction
3. CSS Modules: Use traditional CSS instead of Tailwind for syntax highlighting

Why We Use Safelist

The safelist approach is the best because:

• It maintains the clean Tailwind-based approach
• It's explicit about which classes we need
• It doesn't require changing the component code
• It's the official Tailwind recommendation for this scenario

Monitoring

If colors disappear again:

1. Check if new color classes were added to CodeHighlight.tsx
2. Add any new classes to the safelist
3. Ensure the safelist is in all relevant tailwind.config.ts files

Script for Future Updates

Use the provided update-tailwind-safelist.js script to update all configs at once:

node update-tailwind-safelist.js