TailwindCSS v4 Beta: What I Love and What I Hate
What I Love
The latest beta release of TailwindCSS v4 is packed with exciting updates. One feature that stands out to me is the default disabling of hover states on touch screens. This thoughtful move eliminates unnecessary hover effects on mobile devices, creating a cleaner and more intentional user experience.
What I Hate
On the other hand, I’m not a fan of the change in default cursor behavior for buttons in v4 Beta. Instead of the previous cursor-pointer, buttons now have the default CSS cursor (cursor: default). This means that if you want your buttons to behave intuitively as clickable elements, you’ll need to explicitly add cursor-pointer each time. While it’s not a major issue, it adds an extra step that didn’t exist before.
What’s Your Take?
Do you agree with me that disabling hover states on touch screens is a welcome change? Or do you prefer the old way? Perhaps you’re indifferent and don’t notice the difference. Let us know your thoughts and share your feedback!
Conclusion
In conclusion, the latest beta release of TailwindCSS v4 is a mixed bag. While I appreciate the thoughtful move of disabling hover states on touch screens, I’m not a fan of the new default cursor behavior for buttons. It’s an extra step that didn’t exist before, and it may be a minor inconvenience for some developers. Nonetheless, the update still has plenty of exciting features and improvements to explore.
Frequently Asked Questions
Q: Why was the hover state disabled on touch screens?
A: The hover state was disabled on touch screens to eliminate unnecessary effects and create a cleaner, more intentional user experience on mobile devices.
Q: Can I re-enable hover states on touch screens?
A: Yes, you can re-enable hover states on touch screens by adding the `hover` class to your elements.
Q: How do I re-enable the old cursor behavior for buttons?
A: You can re-enable the old cursor behavior for buttons by adding the `cursor-pointer` class to your buttons.
