The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
MIT License
Bot releases are visible (Hide)
doc: readme add opencollective bakers a81e1efe
fix: multiple selector replacement with arbitrary values b37b074d
fix: support named color in arbitrary value 7f48c593
feat: support attribute selectors variants (#151) ba46fb7d
Class Name | Selector |
---|---|
[lang]:font-bold |
\[lang\]\:font-bold[lang] |
not-[lang]:italic |
.not-\[lang\]\:italic:not([lang]) |
[aria-expanded='true']:font-bold |
\[aria-expanded\=\'true\'\]\:font-bold[aria-expanded='true'] |
[data-reach-menu-item][data-selected]:bg-red-300 |
\[data-reach-menu-item\]\[data-selected\]\:bg-red-300[data-reach-menu-item][data-selected] |
[href^='#']:bg-yellow-400 |
\[href\^\=\'\#\'\]\:bg-yellow-400[href^='#'] |
[href*='example']:bg-gray-300 |
\[href\*\=\'example\'\]\:bg-gray-300[href*='example'] |
[href$='.org']:bg-red-400 |
\[href\$\=\'\.org\'\]\:bg-red-400[href$='.org'] |
[href^='https'][href$='.org']:bg-green-400 |
\[href\^\=\'https\'\]\[href\$\=\'\.org\'\]\:bg-green-400[href^='https'][href$='.org'] |
[lang~='en-us']:text-blue-400 |
\[lang\~\=\'en-us\'\]\:text-blue-400[lang~='en-us'] |
[lang|='zh']:text-red-400 |
\[lang\|\=\'zh\'\]\:text-red-400[lang|='zh'] |
[data-lang='zh-TW']:text-purple-400 |
\[data-lang\=\'zh-TW\'\]\:text-purple-400[data-lang='zh-TW'] |
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