Understanding Why Tailwind Classes Fail in Dynamic HTML

When fetching dynamic HTML content from an external API or JSON file and rendering it with dangerouslySetInnerHTML in Next.js, you might notice that many Tailwind utility classes fail to apply. The reason for this lies in how Tailwind CSS processes styles.

Tailwind CSS relies on static analysis during build time. Its JIT (Just-In-Time) compiler scans your source files (such as /app or /components) for class names and generates only the CSS rules that are explicitly present in your codebase. Because external JSON payloads and API responses are fetched at runtime (or dynamic render time), Tailwind never scans those string values during compilation. As a result, the necessary CSS rules are omitted from the production stylesheet.

If a few classes like font-semibold or text-gray-500 happen to work inside your HTML string, it is simply because those exact class names are already used somewhere else in your static application code.

Solution 1: Use the Tailwind Typography Plugin (Recommended)

If you are rendering rich content or CMS-generated HTML, the standard and cleanest solution is to use semantic HTML elements inside your JSON string (such as <p>, <h3>, <strong>) and style them using the official Tailwind Typography plugin.

First, install the @tailwindcss/typography package: