Negatory. Postpone Mission.

    @whiterussianstudio/tailwind-easing

    1.0.0 • Public • Published

    Tailwind CSS Easings

    Tailwind plugin that extend transitionTimingFunction with custom cubic-bezier function

      .ease-in-quad{transition-timing-function: cubic-bezier(0.550,  0.0850.6800.530) }
      .ease-in-cubic { transition-timing-function: cubic-bezier(0.550,  0.0550.6750.190) }
      .ease-in-quart{ transition-timing-function: cubic-bezier(0.895,  0.0300.6850.220) }
      .ease-in-quint{ transition-timing-function: cubic-bezier(0.755,  0.0500.8550.060) }
      .ease-in-sine{ transition-timing-function: cubic-bezier(0.470,  0.0000.7450.715) }
      .ease-in-expo{ transition-timing-function: cubic-bezier(0.950,  0.0500.7950.035) }
      .ease-in-circ{ transition-timing-function: cubic-bezier(0.600,  0.0400.9800.335) }
      .ease-in-back{ transition-timing-function: cubic-bezier(0.600-0.2800.7350.045) }
      .ease-out-quad{ transition-timing-function: cubic-bezier(0.250,  0.4600.4500.940) }
      .ease-out-cubic{ transition-timing-function: cubic-bezier(0.215,  0.6100.3551.000) }
      .ease-out-quart{ transition-timing-function: cubic-bezier(0.165,  0.8400.4401.000) }
      .ease-out-quint{ transition-timing-function: cubic-bezier(0.230,  1.0000.3201.000) }
      .ease-out-sine{ transition-timing-function: cubic-bezier(0.390,  0.5750.5651.000) }
      .ease-out-expo{ transition-timing-function: cubic-bezier(0.190,  1.0000.2201.000) }
      .ease-out-circ{ transition-timing-function: cubic-bezier(0.075,  0.8200.1651.000) }
      .ease-out-back{ transition-timing-function: cubic-bezier(0.175,  0.8850.3201.275) }
      .ease-in-out-quad{ transition-timing-function: cubic-bezier(0.455,  0.0300.5150.955) }
      .ease-in-out-cubic{ transition-timing-function: cubic-bezier(0.645,  0.0450.3551.000) }
      .ease-in-out-quart{ transition-timing-function: cubic-bezier(0.770,  0.0000.1751.000) }
      .ease-in-out-quint{ transition-timing-function: cubic-bezier(0.860,  0.0000.0701.000) }
      .ease-in-out-sine{ transition-timing-function: cubic-bezier(0.445,  0.0500.5500.950) }
      .ease-in-out-expo{ transition-timing-function: cubic-bezier(1.000,  0.0000.0001.000) }
      .ease-in-out-circ{ transition-timing-function: cubic-bezier(0.785,  0.1350.1500.860) }
      .ease-in-out-back{ transition-timing-function: cubic-bezier(0.680-0.5500.2651.550) }

    Installation and usage

    npm install @whiterussianstudio/tailwind-easing --save-dev

    Add plugin to plugins array in config file

    // tailwind.config.js
    plugins: [
      require('@whiterussianstudio/tailwind-easing'),
      ...
    ]

    Utils can be generated with Tailiwind variants

    // tailwind.config.js
    variants: {
      transitionTimingFunction: ['responsive', 'hover'],
      ...
    }

    Install

    npm i @whiterussianstudio/tailwind-easing

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    5.28 kB

    Total Files

    3

    Last publish

    Collaborators

    • whiterussianstudio