Posts Learn Components Snippets Categories Tags Tools About
/

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

2752 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',
  ]
  // ...
}

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

)