🦄 Tailwindcss first-class variant API
MIT License
Bot releases are visible (Hide)
compoundVariants
by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/170
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.2.0...v0.2.1
Published by jrgarciadev 8 months ago
css
variables and function syntax to the tv transformer by @PatrykWalach in https://github.com/nextui-org/tailwind-variants/pull/122
undefined
as false
for boolean variants by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/146
ClassProp
type by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/147
tailwind-merge
v2 by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/148
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.20...v0.2.0
Published by jrgarciadev 10 months ago
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.19...v0.1.20
Published by jrgarciadev 10 months ago
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.18...v0.1.19
Published by jrgarciadev 12 months ago
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
Published by jrgarciadev 12 months ago
compoundSlots
with boolean variants by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/119
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.16...v0.1.17
Published by jrgarciadev 12 months ago
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.15...v0.1.16
Published by mskelton 12 months ago
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.14...v0.1.15
Published by jrgarciadev about 1 year ago
false
variants when using compoundSlots
by @mskelton in https://github.com/nextui-org/tailwind-variants/pull/83
This is useful in a variety of situations:
const {base,tab} = tv({...})
<Tabs className={() => base()}>
<Tab className={({ isSelected }) => tab({isSelected})}>
Settings
</Tab>
</Tabs>
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 🙏🏻
Published by jrgarciadev over 1 year ago
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)
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.12...v0.1.13
Published by jrgarciadev over 1 year ago
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)
Published by jrgarciadev over 1 year ago
tailwind-merge
config. by @jrgarciadev in https://github.com/nextui-org/tailwind-variants/pull/81. Ref: https://github.com/dcastil/tailwind-merge/issues/4
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.10...v0.1.11
Published by jrgarciadev over 1 year ago
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.8...v0.1.10
Published by jrgarciadev over 1 year ago
Published by jrgarciadev over 1 year ago
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.6...v0.1.7
Published by jrgarciadev over 1 year ago
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.5...v0.1.6
Published by jrgarciadev over 1 year ago
Performance improvement. 🚀
TVReturnType
to prevent circular references by @mskelton 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
Published by jrgarciadev over 1 year ago
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.2...v0.1.3
Published by jrgarciadev over 1 year ago
Huge thanks to @tianenpang 🙏🏻
Full Changelog: https://github.com/nextui-org/tailwind-variants/compare/v0.1.1...v0.1.2
Published by jrgarciadev over 1 year ago
responsiveVariants
. by @tianenpangcompoundSlots
to apply classes to multiple slots at once, this reduces the amount of repeated code by @jrgarciadevtailwind-merge
package upgraded to 1.10.0
by @jrgarciadevextend
. by @tianenpangTo 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",
},
})}
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