Tailwind - Override default transition duration - tailwind-css

Question

Default is 150ms, was looking to extend this to 250ms as an application default.
Tried everything I could think of, last attempt being
transitionDuration: {
DEFAULT: '250ms'
},
in tailwind.config.js under theme, theme.extend, variants, and variants.extend.
Any help would be appreciated!

Answer 1

theme: {
transitionDuration: {
DEFAULT: '250ms'
}
}
in your tailwind.config.js should work.
Demo: https://play.tailwindcss.com/zSWIMghZQf
(Default transition duration overwritten to 2000ms.)
For reference: With npx tailwindcss init --full you can create a configuration file that contains all tailwind default values.

Answer 2

Just like ptts answered before me, inserting an override in the theme section of your tailwind.config.js will do the trick.
What I'd like to add is that the new value for transitionDuration will completely replace Tailwind’s default configuration for that key, and the initial transition duration utilities will not be generated. So if you only define DEFAULT under the transitionDuration key, your classes like .duration-500 will not work.
The solution is to define the full set of duration values you might use. For your convenience, here's the full set from the default theme:
transitionDuration: {
DEFAULT: '150ms',
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
},
If you want to update the DEFAULT while still retaining all of the other durations, use something like:
transitionDuration: {
DEFAULT: '500ms',
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
},