1.12.0
New: The theme
import can now return objects (#169)
This update makes the theme import more useful for tasks like theming and creating breakpoint helpers:
const redThemeColors = Object.values(theme`colors.red`)
const breakpoints = theme`screens`
New: A config option to disable css color variables (#173)
Adding disableColorVariables: false
to your twin config removes css variables from colors.
This makes it easier to work with complex animations or better support IE11 and react native.
New: Variants: not-disabled:
, all:
, all-child:
(#178)
We can now style non-disabled form elements with not-disabled:xxx
.
Stye all descendants with all:xxx
(* { xxx }
) or just the direct children with the all-child:xxx
(> * { xxx }
) variant.
New: Target svgs with the svg:
variant and lock the stroke width with stroke-non-scaling
(#178)
Target svgs from a parent container with the svg:
variant and add vector-effect: non-scaling-stroke
to svg descendants with the stroke-non-scaling
class.
Fix: The GlobalStyles
import now adds keyframes from your tailwind config (#172)
When you now use the GlobalStyles
import, it will pull in the keyframes from your tailwind config so they're added once to your project.
GlobalStyles now acts more as a replacement for Tailwinds @tailwind base;
.