cssangularuser-interfacetailwind-css

Force Tailwind to include some classes in build phase


in my Angular project, I recently moved a menu from a typescript variable to a dynamically loaded json from backend.

Some Tailwind classes were used only in this menu so now at build time Tailwind doesn't know that it has to include styles for those classes.

Is it possible to force Tailwind to always include some classes? For example by working on the tailwind.config.js file.

As workaround, actually I've included this row in my index.html (but i don't like the errors from eslint):

<!--<span class="hidden bg-green-400 bg-pink-400"></span>-->

Solution

  • As suggested by Ihar Aliakseyenka, the "safelist" section is exactly what I was looking for. Thanks Ihar!

    module.exports = {
      content: [
        './pages/**/*.{html,js}'
        './components/**/*.{html,js}',
      ],
      safelist: [
        'bg-red-500',
        'text-3xl',
        'lg:text-4xl',
      ]
      // ...
    }