Transitions Plugin for Tailwind CSS
Installation
npm install tailwindcss-transitions
Usage
// tailwind.config.jsmoduleexports = theme: transitionProperty: // defaults to these values 'none': 'none' 'all': 'all' 'default': 'background-color' 'border-color' 'color' 'fill' 'stroke' 'opacity' 'box-shadow' 'transform' 'colors': 'background-color' 'border-color' 'color' 'fill' 'stroke' 'bg': 'background-color' 'border': 'border-color' 'color': 'color' 'opacity': 'opacity' 'shadow': 'box-shadow' 'transform': 'transform' transitionDuration: // defaults to these values 'default': '250ms' '0': '0ms' '50': '50ms' '75': '75ms' '100': '100ms' '150': '150ms' '200': '200ms' '250': '250ms' '300': '300ms' '400': '400ms' '500': '500ms' '750': '750ms' '1000': '1000ms' transitionTimingFunction: // defaults to these values 'default': 'ease' 'linear': 'linear' 'ease': 'ease' 'ease-in': 'ease-in' 'ease-out': 'ease-out' 'ease-in-out': 'ease-in-out' transitionDelay: // defaults to these values 'default': '0ms' '0': '0ms' '100': '100ms' '250': '250ms' '500': '500ms' '750': '750ms' '1000': '1000ms' willChange: // defaults to these values 'auto': 'auto' 'scroll': 'scroll-position' 'contents': 'contents' 'opacity': 'opacity' 'transform': 'transform' variants: // all the following default to ['responsive'] transitionProperty: 'responsive' transitionDuration: 'responsive' transitionTimingFunction: 'responsive' transitionDelay: 'responsive' willChange: 'responsive' plugins: ;
The default configuration generates the following CSS:
/* base styles for the default transition duration, timing function, and delay (when they differ from the CSS defaults) */ /* configurable with the "transitionProperty" theme object */ /* configurable with the "transitionDuration" theme object */ /* configurable with the "transitionTimingFunction" theme object */ /* configurable with the "transitionDelay" theme object */ /* configurable with the "willChange" theme object */
Which you can then use in your HTML like this:
Hover me for a lighter background Hover me to invert colors
Note: The transitionProperty
, transitionDuration
, transitionTimingFunction
, and transitionDelay
theme objects accept a default
key. For transitionProperty
, it generates a simple transition
class (instead of transition-default
), but for the other three, default
doesn’t generate any class; it is used to define a custom property on all elements and pseudo-elements (*, *::before, *::after
) if the value differs from the CSS-defined default. These custom properties are then used to set actual properties on elements that have a transition-[property]
or transition-[duration]
class, so that you don’t have to define a duration, timing function, or delay every time.