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

2374 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 ☕️

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components

Sponsors 👑

+ Add Yours
)