twind | CSS Ecosystem Directory

Bot releases are hidden (Show)

twind -

Published by sastan over 3 years ago

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)]

https://github.com/tw-in-js/twind/compare/v0.16.3...v0.16.6

twind -

Published by sastan over 3 years ago

fix: add not- pseudo classes to completion tokens db6d5681

https://github.com/tw-in-js/twind/compare/v0.16.4...v0.16.5

twind -

Published by sastan over 3 years ago

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)]

twind -

Published by sastan over 3 years ago

feat: support important config options ef1f887
fix: split completion types into core and user to allow filtering of used user variants and plugins 580f46f
fix: stacked theme section resolution to allow referencing the same section from core theme with extend 0958d32

https://github.com/tw-in-js/twind/compare/v0.16.2...v0.16.3

twind -

Published by sastan over 3 years ago

fix: typings group-*, scale, skew, translate 86c9df8

https://github.com/tw-in-js/twind/compare/v0.16.1...v0.16.2

twind -

Published by sastan over 3 years ago

fix: completion types 1baa64f
fix: unsure color is a string 66fe004
doc: add links to new integration packages for next, preact and wmr a1535ce

https://github.com/tw-in-js/twind/compare/v0.16.0...v0.16.1

twind -

Published by sastan over 3 years ago

feat: enhance typings and provide completion types 9547c43
feat: support all tailwindcss theme sections and use them if defined 589cdcf
fix: use module imports to fix type issues 309eac6
fix: ensure to return falsey for unknown params cd476db
doc: link to @twind/react db6a324

https://github.com/tw-in-js/twind/compare/v0.15.10...v0.16.0

twind -

Published by sastan over 3 years ago

doc: for twind/style 0839dc9
feat: stitches like component API (#131) 423aa11

https://github.com/tw-in-js/twind/compare/v0.15.9...v0.15.10

twind -

Published by sastan over 3 years ago

ci: update PR comment to include token config 7bb59d8
fix: only import the Tokenizer from htmlparser2 to prevent WMR issues 4658994
fix: use bare import from sub-modules instead of releative b407aca
golf: use eqeq for same type comparisons d0f440c
fix: import only the Tokenizer from html2parser to prevent other import issues in WMR 1e2bcfb

https://github.com/tw-in-js/twind/compare/v0.15.8...v0.15.9

twind -

Published by sastan over 3 years ago