Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from Nov 11, 2020

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.

None yet

1 participant