[CSS Utilities WG] Disable arbitrary values

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Background

To prevent our bundle getting too big and reduce inconsistencies in our UI we should try not to use arbitrary values in Tailwind.

Proposal

There isn't an official way to disable arbitrary values in Tailwind. There is https://github.com/tailwindlabs/tailwindcss/discussions/10933 asking for the feature to be added but it hasn't gained traction.

Option 1

Write a PostCSS plugin that removes arbitrary values. https://postcss.org/docs/postcss-plugins

Option 2

Lint against arbitrary values. We could use https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-arbitrary-value.md for JavaScript but would also need to write a custom Robocop rule for HAML files.

• Address thread in !145705 (comment 1787518165)