Generating TailwindCSS safelist with function?

Question

I'm attempting to generate a safelist for TailWindCSS 3.0.23 using a function so I can cover some ranges.

For some reason, the classes still seem to be purged.

module.exports = {
  content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],

  safelist: function(){
    let list = [
      'user-administrator:not(.wp-admin)',
    ];

    for(let i = 0; i <= 100; i += 5 ){
      list[list.length] = 'opacity-' + i;
    }

    return list;
  },

Is this type of thing possible? Any ideas?

Answer 1

I ended up solving this by adding a pair of parenthesis after the closing bracket of the function so it executes.

module.exports = {
  content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],

  safelist: function(){
    let list = [
      'user-administrator:not(.wp-admin)',
    ];

    for(let i = 0; i <= 100; i += 5 ){
      list[list.length] = 'opacity-' + i;
    }

    return list;
  }(),