Hello, humans!

We all love Tailwind, but there's one thing that I'm sure is not to everyone's liking:

Classes get large fast! It's messy and hard to find what is going on there...
I mean:

"text-lg font-medium text-black hover:underline hover:decoration-black sm:text-base sm:text-blue-500 sm:hover:decoration-cyan-500 lg:text-2xl lg:text-green-500 lg:hover:decoration-amber-500"

No more! Enter EasyTailwind:

https://www.npmjs.com/package/easy-tailwind

This is a little utility to be used with Tailwind and gives you superpowers!

What if instead of writing that large class you could write:

e(
  'text-lg font-medium text-black',
  {
    hover: 'underline decoration-black',
    sm: [
      'text-base text-blue-500',
      {
        hover: 'decoration-cyan-500',
      },
    ],
    lg: [
      'text-2xl text-green-500',
      {
        hover: 'decoration-amber-500',
      },
    ],
  }
)

Not only it's faster to write and read, but it's also easier to understand exactly what it's doing, don't you think?

Start playing around with it here: https://stackblitz.com/edit/easy-tailwind?file=src/App.jsx

And again the package: https://www.npmjs.com/package/easy-tailwind