An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
December 16, 2022 07:21 pm GMT
Original Link: https://dev.to/noriller/easytailwind-a-package-to-supercharge-your-tailwind-13ah
EasyTailwind: a package to supercharge your Tailwind
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
Original Link: https://dev.to/noriller/easytailwind-a-package-to-supercharge-your-tailwind-13ah
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To