[DEPRECATED] Tailwind CSS plugin to generate transition utilities
default
transition property, which generates a simple transition
class and includes all the properties from colors
as well as opacity
, box-shadow
, and transform
(taken from Tailwind 1.2)shadow
transition property (taken from Tailwind 1.2)50
, 75
, 150
, 200
, 300
, and 400
transition durationstransition-colors
utility now includes the fill
and stroke
properties, in addition to background-color
, border-color
, and color
(taken from Tailwind 1.2)ms
default
duration, timing function, and delay to prevent generating base styles that change the value of transition-property
, transition-duration
, transition-timing-function
, and transition-delay
on all elements, in order to prevent conflicts with libraries that don’t expect these properties to differ from their CSS-defined defaultdefault
duration, timing function, and/or delay is set (which is the case by default: the default
duration is 250ms
), but they define custom properties that are very unlikely to conflict with third-party libraries (e.g. --transition-duration
); these are then used to set actual properties on elements that have a transition-[property]
or transition-[duration]
classtransition-500
) on an element to make it transition all its properties; no need for transition-all
anymore, since the default value of transition-property
is already all
Release 2.1.0-beta.1
was deprecated and reverted, so the following changes were made from release 2.0.1
:
default
duration, timing function, and delay to prevent generating base styles that change the value of transition-property
, transition-duration
, transition-timing-function
, and transition-delay
on all elements, in order to prevent conflicts with libraries that don’t expect these properties to differ from their CSS-defined defaultdefault
duration, timing function, and/or delay is set (which is the case by default: the default
duration is 250ms
), but they define custom properties that are very unlikely to conflict with third-party libraries (e.g. --transition-duration
); these are then used to set actual properties on elements that have a transition-[property]
or transition-[duration]
classtransition-500
) on an element to make it transition all its properties; no need for transition-all
anymore, since the default value of transition-property
is already all
default
transition property, which is set to auto
by default, meaning that it depends on the default
transition duration: if it’s 0s
or 0ms
then auto
resolves to all
, otherwise it resolves to none
default
transition duration from 250ms
to 0ms
all
and 0s
, respectively)transition-fast
) on an element to make it transition all its properties (no need for transition-all
); if you want the previous behaviour, simply set the default
transition duration to a non-zero value250
, 500
, 750
, etc.) to a descriptive scale (slow
, medium
, fast
, etc.)0
, 200
, 400
, 600
, 800
, and 1000
)variants()
helper functiontheme
and variants
keys of your config (see README
for more info)README
for more info)transition-duration-500
is now transition-500
) and timing functions (transition-timing-ease
is now transition-ease
)transition-property
instead of the transition
shorthand; as a result, responsive transition utilities don’t reset the duration, timing function or delay anymoretransition-property
's default value of all
to none
, and sets the default duration, timing function, and delay defined in the theme)transitionProperty
and willChange
’s default
key feature introduced in beta 1; it is confusing because the behaviour is different from the other default
keys in this plugin, but also because it’s not clear what the classes do... it’s better to be explicit (e.g. transition-all
and will-change-contents
)transitionProperty
and willChange
now accept a default
key that generates a simple transition
/ will-change
classtheme
and variants
keys of your config (see README
for more info)README
for more info)transition-duration-500
is now transition-500
) and timing functions (transition-timing-ease
is now transition-ease
)transition-property
instead of the transition
shorthand; as a result, responsive transition utilities don’t reset the duration, timing function or delay anymoretransition-property
's default value of all
to none
, and sets the default duration, timing function, and delay defined in the theme)