How to safelist tailwindcss classes in nuxt 3

[schillerenrico]

Description

Hi, I was wondering how to safelist dynamic generated tailwind classes.

Currently I hardcode an element with theses classes to generate them but I would rather prefer a safelist option somewhere. Is something like this possible?

Classes that need to be compiled:
w-[100px] w-[140px] w-[180px] w-[220px] w-[260px] w-[300px]

Current solution with a hidden element:
<span class="hidden w-[100px] w-[140px] w-[180px] w-[220px] w-[260px] w-[300px]"></span>

[benjamincanac]

You're lucky this just dropped in Tailwind CSS v4.1: https://tailwindcss.com/blog/tailwindcss-v4-1#safelist-specific-utilities-with-source-inline

You can either refresh your lock to have the latest tailwindcss version or install it yourself.

[schillerenrico]

Just awesome :) Thanks a lot