HN Explorer

Show HN: Simplify Tailwindcss with This Library (github.com)

1 points by encodeincode ↗ HN
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!

2 comments

[ 12.2 ms ] story [ 24.1 ms ] thread
StrandedKitty
What 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
Thank 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.