❤Nouveau Print Maker

npm

log inorsign up
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

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.

Keywords

none

install

npm i glhd-tailwindcss-transitions

Downloadsweekly downloads

1,732

version

0.3.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar

Test with RunKit

Report a vulnerability