What is the reason for Tailwind category failure?

Question

I first started using Tailwind and currently only use it with JavaScript. The first day, the class names all worked fine, but when I opened the project in VSCode the next day, only the Tailwind class name added before still worked. If I try to add more class names and designs to my HTML, nothing happens.

For example, when I add text-3xl in the h2 tag, the text font size does not change. Also, if I add a new color to the text or add a background color, it doesn't take effect.

Link to all my code and files in Github

<div class="flex flex-col md:w-1/2">
  <h2 class="text-center text-3xl font-bold md:text-left">Track the overall progress of the company</h1>
  <p class="text-center md:text-left mt-4 mb-6">Understand how your daily tasks fit into the broader vision. Track progress from milestone level to the tiniest detail. Never lose sight of the bigger picture again. </p>
</div>

Answer 1

Tailwind does not include all utility classes in the output CSS file. Instead, it parses out the classes you use in your code during the build process and adds only those classes to the output file.

Therefore, if you add classes to your code, you need to re-run the build process, either manually or by including the --watch option in the build command. For example:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Note: This is also why adding a previously unused utility class in the DOM inspector of the browser development tools does not immediately affect the page elements.