tailwind-modifier - Simplify your Tailwind CSS with a modifier-first approach.

tailwind-modifier

10 views

Simplify your Tailwind CSS with a modifier-first approach.

Pitch

Tailwind-modifier streamlines the way you write Tailwind CSS classes by adopting a modifier-first methodology. With features like complete type-safety, nested modifiers, and support for all Tailwind variants, it enhances your development workflow. It integrates effortlessly with tools like twMerge, offering users flexibility and auto-completion for a more efficient coding experience.

Description

Tailwind Modifier is a powerful tool designed to streamline your Tailwind CSS workflow with its innovative modifier-first approach. This methodology simplifies the creation and management of Tailwind classes by utilizing various modifiers for screens, groups, and more.

Key Features:

Complete Type Safety: Ensure your classes are always error-free and type-safe.
No External Dependencies: Keep your project lightweight and efficient.
Full Support for All Tailwind Modifiers: Utilize the entire range of Tailwind CSS features.
Nested Modifier Support: Write complex classes effortlessly using syntax like *:dark:bg-dark.
Differentiated Peers/Groups Support: Easily manage classes with group-hover/item.
Support for Arbitrary Modifiers: Flexibly use modifiers such as group-[.is-published].
Custom Modifier Support: Enhance type-safety with your custom modifiers.
Seamless Integration: Works flawlessly with other utility tools such as twMerge and clsx.
Auto-completion Support: Improve development speed with Tailwind class auto-completion in your editor.

Usage Examples:

Simple String Syntax:

twMod('text-blue-300 hover:font-bold,translateY-[0.5px],text-red-300');
// Outputs: text-blue-300 hover:font-bold hover:translateY-[0.5px] hover:text-red-300

Object Syntax for Type Safety:

twMod({
  DEFAULT: 'w-3/4 px-16 py-8',
  sm: 'w-full px-4 py-4',
  md: 'w-5/6 px-8 py-8',
});
// Outputs: 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

Conditional Classes with clsx:

// Conditional classes using clsx
const isActive = true;
twMod({
  DEFAULT: 'w-10 p-4',
  lg: {
    DEFAULT: 'rounded-lg shadow-lg',
    hover: clsx({ 'bg-blue-500 scale-110': isActive }),
  },
});
// Outputs: w-10 p-4 lg:rounded-lg lg:shadow-lg lg:hover:bg-blue-500 lg:hover:scale-110

Custom Modifiers Integration:

const twModCustom = createTwModWithDefaults({
  customModifiers: ['3xl'],
});
twModCustom({
  DEFAULT: 'w-10',
  '3xl': 'w-50',
});
// Outputs: w-10 3xl:w-50

Editor Support:

To enhance your development experience, enable auto-completion of Tailwind utility classes in twMod by configuring your editor settings.

For example, in VS Code:

{
  "tailwindCSS.experimental.classRegex": [
    ["twMod[a-zA-Z_]*\(([^)]*)\)", "(?:'|\"|`|,)*([^'\"`,]*)(?:'|\"|`|,)" ]
  ]
}

Tailwind Modifier not only simplifies your Tailwind CSS management but also enhances your overall developer experience. It's lightweight, powerful, and ready to integrate into your projects today!