Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

Transition Utility Tailwind Plugin

Installation

Add this plugin to your project:

# Install via npm
npm install --save-dev tailwindcss-transition

Usage

This plugin exposes options for you to use. Here is the example for adding it to your project plugins

require('tailwindcss-transition')({
  standard: 'all .3s ease',
  transitions: {
    'slow': 'all 2s ease',
    'normal-in-out-quad': 'all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
    'slow-in-out-quad': 'all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
  }  
})

This configuration would create the following classes:

.transition { transition: all .3s ease; }
.transition-slow { transition: all 2s ease; }
.transition-normal-in-out-quad { transition: all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.transition-slow-in-out-quad { transition: all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }

As per the tailwind plugin docs you are able to pass variants (repsonsive, hover etc) as a parameter.

require('tailwindcss-transition')({
  standard: 'all .3s ease',
  transitions: {
    'slow': 'all 2s ease',
    'normal-in-out-quad': 'all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
    'slow-in-out-quad': 'all 2s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
  },
  variants: ['responsive', 'hover'],
})

Extra Thoughts (Not included in current version)

note: this was just an idea

It was taken into consideration that the plugin should accept a more complex set of options, more akin to the following:

property: [ 'color', 'all' ],
duration: [ '.3s', '2s' ],
timing: [ 'ease', 'ease-in-out' ],
delay: []

However this is on the back burner for the moment as it feels a little bit over- engineered, creates complex class names and, although sounds good from a config perspective, is probably overkill and cumbersome to use in real-world projects.

About

Transition utility plugin for tailwindcss framework

Resources

Packages

No packages published