I’ve just released a new tool called tailwind-modifier on npm. This tool is designed to simplify the management and usage of Tailwind CSS modifiers while maintaining full type safety.
Key Features:
Complete Type-Safety
No External Dependencies
Full Support for Tailwind CSS Modifiers
Nested Modifier Support: Easy handling of complex variants like *:dark:bg-dark.
Differentiated Peers/Groups: Supports group-hover/item.
Arbitrary Modifiers & Variants: Use custom or dynamic values like group-[.is-published] or [&:nth-child(3)]:underline.
Seamless Integration with Other Tools: Works perfectly with twMerge and clsx for conflict resolution and conditional classes.
Editor Support: Get autocompletion for your Tailwind classes with editor integrations.
Usage:
This tool provides a more efficient, cleaner way to handle Tailwind CSS classes, reduces redundancy, and improves productivity with type-safety and better class management. Plus, it integrates well with your existing tools!
AFAIK, there are no other tools to compare to this. There is a parse-tailwind-modifier but it's a small subset of what tailwind-modifier has to offer.
You can check the github repo for more information.
Hello everyone!
I’ve just released a new tool called tailwind-modifier on npm. This tool is designed to simplify the management and usage of Tailwind CSS modifiers while maintaining full type safety.
Key Features:
Complete Type-Safety No External Dependencies Full Support for Tailwind CSS Modifiers Nested Modifier Support: Easy handling of complex variants like *:dark:bg-dark. Differentiated Peers/Groups: Supports group-hover/item. Arbitrary Modifiers & Variants: Use custom or dynamic values like group-[.is-published] or [&:nth-child(3)]:underline. Seamless Integration with Other Tools: Works perfectly with twMerge and clsx for conflict resolution and conditional classes. Editor Support: Get autocompletion for your Tailwind classes with editor integrations. Usage:
// Simple usage twMod('text-blue-300 hover:font-bold,translateY-[0.5px],text-red-300');
// Or using object syntax twMod({ DEFAULT: 'w-3/4 px-16 py-8', sm: 'w-full px-4 py-4', md: 'w-5/6 px-8 py-8', }); // output: w-3/4 px-16 py-8 sm:w-full sm:px-4 sm:py-4 md:w-5/6 md:px-8 md:py-8 Why tailwind-modifier?
This tool provides a more efficient, cleaner way to handle Tailwind CSS classes, reduces redundancy, and improves productivity with type-safety and better class management. Plus, it integrates well with your existing tools!
AFAIK, there are no other tools to compare to this. There is a parse-tailwind-modifier but it's a small subset of what tailwind-modifier has to offer.
You can check the github repo for more information.