glhd-tailwindcss-transitions

0.3.0 • Public • Published

A Collection of Tailwind Plugins

Documentation (work in progress)

Transitions

Installation:

yarn add glhd-tailwindcss-transitions

Usage:

// In your tailwind config
{
  plugins: [
    require('glhd-tailwindcss-transitions')(),
  ],
}

By default, the plugin provides the following utilities:

.transition {
  transition-duration: .25s;
}
 
.transition-slower {
  transition-duration: .75s;
}
 
.transition-slow {
  transition-duration: .5s;
}
 
.transition-fast {
  transition-duration: .15s;
}
 
.transition-faster {
  transition-duration: .075s;
}
 
.transition {
  transition-property: all;
}
 
.transition-property-all {
  transition-property: all;
}
 
.transition-property-none {
  transition-property: none;
}
 
.transition-property-bg {
  transition-property: background;
}
 
.transition-property-opacity {
  transition-property: opacity;
}
 
.transition-property-color {
  transition-property: color;
}
 
.transition-property-shadow {
  transition-property: box-shadow;
}
 
.transition {
  transition-timing-function: ease-in-out;
}
 
.transition-timing-linear {
  transition-timing-function: linear;
}
 
.transition-timing-ease {
  transition-timing-function: ease;
}
 
.transition-timing-ease-in {
  transition-timing-function: ease-in;
}
 
.transition-timing-ease-out {
  transition-timing-function: ease-out;
}
 
.transition-timing-ease-in-out {
  transition-timing-function: ease-in-out;
}
 
.transition {
  transition-delay: .1s;
}
 
.transition-delay-long {
  transition-delay: .2s;
}
 
.transition-delay-longer {
  transition-delay: .3s;
}
 
.transition-delay-longest {
  transition-delay: .4s;
}
 
.transition-delay-none {
  transition-delay: 0s;
}

Configuration:

You can configure the .transition prefix, Tailwind variants, and utility options by passing a configuration object to the plugin.

See the default config for all options. You can either set these in your main Tailwind config file, or pass them into the plugin when you add it to Tailwind.

Readme

Keywords

none

Package Sidebar

Install

npm i glhd-tailwindcss-transitions

Weekly Downloads

54

Version

0.3.0

License

MIT

Unpacked Size

5.13 kB

Total Files

5

Last publish

Collaborators

  • inxilpro