tailwind-variants

What's Changed

• fix: Support false-only variant with fallback behaviour by @lrholmes in https://github.com/nextui-org/tailwind-variants/pull/159
• update version to match release by @ben-hapip in https://github.com/nextui-org/tailwind-variants/pull/162
• fix: VariantProps doesn't type responsiveVariants in global configuration by @HoangDevNull in https://github.com/nextui-org/tailwind-variants/pull/160
• fix: adjust path for types by @Gomah in https://github.com/nextui-org/tailwind-variants/pull/164
• feat(transformer): support custom aliases by @Gomah in https://github.com/nextui-org/tailwind-variants/pull/169
• fix: support multi-level extend for compoundVariants by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/170

New Contributors

• @lrholmes made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/159
• @ben-hapip made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/162
• @HoangDevNull made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/160
• @Gomah made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/164

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.2.0...v0.2.1

What's Changed

• feat: support for css variables and function syntax to the tv transformer by @PatrykWalach in https://github.com/nextui-org/tailwind-variants/pull/122
• Treat undefined as false for boolean variants by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/146
• Fix ambiguous union for ClassProp type by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/147
• Update to tailwind-merge v2 by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/148

New Contributors

• @PatrykWalach made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/122

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.20...v0.2.0

What's Changed

• Improve test suite by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/138
• Fix extended styles when slots do not exist in base. by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/137

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.19...v0.1.20

What's Changed

• fix: variant as array when extending by @thefalked in https://github.com/nextui-org/tailwind-variants/pull/123
• fix: types of the extend variants by @tianenpang in https://github.com/nextui-org/tailwind-variants/pull/132

New Contributors

• @thefalked made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/123

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.18...v0.1.19

What's Changed

• feat: add createTV utility to create a tv function from a config by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/121

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.17...v0.1.18

What's Changed

• fix(tsconfig): add exactOptionalPropertyTypes by @douglasduteil in https://github.com/nextui-org/tailwind-variants/pull/97
• Fix compoundSlots with boolean variants by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/119

New Contributors

• @douglasduteil made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/97

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.16...v0.1.17

What's Changed

• fix: compound slots with variants by @jrgarciadev in https://github.com/nextui-org/tailwind-variants/pull/118

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.15...v0.1.16

What's Changed

• fix: The compoundSlots does not accept an array in the property by @Alex-Programmer-Bro in https://github.com/nextui-org/tailwind-variants/pull/99
• fix: align class value with tailwind-merge by @marbemac in https://github.com/nextui-org/tailwind-variants/pull/89
• fix: prevent extend from modifying extended slots by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/106
• feat: support goto definition for slots by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/116

New Contributors

• @Alex-Programmer-Bro made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/99
• @marbemac made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/89

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.14...v0.1.15

What's Changed

• fix: support false variants when using compoundSlots by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/83
• feat: Add support for slot level variant overrides by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/82

Slots Variant Overrides

This is useful in a variety of situations:

1. Component libraries that provide slot level class name functions:

   const {base,tab} = tv({...})
   
   <Tabs className={() => base()}>
     <Tab className={({ isSelected }) => tab({isSelected})}>
       Settings
     </Tab>
   </Tabs>
   

2. Reusing styles for vary similar components.

   const {base,item} = tv({...})
   
   <Nav className={base()}>
     <NavItem className={item({isActive: activeItem === 'foo'})}>foo</NavItem>
     <NavItem className={item({isActive: activeItem === 'bar'})}>bar</NavItem>
   </Nav>
   
   

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.13...v0.1.14

Huge thanks to @mskelton and @tianenpang 🙏🏻

What's Changed

• feat: improving performance by @Handfish in https://github.com/nextui-org/tailwind-variants/pull/77

New Benchmark

