Tailwind CSS Dynamic Content Styling Bug

This repository demonstrates a common issue encountered when using Tailwind CSS's Just-In-Time (JIT) mode with dynamically generated content. The problem arises because JIT mode compiles the CSS based on the initial HTML structure. When content is added or removed after the page load, the new elements may not be styled correctly by Tailwind.

Bug Reproduction

The dynamicContentBug.js file shows how to reproduce the bug. It demonstrates adding a new <div> element to the DOM after the page has loaded. Observe that the new element is not styled by Tailwind's classes. This is because the changes aren't automatically picked up by the JIT compiler.

Solution

The dynamicContentSolution.js file presents a solution to this issue. It provides a workaround to ensure that changes to the DOM are reflected and trigger a re-evaluation by Tailwind's JIT mode. This is achieved by forcing a re-render of the element after applying a class using element.classList.add() or by triggering a re-render/update mechanism specific to your framework, ensuring the JIT compiler processes the new classes.