Tóm Tắt
Basic usage
Controlling transitioned properties
Use the transition-{properties} utilities to specify which properties should transition when they change.
Hover the button to see the expected behaviour
<
button class
=
"
transition
ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 ..."
>
Save Changes
</
button>
For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:
<
button class
=
"
transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none
..."
>
Hover me
</
button>
Applying conditionally
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover : transition-all to only apply the transition-all utility on hover .
<
div class
=
"
hover:transition-all
"
>
</
div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md: transition-all to apply the transition-all utility at only medium screen sizes and above.
<
div class
=
"
md:transition-all
"
>
</
div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Using custom values
Customizing your theme
By default, Tailwind provides transition-property utilities for seven common property combinations. You can customize these values by editing theme.transitionProperty or theme.extend.transitionProperty in your tailwind.config.js file.
tailwind.config.js
module
.
exports
=
{
theme
:
{
extend
:
{
transitionProperty
:
{
'height'
:
'height'
,
'spacing'
:
'margin, padding'
,
}
}
}
}
Learn more about customizing the default theme in the theme customization documentation.
Arbitrary values
If you need to use a one-off transition-property value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<
div class
=
"
transition-[height]
"
>
</
div>
Learn more about arbitrary value support in the arbitrary values documentation.
