Need help with tailwindcss-transitions?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

benface
201 Stars 8 Forks ISC License 43 Commits 1 Opened issues

Description

[DEPRECATED] Tailwind CSS plugin to generate transition utilities

Services available

!
?

Need anything else?

Contributors list

No Data

⛔️ DEPRECATED

Tailwind CSS 1.2 (released in February 2020) has utilities for transition property, duration, and timing function. It doesn’t have transition delay or

will-change
utilities (yet), nor does it have a way to define a default transition duration or timing function, but I feel like keeping this plugin around would be more confusing than helpful since it uses similar (or identical in some cases) class names as the core transition utilities. Feel free to fork it if you want, but I recommend migrating to Tailwind’s official solution and write custom utilities for
transition-delay
and
will-change
when needed.

Transitions Plugin for Tailwind CSS

Installation

npm install tailwindcss-transitions

Usage

// tailwind.config.js
module.exports = {
  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: [
    require('tailwindcss-transitions')(),
  ],
};

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) */
*, *::before, *::after {
  --transition-duration: 250ms;
  /* when the default timing function is a value other than "ease": */
  --transition-timing-function: [default-timing-function];
  /* when the default delay is a value other than zero: */
  --transition-delay: [default-delay];
}

/* configurable with the "transitionProperty" theme object / .transition-none { transition-property: none; transition-duration: 250ms; transition-duration: var(--transition-duration); } .transition-all { transition-property: all; transition-duration: 250ms; transition-duration: var(--transition-duration); } .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; transition-duration: 250ms; transition-duration: var(--transition-duration); } .transition-[property-key] { transition-property: [property-value]; / when the default duration is a value other than zero: / transition-duration: [default-duration]; transition-duration: var(--transition-duration); / when the default timing function is a value other than "ease": / transition-timing-function: [default-timing-function]; transition-timing-function: var(--transition-timing-function); / when the default delay is a value other than zero: */ transition-delay: [default-delay]; transition-delay: var(--transition-delay); }

/* configurable with the "transitionDuration" theme object / .transition-0 { --transition-duration: 0ms; transition-duration: 0ms; transition-duration: var(--transition-duration); } .transition-50 { --transition-duration: 50ms; transition-duration: 50ms; transition-duration: var(--transition-duration); } .transition-[duration-key] { transition-duration: [duration-value]; / when the default duration is a value other than zero: / --transition-duration: [duration-value]; transition-duration: var(--transition-duration); / when the default timing function is a value other than "ease": / transition-timing-function: [default-timing-function]; transition-timing-function: var(--transition-timing-function); / when the default delay is a value other than zero: */ transition-delay: [default-delay]; transition-delay: var(--transition-delay); }

/* configurable with the "transitionTimingFunction" theme object / .transition-linear { transition-timing-function: linear; } .transition-ease { transition-timing-function: ease; } .transition-[timing-function-key] { transition-timing-function: [timing-function-value]; / when the default timing function is a value other than "ease": */ --transition-timing-function: [timing-function-value]; transition-timing-function: var(--transition-timing-function); }

/* configurable with the "transitionDelay" theme object / .transition-delay-0 { transition-delay: 0ms; } .transition-delay-100 { transition-delay: 100ms; } .transition-delay-[key] { transition-delay: [value]; / when the default delay is a value other than zero: */ --transition-delay: [value]; transition-delay: var(--transition-delay); }

/* configurable with the "willChange" theme object */ .will-change { will-change: contents; } .will-change-auto { will-change: auto; } .will-change-[key] { will-change: [value]; }

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.