Safelist own custom classes

[Vinze]

Is it true that the 'safelist' configuration option only works with the default Tailwind classes? See the following example:

stylesheet.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .icon { @apply inline-block w-5 h-5; }
}

tailwind.config.js:

safelist: 'icon',

When building my css file the .icon class is being removed unless I actually use the class in my html files. The reason for using a safelist is because i'm using an package for rendering icons (blade-icons) and don't want to include this file in the 'content' section of tailwind.config.js as it's only one specific class.

One solution would be to move the .icon class from a layer, but then I won't be able to override properties without using important.

Edit: Oops, after reading my own question I noticed I made a mistake.. safelist: 'icon' should be safelist: ['icon']. Sorry!

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

That should still work, but your configuration is incorrect. The safelist option should be an array. More information: https://tailwindcss.com/docs/content-configuration#safelisting-classes

[Vinze]

Thank you! I just noticed my mistake the moment I posted the question..

Problem solved :)

[jbrtsnts]

@RobinMalfait Can we use a similar approach when it comes to pattern?

stylesheet.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .icon-sm { @apply inline-block w-2 h-2; }
    .icon-md { @apply inline-block w-5 h-5; }
    .icon-lg { @apply inline-block w-8 h-8; }
}

tailwind.config.js:

safelist: [
    {
        pattern: /icon-/,
    }
]

At the moment, I'm getting... The safelist pattern /icon-/ doesn't match any Tailwind CSS classes. 😢

[adamwathan]

This seems to work according to my testing:

https://play.tailwindcss.com/Zp24pkvByv?file=config

That said if you want some custom classes to always be generated, I would recommend just not putting them in @layer, the whole point of Tailwind's @layer rules is to make things only generate on demand. By not putting your classes in one of Tailwind's layers, they are guaranteed to always be included.

@tailwind base;
@tailwind components;

.icon-sm { @apply inline-block w-2 h-2; }
.icon-md { @apply inline-block w-5 h-5; }
.icon-lg { @apply inline-block w-8 h-8; }

@tailwind utilities;

[guilhermetod]

That does work, and so does the recommendation to include it before utilities, but still, the warning shows up if you add a custom class to patterns, even if it is actually consumed: https://play.tailwindcss.com/HVIPZil6AW

[intaek-h]

I am in same situation and the warning is not getting away. The classses are included though..

[markoleavy]

Hi everybody,
I'm developing a plugin for dynamic responsive text size, and I'd like to use safeList to pre render classes and then use variables in jsx class names, like that:

const ResponsiveText = ({fontSize})=>{
return(
 <div className={`textScaleFast-[${fontSize}]`}>Responsive text</div>)
 };

That config doesn't work:

// tailwind.config.js
const safeList = [];
const fontValues = [10, 20, 30, 40];
for (const value of fontValues) {
  safeList.push(`textScaleFast-[${value}]`);
}
module.exports = {
  safeList,
  plugins: [
    plugin(({ matchUtilities }) => {
      matchUtilities(
        {
          textScaleFast: (value) => {
            const numberValue = Number(value);
            const fontSize = `${numberValue - 9.6}px`;
            return {
              fontSize: `calc(${fontSize} + 3vw)`,
            };
          },
        },
      );
    }),
  ],
};

Also hardcoding class names doesn't work:

// tailwind.config.js
module.exports = {
  safeList: [
    "textScaleFast-[10]",
    "textScaleFast-[20]",
    "textScaleFast-[30]",
    "textScaleFast-[40]",
  ],
  plugins: [
    plugin(({ matchUtilities }) => {
      matchUtilities(
        {
          textScaleFast: (value) => {
            const numberValue = Number(value);
            const fontSize = `${numberValue - 9.6}px`;
            return {
              fontSize: `calc(${fontSize} + 3vw)`,
            };
          },
        },
      );
    }),
  ],
};

While hardcoding them in the jsx actually works:

// tailwind.config.js
module.exports = {
  plugins: [
    plugin(({ matchUtilities }) => {
      matchUtilities(
        {
          textScaleFast: (value) => {
            const numberValue = Number(value);
            const fontSize = `${numberValue - 9.6}px`;
            return {
              fontSize: `calc(${fontSize} + 3vw)`,
            };
          },
        },
      );
    }),
  ],
};


// component.jsx
const safeList = [
  "textScaleFast-[10]",
  "textScaleFast-[20]",
  "textScaleFast-[30]",
  "textScaleFast-[40]",
];

const ResponsiveText = ({fontSize})=>{
return(
 <div className={`textScaleFast-[${fontSize}]`}>Responsive text</div>)
}

The last option might be ok, but I'd like to be able to dynamically generate the classes, based on an array of values like in the first example. Is there a way to achieve that? Is it matchUtilities the right way of doing that?