How to Add Dynamic Generated Classes in Tailwind CSS Without Purge

Learn how to add dynamically generated classes in Tailwind CSS and whitelist it to prevent from being purge

Created on Feb 17, 2022

•

1482 views

To whitelist/safelist you can make use of safelist in the configuration "tailwind.config.js". Now when you compile your tailwind but you didn't use the classes it will still present in the compiled CSS file as it's within the "safelist".

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

Tailwind CSS Snippets

new

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Patreon