Remove single word keywords to prevent false-positives (like resize)

[eloyesp]

Most of the single word keywords that are quite common false positives, are already gone on v4:

• shadow is replaced by shadow-sm
• blur is replaced by blur-sm

So this html will not generate any extra css now:

<p>A shadow made everything blur here.</p>

That is great, but there are still some keywords that should be changed, like resize... I think that v4 is a great candidate to deprecate all those single word keywords that are false positive prone and keep that as an naming rule for tailwind keywords, that is always require a dash. I'm not sure how many single word keywords there are, but the list I've got with the proposed name is:

• flex -> flex-row (flex-col should add display: flex)
• transform -> remove
• resize -> resize-both
• border -> border-1
• outline -> outline-solid
• filter -> remove

May be there are some keywords that are missing on this list, but the idea is clear.

[olivia36mcdowell]

Hey there!

You bring up a compelling point about the potential for false positives with single-word keywords in Tailwind CSS. It seems like the team has already made some improvements in v4, but there's certainly room for further enhancement. Your proposed changes make a lot of sense for enhancing clarity and avoiding conflicts. Here's a summary of your suggestions for others to consider:

flex -> flex-row (flex-col should add display: flex)

transform -> remove

resize -> resize-both

border -> border-1

outline -> outline-solid

filter -> remove

If there are more single-word keywords prone to false positives, it would be helpful to identify and address them as well. By ensuring that Tailwind keywords consistently use a dash, we can make the framework more robust and user-friendly UltaBirthdayGift