Usage

Menu Entry

To generate a safelist.json file with the content of chunks, templates, resources and template variables, you simply have to click on the TailwindHelper menu entry in the Extras menu. The target path of the safelist.json can be changed by a system setting.

The CSS classes in the files are detected in standard class="whatever" attributes and Alpine.js :class="{ 'whatever': variable === 'foo' }" attributes. These examples will add whatever and foo to the detected classes. The class names are separated by the space character and included in the list as individual classes.

System Settings

TailwindHelper uses the following system settings in the namespace tailwindhelper:

Key	Description	Default
tailwindhelper.debug	Log debug information in the MODX error log.	No
tailwindhelper.removeModxTags	Remove remaining MODX tags in the safelist.json.	Yes
tailwindhelper.safelistFolder	The location of the safelist.json.	{core_path}components/tailwindhelper/elements/purge/

Example usage

Parcel 2/Webpack

If you want to purge your tailwind css with Parcel 2 or in Webpack, you have to refer the created safelist.json in the tailwind.config.js to reduce the size of the build:

const safelist = require('./path-to-your-core/core/components/tailwindhelper/elements/purge/safelist.json');
safelist = safelist.concat([
    'additional-class'
]);

module.exports = {
    ...
    purge: {
        content: ['./src/**/*.html'],
        safelist: safelist
    },
    ...

In Tailwind 3 purgeCSS is not used anymore and you have to reference the safelist.json directly in a safelist configuration:

const safelist = require('./path-to-your-core/core/components/tailwindhelper/elements/purge/safelist.json');
safelist = safelist.concat([
    'additional-class'
]);

module.exports = {
    ...
    content: {
        content: ['./src/**/*.html'],
    },
    safelist: safelist
    ...