3 ms·
Show HN: Simplify Tailwindcss with This Library
TailwindCSS is powerful, but it can be hard to read.
Writing conditional styles can also be a hassle.
That’s why I created this lightweight and simple library.
It makes your TailwindCSS code cleaner and easier to manage.
Try it out, and feel free to share your feedback anytime!
- StrandedKitty 2y agoWhat makes it better compared to de-facto standard `classnames` library? const styles = tw({ base: "p-4 rounded-lg shadow-md", dark: { if: isDarkMode, classes: "bg-gray-800 text-white" }, light: { if: !isDarkMode, classes: "bg-white text-black" }, }); can be written as const styles = classNames("p-4 rounded-lg shadow-md", { "bg-gray-800 text-white": isDarkMode, "bg-white text-black": !isDarkMode, }); which requires less boilerplate and arguably looks a bit cleaner.
- encodeincode 2y agoThank you for your feedback. To be honest, I wasn’t aware of the classnames library, so thank you for pointing it out. When designing `tw`, I wanted to use an object-based approach, since it felt more intuitive. I appreciate you letting me know about something I wasn’t aware of.