Tailwind JIT Safelist String Generator

tailwind.config.js

module.exports = {  
  purge: {
      content: [
        "..."
      ],
      safelist: [
        ...createSafeListString({
          rules: ["mt", "mb", "pt", "pb"],
          values: [1, 2, 3, 4, 6, 8, 12, 16, 24],
          responsive: [null, "xs", "sm", "md", "lg"],
          modifiers: ['hover']
        }),
      ],
    },
  mode: 'jit'
};

tailwind.safelist.js

function createSafeListString(opts) {
  const { rules = [], values = [], modifiers = [], responsive = [] } = opts;
  const results = [];

  for (let rule of rules) {
    for (let value of values) {
      const lastPart = rule + "-" + value;

      for (let bp of responsive) {
        if (Boolean(modifiers.length)) {
          for (var modifier of modifiers) {
            results.push(bp + ":" + modifier + ":" + lastPart);
          }
        } else if (Boolean(bp)) {
          results.push(bp + ":" + lastPart);
        } else {
          results.push(lastPart);
        }
      }
    }
  }

  return results;
}

module.exports = createSafeListString;

Tailwind JIT doesn't support regex classes, but sometimes you need to whitelist a whole load of classes (for example values that are added dynamically from a CMS). This snippet allows you to quickly generate large numbers of safelist rules with complete granularity.

⚠ This is not fully tested!