The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
MIT License
Bot releases are hidden (Show)
test: initial observe test 8c316b7
fix: re-export twind from twind/shim f828c10
support not-
prefix for pseudo class variants (#149) c65c8b9
The prefix will be expanded to :not(...)
.
Examples:
Class name | Selector |
---|---|
not-focus:invalid:border-red-500 |
.not-focus\\:invalid\\:border-red-500:not(:focus):invalid |
invalid:not-focus:border-red-500 |
.invalid\\:not-focus\\:border-red-500:invalid:not(:focus) |
not-disabled:focus:font-bold |
.not-disabled\\:focus\\:font-bold:not(:disabled):focus |
not-last-child:mb-5 |
.not-last-child\\:mb-5:not(:last-child) |
Core and user defined variants are not expanded and stay as is.
Example:
setup({
variants: {
'not-logged-in': 'body:not(.logged-in) &',
},
})
tw`not-logged-in:hidden`
// => `body:not(.logged-in) .not-logged-in\\:hidden`
support arbitrary values using square bracket notation like top-[-113px]
(#148) 039e241
It works in places where a theme value would be used. So almost everywhere. It works with variants too, like md:top-[-113px]
.
Here are some examples:
bg-[#0f0]
bg-[#ff0000]
bg-[#0000ffcc]
bg-[hsl(0,100%,50%)]
bg-[hsla(0,100%,50%,0.3)]
bg-[rgb(123,123,123)]
bg-[rgba(123,123,123,var(--tw-bg-opacity))]
bg-opacity-[0.11]
border-[#f00]
border-[2.5px]
duration-[2s]
grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]
grid-cols-[minmax(100px,max-content)repeat(auto-fill,200px)20%]
grid-cols-[repeat(auto-fit,minmax(150px,1fr))]
flex-[30%]
ring-[#1da1f2]
ring-[7px]
ring-offset-[#1da1f2]
ring-offset-[7px]
rotate-[0.5turn]
rotate-[23deg]
rotate-[2.3rad]
rotate-[401grad]
rotate-[1.5turn]
rounded-[33%]
scale-[2]
scale-x-[1.15]
skew-[30deg]
skew-x-[1.07rad]
space-x-[20cm]
space-x-[calc(20%-1cm)]
text-[#1da1f2]
text-[2.23rem]
text-[6px]
text-[calc(1vw+1vh+.5vmin)]
top-[-123px]
top-[123px]
transition-[font-size,color,width]
translate-[3in]
translate-y-[2px]
w-[3.23rem]
w-[calc(100%+1rem)]
w-[clamp(23ch,50%,46ch)]
not-
pseudo classes to completion tokens db6d5681test: initial observe test 8c316b7
fix: re-export twind from twind/shim f828c10
support not-
prefix for pseudo class variants (#149) c65c8b9
The prefix will be expanded to :not(...)
.
Examples:
Class name | Selector |
---|---|
not-focus:invalid:border-red-500 |
.not-focus\\:invalid\\:border-red-500:not(:focus):invalid |
invalid:not-focus:border-red-500 |
.invalid\\:not-focus\\:border-red-500:invalid:not(:focus) |
not-disabled:focus:font-bold |
.not-disabled\\:focus\\:font-bold:not(:disabled):focus |
not-last-child:mb-5 |
.not-last-child\\:mb-5:not(:last-child) |
Core and user defined variants are not expanded and stay as is.
Example:
setup({
variants: {
'not-logged-in': 'body:not(.logged-in) &',
},
})
tw`not-logged-in:hidden`
// => `body:not(.logged-in) .not-logged-in\\:hidden`
support arbitrary values using square bracket notation like top-[-113px]
(#148) 039e241
It works in places where a theme value would be used. So almost everywhere. It works with variants too, like md:top-[-113px]
.
Here are some examples:
bg-[#0f0]
bg-[#ff0000]
bg-[#0000ffcc]
bg-[hsl(0,100%,50%)]
bg-[hsla(0,100%,50%,0.3)]
bg-[rgb(123,123,123)]
bg-[rgba(123,123,123,var(--tw-bg-opacity))]
bg-opacity-[0.11]
border-[#f00]
border-[2.5px]
duration-[2s]
grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]
grid-cols-[minmax(100px,max-content)repeat(auto-fill,200px)20%]
grid-cols-[repeat(auto-fit,minmax(150px,1fr))]
flex-[30%]
ring-[#1da1f2]
ring-[7px]
ring-offset-[#1da1f2]
ring-offset-[7px]
rotate-[0.5turn]
rotate-[23deg]
rotate-[2.3rad]
rotate-[401grad]
rotate-[1.5turn]
rounded-[33%]
scale-[2]
scale-x-[1.15]
skew-[30deg]
skew-x-[1.07rad]
space-x-[20cm]
space-x-[calc(20%-1cm)]
text-[#1da1f2]
text-[2.23rem]
text-[6px]
text-[calc(1vw+1vh+.5vmin)]
top-[-123px]
top-[123px]
transition-[font-size,color,width]
translate-[3in]
translate-y-[2px]
w-[3.23rem]
w-[calc(100%+1rem)]
w-[clamp(23ch,50%,46ch)]
https://github.com/tw-in-js/twind/compare/v0.15.10...v0.16.0
https://github.com/tw-in-js/twind/compare/v0.15.9...v0.15.10