Skip to content
Plugins & helpers for tailwindcss
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Latest commit 4e2869d Mar 21, 2018

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea WebStorm Mar 21, 2018
docs Link to Github in docs Mar 21, 2018
packages Publishing tweaks Mar 21, 2018
.babelrc Initial refactor Mar 13, 2018
.gitignore WebStorm Mar 15, 2018
README.md Better node module support Mar 21, 2018
lerna.json v0.3.0 Mar 21, 2018
package.json Initial docs skeleton Mar 14, 2018
yarn.lock Doc WIP Mar 14, 2018

README.md

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.

You can’t perform that action at this time.