Plugins & helpers for tailwindcss

  • By Galahad
  • Last update: Apr 21, 2022
  • Comments: 3

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.

Github

https://github.com/glhd/tailwindcss-plugins

Comments(3)

  • 1

    Update readme to add require syntax

    Great plugin! I know this is a WIP but I just wanted to let others know how to use the require syntax. I'm using Laravel/Laravel Mix and I needed to use it. I eventually figured it out when I found the thread on the tailwind repo where you had the syntax for how to use it.

  • 2

    How to use with @apply default option

    If I want to use one of the default options for a transition property via the @apply method, how can I do this? For example:

    .header-main-hide {
        @apply transition-delay-default;
    }
    

    Results in an error:

    @apply cannot be used with .transition-delay-default because .transition-delay-default either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .transition-delay-default exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

    If I use @apply transition-delay-long or @apply transition-delay-longer, it works fine, but it will not allow me to use default for some reason.

  • 3

    Multiple transition properties

    Does anyone have a good idea about how to handle multiple transition properties. I've heard it mentioned that transition-property: all can come at a performance cost.

    I guess automatically combining each property would result in a lot of unneeded stylings.

    Currently this can be solved by just adding a new line to transitionProperty like this.

    'bgandcolor': 'background, color', ( I really need a better naming convention ).