Skip to content

Conversation

@adamwathan
Copy link
Member

This PR makes it possible to define a default duration and timing function that is automatically applied any time you add any transitionProperty utility, using the DEFAULT keyword under the transitionTimingFunction and transitionDuration sections of your theme:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      transitionDuration: {
        DEFAULT: '150ms',
      },
      transitionTimingFunction: {
        DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
      },
    }
  }
}

This config for example lets you simplify this sort of code:

- <button class="... transition ease-in-out duration-150">
+ <button class="... transition">

You can still easily override the defaults by layering on duration or timing function utilities:

<button class="... transition ease-out duration-300">

This PR also makes 150ms the default duration by default, and the ease-in-out curve the default transition timing function curve by default.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants