Socket
Socket
Sign inDemoInstall

tailwind-safelist-generator

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwind-safelist-generator

Tailwind plugin to generate safelist.txt files


Version published
Maintainers
1
Created
Source

Tailwind plugin to generate safelist.txt files

Latest Version on NPM

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

module.exports = {
  mode: 'jit'
  purge: [
    './**/*.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. 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'
  purge: [
    './**/*.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

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Installation

You can install the package via npm or yarn:

npm i tailwind-safelist-generator

Next, register the plugin in your Tailwind configuration file and specify the patterns you want to safelist. Don't forget to add ./safelist.txt to Tailwind's purge option.

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

We recommend adding safelist.txt to your .gitignore file, since it's an artifact that gets generated whenever Tailwind generates CSS.

Options

path

The path and filename where safelist.txt will be generated. By default, it's placed in the root of your project.

module.exports = {
  plugins: [
    require('tailwind-safelist-generator')({
      path: 'resources/css/safelist.txt',
      patterns: [
        // …
      ],
    }),
  ],
};

patterns

The patterns to generate the list from.

module.exports = {
  plugins: [
    require('tailwind-safelist-generator')({
      patterns: [
        'text-{color}',
        'border-{borderWidth}',
        '{screens}:gap-{gap}',
      ],
    }),
  ],
};

Each token wrapped in {} will be passed through Tailwind's theme() helper to retrieve all possible values. Then the plugin generates a list of all combinations.

List of all available tokens can be found here.

text-{colors} → text-{red-100,red-200,…}

text-red-100
text-red-200

Using more than one token may generate a long list of combinations:

{screens}:gap-{gap} → {sm,lg}:gap-{0,1,2,4,…}

sm:gap-0
sm:gap-1
sm:gap-2
sm:gap-4
md:gap-0
md:gap-1
md:gap-2
md:gap-4

Testing

Tests are written with Jest.

npm run test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

Keywords

FAQs

Package last updated on 31 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc