Skip to content

Add support for default duration and timing function to transition property utilities - #2755

Merged
adamwathan merged 1 commit into
masterfrom
default-transitions
Nov 11, 2020
Merged

Add support for default duration and timing function to transition property utilities#2755
adamwathan merged 1 commit into
masterfrom
default-transitions

Conversation

@adamwathan

Copy link
Copy Markdown
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.

1 participant