-
test: initial observe test 8c316b7
-
fix: re-export twind from twind/shim f828c10
-
support
not-
prefix for pseudo class variants (#149) c65c8b9The 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) 039e241It 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)]