heroui-inc/tailwind-variants v0.1.0

on GitHub

What's Changed

🚀 Features

• On-Demand transform. by @tianenpang
• New config api responsiveVariants. by @tianenpang
• New parameter added compoundSlots to apply classes to multiple slots at once, this reduces the amount of repeated code by @jrgarciadev
• tailwind-merge package upgraded to 1.10.0 by @jrgarciadev

🐛 Fixes

• Fixed issue with failed transform when using extend. by @tianenpang
• Fixed issue with children slots are now being returned for extended tv functions with slots #23 by @jrgarciadev

⚙️ Refactor

• Types declaration improved by @jrgarciadev
• Tests improved by @jrgarciadev

🔴 Breaking Changes

To be able to use Responsive Variants you need to include responsiveVariants: true or responsiveVariants:['xs', 'sm', ....allDesiredVariants'] in the configuration object. This ensures that tv functions only generate responsive variants for the specified breakpoints, significantly reducing the amount of CSS generated in the final bundle.

Example:

const button = tv({
  base: "font-semibold text-white py-1 px-3 rounded-full active:opacity-80",
  variants: {
	color: {
		primary: "bg-blue-500 hover:bg-blue-700",
		secondary: "bg-purple-500 hover:bg-purple-700",
		success: "bg-green-500 hover:bg-green-700",
	},
	size: {
		small: "py-1 px-2 text-xs",
		medium: "py-1 px-2 text-sm",
		large: "py-1.5 px-3 text-md",
	},
  },
},
+ {
+  responsiveVariants: ['sm', 'md']
+ }
);

// the function call remains unchanged.
button({
	color: {
		initial: "primary",
		sm: "success",
		md: "secondary",
	},
	size: {
		initial: "small",
		sm: "medium",
		md: "large",
	},
})}

Credits

Huge thanks to @tianenpang 🙏🏻

Stay tuned to the documentation website for examples. 🚀

Full Changelog: v0.0.31...v0.1.0