Right now, the base styles set transition-duration to the default duration and transition-property to none. As a result:

• transition-all applies a transition with the default duration
• transition-all transition-500 customizes the duration
• transition-opacity customizes the property but applies the default duration
• transition-opacity transition-500 customizes both the property and the duration
• transition-500 alone doesn't do anything (the property is still set to none)

However, this creates issues with 3rd party libraries that don't expect transition-property and transition-duration to be different from their CSS-defined defaults (all and 0s, respectively).

It could be interesting to not have any base styles, unless the user customized the default transitionProperty (which would be all by default), the default transitionTimingFunction (ease by default), and/or the default transitionDelay (0s by default). So it would then work like this:

• transition applies a transition with the default duration
• transition-500 customizes the duration
• transition transition-opacity customizes the property but applies the default duration
• transition-500 transition-opacity customizes both the property and the duration
• transition-opacity alone doesn't do anything (the duration is still set to 0s)

This would obviously be a breaking change, and I'm not convinced it's better. Is it clear that transition sets the transition-duration property, so that if you want to customize the transitionable property, you need to add a transition-opacity class and not just append -opacity to the existing transition class? Curious to hear others' thoughts!

Hi,

I found your project it completely solves my problems but to use it on the project that I'm working on I need to have a copyright licence, do you think it could be possible to add it to the project?

You're under no obligation to choose a license. However, without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work. If you're creating an open source project, we strongly encourage you to include an open source license. The Open Source Guide provides additional guidance on choosing the correct license for your project.

https://help.github.com/en/articles/licensing-a-repository

Thanks in advance, cheers

When in Javascript I kind of expect numbers to be milliseconds in these situations. This makes that a reality.

It would also make getting the durations for other purposes from the tailwind config a little smoother since most things want a number in JS (for setTimeout fallback type situations).

I can totally be making this up, but we're not breaking anything here either.

Hey,

Awesome plugin...I am having trouble figuring out the best way to configure purgeCSS to not delete this:

/* base styles for the default transition duration, timing function, and delay (when they differ from the CSS defaults) */
*, *::before, *::after {
  --transition-duration: 250ms;
  /* when the default timing function is a value other than "ease": */
  --transition-timing-function: [default-timing-function];
  /* when the default delay is a value other than zero: */
  --transition-delay: [default-delay];
}

I have the standard configuration for tailwind with purgeCSS and I can't think of exactly how to whitelist this specific part I guess I could fork and wrap that in a purgeCSS ignore but maybe that should be the default? Or maybe you can think of a way to whitelist that part of it.

Cheers!

tailwindcss-transitions sets base styles for transition-property & transition-duration like this:

*, *::before, *::after {
  transition-property: none;
  transition-duration: 250ms;
}

In my opinion it's against utility-first because every element gets those base styles even though they may not even need it. And that might cause an uncontrollable behavior in some cases.

Is there a better approch for this?

Is` there a way to apply the transition to extracted css classes with [@apply]?

.btn {
    @apply bg-indigo-600 text-indigo-100;
}

.btn:hover {
    @apply bg-indigo-300 text-indigo-900;
}

/* .btn transition 
transition-bg transition-text
*/

I'm fairly new to Tailwind so apologies if this is an ignorant question.

I install it (npm ...) and have this in my tailwind config file:

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            colors: {
                'hyperia-blue': '#02C4D9',
            },
            fontFamily: {
                'display': ['Roboto', 'sans']
            },
        },
        plugins: [
            require('tailwindcss-transitions')(),
        ],
    },
}

When I run npm run watch there are no transition classes in my base.css. What am I doing wrong?

Thanks.

I'm using the latest version of tailwindcss and tailwindcss-transitions. When I use the theme: { extend:{} } syntax to add, as an example, a "margin" transitionProperty, the resulting compiled css will only contains the .transition-margin utility.

Example code: theme: { extend: { transitionProperty: { 'margin': 'margin' } } }.

Am I doing something wrong? I'm using the same syntax for the core values of tailwindcss and it's working as intended by adding new values and replacing existing ones without deleting the other pre-existing ones.

Bumps lodash from 4.17.11 to 4.17.13.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

I frequently utilize :before and :after to generate gradient animations. I believe there should be an option to add those selectors into baseStyles. It's not a huge deal, but I'm used to only declaring transition-all so I almost always forget to on these classes.

I personally think the default should be *, *::before, *::after. I believe that would get all visual elements where a transition is possible.

Bumps acorn from 6.4.0 to 6.4.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.