Add function to follow tailwindcss important config option

[tvongaza]

This change adds support for the tailwindcss important config option (https://tailwindcss.com/docs/configuration#important).

It will either add !important to the rule if the important option is true, or add a specificity selector if the important option is a string.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwindcss-forms	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 20, 2024 1:26am

[RobinMalfait]

Hey, thanks for the PR!

In Tailwind CSS v3 these styles are added via addComponents(…) and addComponents doesn't respect the important option on purpose otherwise it could be that you can't override these form-* classes using normal utilities (depending on specificity https://play.tailwindcss.com/vrrV7Nelas?file=config). Introducing this PR means that this introduces a breaking change.

However, in Tailwind CSS v4, we implement these as utilities. The reason we can do that now is that we handle the sorting of classes more intelligently (we sort based on amount of used properties, and which properties are being used) which means that you can still add overrides using other utilities.

Because of this, the important option just works in Tailwind CSS v4, so I would recommend to try to upgrade to Tailwind CSS v4 instead if that's an option.

Example Tailwind Play: https://play.tailwindcss.com/lgTsBUmWAy

You will notice that form-input will have !important everywhere, yet the border-red-500 will still override the border color because the border color utility is defined later in the CSS file.

I appreciate the PR, but going to close this for now since this will introduce some breaking changes. Happy to reconsider this if needed.