How can I disable arbitrary properties?

[LZL0]

I am having some issues with a legacy website's gulp configuration. For the staging server, I used to generate all the styles to make development easier. Since arbitrary properties, such as w-[100px], were added gulp fails to generate the stylesheet.

How can I disable arbitrary properties? Could you guys please point me in the right direction?

[wongjn]

Just to be clear, do you mean arbitrary properties, like [width:100px] or arbitrary values, like w-[100px]? Either way, you can:

• Use the blocklist to discard would-be rules for classes individually.
• Replace the core plugins that use matchUtilities() and replace their registrations with addUtilities().
• Use a PostCSS plugin that runs after Tailwind that matches and discards rules based on a pattern of their selector.

[LZL0]

Thanks for the reply.
I would like to disable both of those.
I used to run this selector, I presume this is what I need to update, provided that there is no other clear way to disable those two features in the config:

safelist: [
        {
            pattern: /./,
            variants: [
                "hover",
                "focus",
                "print",
                "sm",
                "md",
                "lg",
                "xl",
                "2xl",
            ],
        },
    ],

I am going to update this thread as I collect more info.

[paulgv]

We'd also be interested in a configuration option to disable arbitrary values 👍

[MPJHorner]

👍

[scr2em]

This is still a valid concern, I want to limit our developers to the design tokens