EasyTailwind: пакет для увеличения мощности вашего Tailwind

Привет, люди!

Мы все любим Tailwind, но есть одна вещь, которая, я уверен, не всем нравится:

Классы быстро разрастаются! Там грязно и трудно понять, что там происходит…
Я имею в виду:

"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"

Больше не надо! Введите EasyTailwind:

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

Это небольшая утилита для использования с Tailwind, которая дает вам сверхспособности!

Что, если вместо написания этого большого класса вы могли бы написать:

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',
      },
    ],
  }
)

Он не только быстрее пишет и читает, но и легче понять, что именно он делает, не так ли?

Начните играть с ним здесь: https://stackblitz.com/edit/easy-tailwind?file=src/App.jsx

И снова пакет: https://www.npmjs.com/package/easy-tailwind