Tailwind Safelist Generator

Tailwind plugin to generate safelist.txt files

[](https://npmjs.com/package/tailwind-safelist-generator)

With `tailwind-safelist-generator`, you can generate a `safelist.txt` file for your theme based on a set of patterns.

module.exports = {
  mode: 'jit',
  content: [
    './**/*.html',
    './safelist.txt',
  ],
  plugins: [
    require('tailwind-safelist-generator')({
      path: 'safelist.txt',
      patterns: [
        'text-{colors}',
        'border-{borderWidth}',
        '{screens}:gap-{gap}',
      ],
    }),
  ],
};

Before you consider this plugin, we recommend reading Tailwind's [purgeable HTML docs](https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html). If this isn't an option—like when you need to generate Tailwind classes with dynamic data from a CMS—this is for you.

Tailwind's JIT mode scans your codebase for class names, and generates CSS based on what it finds. If a class name is not listed explicitly, like `text-${error ? 'red' : 'green'}-500`, Tailwind won't discover it. To ensure these utilities are generated, you can maintain a file that lists them explicitly, like a `safelist.txt` file in the root of your project.

text-red-100
text-red-200

module.exports = {
  mode: 'jit',
  content: [
    './**/*.html',
    './safelist.txt',
  ],
};

Maintaining this list can become cumbersome, because whenever you update your theme you need to update the safelist. That's why we created `tailwind-safelist-generator`, so you can declare a set of classes you don't want to purge that stay in sync with your theme.

Support us

[](https://spatie.be/github-ad-click/tailwind-safelist-generator)

We invest a lot of resources into creating [best in class open source packages](https://spati