TV without slots & tw-merge (enabled) x 452,002 ops/sec ±0.28% - 6.57% (% speed increased)
TV without slots & tw-merge (disabled) x 558,383 ops/sec ±0.60% - 17.41% (% speed increased)
TV with slots & tw-merge (enabled) x 311,351 ops/sec ±0.68% (99 runs sampled) - 8.01% (% speed increased)
TV with slots & tw-merge (disabled) x 359,928 ops/sec ±0.81% (93 runs sampled) - 8.61% (% speed increased)
TV without slots & custom tw-merge config x 429,622 ops/sec ±1.60% (95 runs sampled) - 4.42% (% speed increased)
TV with slots & custom tw-merge config x 393,804 ops/sec ±0.84% (96 runs sampled) - 4.94% (% speed increased)

Fastest is TV without slots & tw-merge (disabled)

New Contributors

• @Handfish made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/77

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.12...v0.1.13

What's Changed

• Custom tailwind merge config cache fixed
• Performance improvements added

Benchmark

TV without slots & tw-merge (enabled) x 424,170 ops/sec ±0.15% (95 runs sampled)
TV without slots & tw-merge (disabled) x 475,632 ops/sec ±1.07% (93 runs sampled)
TV with slots & tw-merge (enabled) x 288,266 ops/sec ±1.09% (96 runs sampled)
TV with slots & tw-merge (disabled) x 331,401 ops/sec ±0.69% (95 runs sampled)
TV without slots & custom tw-merge config x 411,441 ops/sec ±0.53% (98 runs sampled)
TV with slots & custom tw-merge config x 375,262 ops/sec ±0.20% (102 runs sampled)

Fastest is TV without slots & tw-merge (disabled)

What's Changed

• feat: improving performance by @TIMMLOPK in https://github.com/nextui-org/tailwind-variants/pull/68
• feat: tailwind merge initialized only once, it improves a lot the performance when using custom tailwind-merge config. by @jrgarciadev in https://github.com/nextui-org/tailwind-variants/pull/81. Ref: https://github.com/dcastil/tailwind-merge/issues/4

New Contributors

• @TIMMLOPK made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/68

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.10...v0.1.11

What's Changed

• Fix Tailwind merge extend config by @jrgarciadev in https://github.com/nextui-org/tailwind-variants/pull/73

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.8...v0.1.10

What's Changed

• Fix Tailwind Merge config, partial values accepted

What's Changed

• Fix VariantProps are of type any by @zwagnr in https://github.com/nextui-org/tailwind-variants/pull/60
• Fix support typescript 5.1.3 by @tianenpang in https://github.com/nextui-org/tailwind-variants/pull/62

New Contributors

• @zwagnr made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/60

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.6...v0.1.7

What's Changed

• Fix types by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/41

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.5...v0.1.6

What's Changed

Performance improvement. 🚀

• Use TVReturnType to prevent circular references by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/39

Before

https://user-images.githubusercontent.com/25914066/234464472-79fb3025-0448-48aa-bdee-43781b6c4111.mov

After

https://user-images.githubusercontent.com/25914066/234464481-0a6dbc7b-7c83-4e95-8ffb-260dd5ed75e5.mov

New Contributors

• @mskelton made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/39

Huge thanks to @mskelton 🚀

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.3...v0.1.5

What's Changed

• Fix: Update CONTRIBUTING.md by @acald-creator in https://github.com/nextui-org/tailwind-variants/pull/26
• feat: avoid empty strings in the result by @tianenpang in https://github.com/nextui-org/tailwind-variants/pull/38

New Contributors

• @acald-creator made their first contribution in https://github.com/nextui-org/tailwind-variants/pull/26

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.2...v0.1.3

What's Changed

🐛 Fixes

• fix: exclude transform without responsive variants by @tianenpang in https://github.com/nextui-org/tailwind-variants/pull/30

Credits

Huge thanks to @tianenpang 🙏🏻

Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.1...v0.1.2

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: https://github.com/nextui-org/tailwind-variants/compare/v0.0.31...v0.1.0