Nagging Mario's Princess

    tailwindcss-plugin-transitions

    1.0.6 • Public • Published

    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.550.0850.680.53);
    }
    .ease-out {
      transition-timing-function: cubic-bezier(0.250.460.450.94);
    }
    .ease-in-out {
      transition-timing-function: cubic-bezier(0.4550.030.5150.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;
    }
     

    Install

    npm i tailwindcss-plugin-transitions

    DownloadsWeekly Downloads

    1

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    12.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • brandonpittman