tailwindcss-plugin-transitions

This plugin adds super simple transition and transform utilities to Tailwind. They are all pulled from Adam Wathan's Laracon 2019 talk. Hopefully these will all get added to the core framework in the near future, but they seemed too good not have in an easily consumable package. So here ya go. Check out the code to see what's availabe (it's pretty self-explanatory). Variants are set to responsive and hover by default. Override them in tailwind.config.js like so:

theme: {
    variants: {
        transitions: ['responsive', 'before', 'after', 'hover', 'focus']
    }
}

Oh, did I mention this plugin also adds :before and :after variants?! Now you can do cool stuff like this:

<div
  class="relative before:absolute before:content-none before:bg-blue-500 before:h-full before:w-full before:inset-0"
    >
</div>

New Utilities

/* transition-related classes */
.transition-color {
  transition-property: color, background-color;
}
.transition-opacity {
  transition-property: opacity;
}
.transition-transform {
  transition-property: transform;
}
.transition-all {
  transition-property: all;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.ease-out {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.transition-fastest {
  transition-duration: 50ms;
}
.transition-faster {
  transition-duration: 0.1s;
}
.transition-fast {
  transition-duration: 0.15s;
}
.transition-medium {
  transition-duration: 0.2s;
}
.transition-slow {
  transition-duration: 0.25s;
}
.transition-slower {
  transition-duration: 0.3s;
}
.transition-slowest {
  transition-duration: 0.5s;
}
.scale-0 {
  transform: scale(0);
}
.scale-25 {
  transform: scale(0.25);
}
.scale-50 {
  transform: scale(0.5);
}
.scale-75 {
  transform: scale(0.75);
}
.scale-100 {
  transform: scale(1);
}
.origin-center {
  transform-origin: center;
}
.origin-top {
  transform-origin: top;
}
.origin-bottom {
  transform-origin: bottom;
}
.origin-left {
  transform-origin: left;
}
.origin-right {
  transform-origin: right;
}
.origin-top-left {
  transform-origin: top left;
}
.origin-top-right {
  transform-origin: top right;
}
.origin-bottom-left {
  transform-origin: bottom left;
}
.origin-bottom-right {
  transform-origin: bottom right;
}
 
/* content-related classes */
.content-none {
  content: '';
}
.content-data-src {
  content: attr(src);
}
.content-data-href {
  content: attr(href);
}
.content-data-title {
  content: attr(title);
}
.content-data-lang {
  content: attr(lang);
}
.content-data-before {
  content: attr(data-before);
}
.content-data-after {
  content: attr(data-after);
}
.content-var-before {
  content: var(--before);
}
.content-var-after {
  content: var(--after);
}
.content-open-quote {
  content: open-quote;
}
.content-close-quote {
  content: close-quote;
}