{"id":19325075,"url":"https://github.com/spatie/tailwind-safelist-generator","last_synced_at":"2025-04-22T20:31:21.040Z","repository":{"id":40418709,"uuid":"397586388","full_name":"spatie/tailwind-safelist-generator","owner":"spatie","description":"Tailwind plugin to generate purge-safe.txt files","archived":false,"fork":false,"pushed_at":"2023-01-04T10:08:11.000Z","size":74,"stargazers_count":99,"open_issues_count":0,"forks_count":13,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T03:43:19.976Z","etag":null,"topics":["tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://spatie.be/open-source","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spatie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"vendor_name"}},"created_at":"2021-08-18T12:06:48.000Z","updated_at":"2025-01-07T11:46:39.000Z","dependencies_parsed_at":"2023-02-02T08:00:29.922Z","dependency_job_id":null,"html_url":"https://github.com/spatie/tailwind-safelist-generator","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Ftailwind-safelist-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Ftailwind-safelist-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Ftailwind-safelist-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Ftailwind-safelist-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spatie","download_url":"https://codeload.github.com/spatie/tailwind-safelist-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250318694,"owners_count":21410979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwindcss","tailwindcss-plugin"],"created_at":"2024-11-10T02:08:48.896Z","updated_at":"2025-04-22T20:31:20.716Z","avatar_url":"https://github.com/spatie.png","language":"JavaScript","funding_links":["https://github.com/sponsors/vendor_name"],"categories":[],"sub_categories":[],"readme":"\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/support-ukraine.svg?t=1\" /\u003e](https://supportukrainenow.org)\n\n# Tailwind plugin to generate safelist.txt files\n\n[![Latest Version on NPM](https://img.shields.io/npm/v/tailwind-safelist-generator.svg?style=flat-square)](https://npmjs.com/package/tailwind-safelist-generator)\n\nWith `tailwind-safelist-generator`, you can generate a `safelist.txt` file for your theme based on a set of patterns.\n\n```js\nmodule.exports = {\n  mode: 'jit',\n  content: [\n    './**/*.html',\n    './safelist.txt',\n  ],\n  plugins: [\n    require('tailwind-safelist-generator')({\n      path: 'safelist.txt',\n      patterns: [\n        'text-{colors}',\n        'border-{borderWidth}',\n        '{screens}:gap-{gap}',\n      ],\n    }),\n  ],\n};\n```\n\nBefore 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.\n\nTailwind'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.\n\n```txt\ntext-red-100\ntext-red-200\n```\n\n```js\nmodule.exports = {\n  mode: 'jit',\n  content: [\n    './**/*.html',\n    './safelist.txt',\n  ],\n};\n```\n\nMaintaining 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.\n\n## Support us\n\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/tailwind-safelist-generator.jpg?t=1\" width=\"419px\" /\u003e](https://spatie.be/github-ad-click/tailwind-safelist-generator)\n\nWe invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).\n\nWe 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](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).\n\n## Installation\n\nYou can install the package via npm or yarn:\n\n```bash\nnpm i tailwind-safelist-generator\n```\n\nNext, 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.\n\n```js\nmodule.exports = {\n  mode: 'jit',\n  content: [\n    './**/*.html',\n    './safelist.txt',\n  ],\n  plugins: [\n    require('tailwind-safelist-generator')({\n      patterns: [\n        'text-{colors}',\n        'border-{borderWidth}',\n        '{screens}:gap-{gap}',\n      ],\n    }),\n  ],\n};\n```\n\nWe recommend adding `safelist.txt` to your `.gitignore` file, since it's an artifact that gets generated whenever Tailwind generates CSS.\n\n## Options\n\n### `path`\n\nThe path and filename where `safelist.txt` will be generated. By default, it's placed in the root of your project.\n\n```js\nmodule.exports = {\n  plugins: [\n    require('tailwind-safelist-generator')({\n      path: 'resources/css/safelist.txt',\n      patterns: [\n        // …\n      ],\n    }),\n  ],\n};\n```\n\n### `patterns`\n\nThe patterns to generate the list from.\n\n```js\nmodule.exports = {\n  plugins: [\n    require('tailwind-safelist-generator')({\n      patterns: [\n        'text-{color}',\n        'border-{borderWidth}',\n        '{screens}:gap-{gap}',\n      ],\n    }),\n  ],\n};\n```\n\nEach 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.\n\nList of all available tokens can be found [here](https://tailwindcss.com/docs/theme#configuration-reference).\n\n```txt\ntext-{colors} → text-{red-100,red-200,…}\n\ntext-red-100\ntext-red-200\n```\n\nUsing more than one token may generate a long list of combinations:\n\n```txt\n{screens}:gap-{gap} → {sm,lg}:gap-{0,1,2,4,…}\n\nsm:gap-0\nsm:gap-1\nsm:gap-2\nsm:gap-4\nmd:gap-0\nmd:gap-1\nmd:gap-2\nmd:gap-4\n```\n\n## Testing\n\nTests are written with Jest.\n\n```bash\nnpm run test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Sebastian De Deyne](https://github.com/sebastiandedeyne)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Ftailwind-safelist-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspatie%2Ftailwind-safelist-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Ftailwind-safelist-generator/lists"}