Show HN: Simplify Tailwindcss with This Library

https://github.com/jnoncode/tailwindbox

by encodeincode • 2 years ago

1 2 2 years ago

github.com

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• 2 years ago

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• 2 years ago

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.

Show HN: Simplify Tailwindcss with This Library

Related Stories