From 23ba99df041c715ea5aaed66043a868e402d9829 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 24 Dec 2019 08:10:49 -0500 Subject: [PATCH 1/2] Add transition utilities --- .../fixtures/tailwind-output-important.css | 340 ++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 340 ++++++++++++++++++ src/corePlugins.js | 18 +- src/plugins/transitionDuration.js | 5 + src/plugins/transitionProperty.js | 5 + src/plugins/transitionTimingFunction.js | 5 + stubs/defaultConfig.stub.js | 27 ++ 7 files changed, 734 insertions(+), 6 deletions(-) create mode 100644 src/plugins/transitionDuration.js create mode 100644 src/plugins/transitionProperty.js create mode 100644 src/plugins/transitionTimingFunction.js diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 2eeb4428734d..28c1a3401ba1 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -10294,6 +10294,74 @@ video { --transform-translate-y: 100% !important; } +.transition-none { + transition-property: none !important; +} + +.transition-all { + transition-property: all !important; +} + +.transition { + transition-property: background-color, border-color, color, opacity, transform !important; +} + +.transition-colors { + transition-property: background-color, border-color, color !important; +} + +.transition-opacity { + transition-property: opacity !important; +} + +.transition-transform { + transition-property: transform !important; +} + +.ease-linear { + transition-timing-function: linear !important; +} + +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; +} + +.ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; +} + +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +.transition-fastest { + transition-duration: 75ms !important; +} + +.transition-faster { + transition-duration: 100ms !important; +} + +.transition-fast { + transition-duration: 150ms !important; +} + +.transition-medium { + transition-duration: 200ms !important; +} + +.transition-slow { + transition-duration: 300ms !important; +} + +.transition-slower { + transition-duration: 500ms !important; +} + +.transition-slowest { + transition-duration: 700ms !important; +} + .example { font-weight: 700; color: #f56565; @@ -19989,6 +20057,74 @@ video { --transform-translate-y: 100% !important; } + .sm\:transition-none { + transition-property: none !important; + } + + .sm\:transition-all { + transition-property: all !important; + } + + .sm\:transition { + transition-property: background-color, border-color, color, opacity, transform !important; + } + + .sm\:transition-colors { + transition-property: background-color, border-color, color !important; + } + + .sm\:transition-opacity { + transition-property: opacity !important; + } + + .sm\:transition-transform { + transition-property: transform !important; + } + + .sm\:ease-linear { + transition-timing-function: linear !important; + } + + .sm\:ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; + } + + .sm\:ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; + } + + .sm\:ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; + } + + .sm\:transition-fastest { + transition-duration: 75ms !important; + } + + .sm\:transition-faster { + transition-duration: 100ms !important; + } + + .sm\:transition-fast { + transition-duration: 150ms !important; + } + + .sm\:transition-medium { + transition-duration: 200ms !important; + } + + .sm\:transition-slow { + transition-duration: 300ms !important; + } + + .sm\:transition-slower { + transition-duration: 500ms !important; + } + + .sm\:transition-slowest { + transition-duration: 700ms !important; + } + .sm\:example { font-weight: 700; color: #f56565; @@ -29685,6 +29821,74 @@ video { --transform-translate-y: 100% !important; } + .md\:transition-none { + transition-property: none !important; + } + + .md\:transition-all { + transition-property: all !important; + } + + .md\:transition { + transition-property: background-color, border-color, color, opacity, transform !important; + } + + .md\:transition-colors { + transition-property: background-color, border-color, color !important; + } + + .md\:transition-opacity { + transition-property: opacity !important; + } + + .md\:transition-transform { + transition-property: transform !important; + } + + .md\:ease-linear { + transition-timing-function: linear !important; + } + + .md\:ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; + } + + .md\:ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; + } + + .md\:ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; + } + + .md\:transition-fastest { + transition-duration: 75ms !important; + } + + .md\:transition-faster { + transition-duration: 100ms !important; + } + + .md\:transition-fast { + transition-duration: 150ms !important; + } + + .md\:transition-medium { + transition-duration: 200ms !important; + } + + .md\:transition-slow { + transition-duration: 300ms !important; + } + + .md\:transition-slower { + transition-duration: 500ms !important; + } + + .md\:transition-slowest { + transition-duration: 700ms !important; + } + .md\:example { font-weight: 700; color: #f56565; @@ -39381,6 +39585,74 @@ video { --transform-translate-y: 100% !important; } + .lg\:transition-none { + transition-property: none !important; + } + + .lg\:transition-all { + transition-property: all !important; + } + + .lg\:transition { + transition-property: background-color, border-color, color, opacity, transform !important; + } + + .lg\:transition-colors { + transition-property: background-color, border-color, color !important; + } + + .lg\:transition-opacity { + transition-property: opacity !important; + } + + .lg\:transition-transform { + transition-property: transform !important; + } + + .lg\:ease-linear { + transition-timing-function: linear !important; + } + + .lg\:ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; + } + + .lg\:ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; + } + + .lg\:ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; + } + + .lg\:transition-fastest { + transition-duration: 75ms !important; + } + + .lg\:transition-faster { + transition-duration: 100ms !important; + } + + .lg\:transition-fast { + transition-duration: 150ms !important; + } + + .lg\:transition-medium { + transition-duration: 200ms !important; + } + + .lg\:transition-slow { + transition-duration: 300ms !important; + } + + .lg\:transition-slower { + transition-duration: 500ms !important; + } + + .lg\:transition-slowest { + transition-duration: 700ms !important; + } + .lg\:example { font-weight: 700; color: #f56565; @@ -49077,6 +49349,74 @@ video { --transform-translate-y: 100% !important; } + .xl\:transition-none { + transition-property: none !important; + } + + .xl\:transition-all { + transition-property: all !important; + } + + .xl\:transition { + transition-property: background-color, border-color, color, opacity, transform !important; + } + + .xl\:transition-colors { + transition-property: background-color, border-color, color !important; + } + + .xl\:transition-opacity { + transition-property: opacity !important; + } + + .xl\:transition-transform { + transition-property: transform !important; + } + + .xl\:ease-linear { + transition-timing-function: linear !important; + } + + .xl\:ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; + } + + .xl\:ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; + } + + .xl\:ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; + } + + .xl\:transition-fastest { + transition-duration: 75ms !important; + } + + .xl\:transition-faster { + transition-duration: 100ms !important; + } + + .xl\:transition-fast { + transition-duration: 150ms !important; + } + + .xl\:transition-medium { + transition-duration: 200ms !important; + } + + .xl\:transition-slow { + transition-duration: 300ms !important; + } + + .xl\:transition-slower { + transition-duration: 500ms !important; + } + + .xl\:transition-slowest { + transition-duration: 700ms !important; + } + .xl\:example { font-weight: 700; color: #f56565; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index c152840bb604..f2d3c3114c98 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -10294,6 +10294,74 @@ video { --transform-translate-y: 100%; } +.transition-none { + transition-property: none; +} + +.transition-all { + transition-property: all; +} + +.transition { + transition-property: background-color, border-color, color, opacity, transform; +} + +.transition-colors { + transition-property: background-color, border-color, color; +} + +.transition-opacity { + transition-property: opacity; +} + +.transition-transform { + transition-property: transform; +} + +.ease-linear { + transition-timing-function: linear; +} + +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +.ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); +} + +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.transition-fastest { + transition-duration: 75ms; +} + +.transition-faster { + transition-duration: 100ms; +} + +.transition-fast { + transition-duration: 150ms; +} + +.transition-medium { + transition-duration: 200ms; +} + +.transition-slow { + transition-duration: 300ms; +} + +.transition-slower { + transition-duration: 500ms; +} + +.transition-slowest { + transition-duration: 700ms; +} + .example { font-weight: 700; color: #f56565; @@ -19989,6 +20057,74 @@ video { --transform-translate-y: 100%; } + .sm\:transition-none { + transition-property: none; + } + + .sm\:transition-all { + transition-property: all; + } + + .sm\:transition { + transition-property: background-color, border-color, color, opacity, transform; + } + + .sm\:transition-colors { + transition-property: background-color, border-color, color; + } + + .sm\:transition-opacity { + transition-property: opacity; + } + + .sm\:transition-transform { + transition-property: transform; + } + + .sm\:ease-linear { + transition-timing-function: linear; + } + + .sm\:ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + } + + .sm\:ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + + .sm\:ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + + .sm\:transition-fastest { + transition-duration: 75ms; + } + + .sm\:transition-faster { + transition-duration: 100ms; + } + + .sm\:transition-fast { + transition-duration: 150ms; + } + + .sm\:transition-medium { + transition-duration: 200ms; + } + + .sm\:transition-slow { + transition-duration: 300ms; + } + + .sm\:transition-slower { + transition-duration: 500ms; + } + + .sm\:transition-slowest { + transition-duration: 700ms; + } + .sm\:example { font-weight: 700; color: #f56565; @@ -29685,6 +29821,74 @@ video { --transform-translate-y: 100%; } + .md\:transition-none { + transition-property: none; + } + + .md\:transition-all { + transition-property: all; + } + + .md\:transition { + transition-property: background-color, border-color, color, opacity, transform; + } + + .md\:transition-colors { + transition-property: background-color, border-color, color; + } + + .md\:transition-opacity { + transition-property: opacity; + } + + .md\:transition-transform { + transition-property: transform; + } + + .md\:ease-linear { + transition-timing-function: linear; + } + + .md\:ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + } + + .md\:ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + + .md\:ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + + .md\:transition-fastest { + transition-duration: 75ms; + } + + .md\:transition-faster { + transition-duration: 100ms; + } + + .md\:transition-fast { + transition-duration: 150ms; + } + + .md\:transition-medium { + transition-duration: 200ms; + } + + .md\:transition-slow { + transition-duration: 300ms; + } + + .md\:transition-slower { + transition-duration: 500ms; + } + + .md\:transition-slowest { + transition-duration: 700ms; + } + .md\:example { font-weight: 700; color: #f56565; @@ -39381,6 +39585,74 @@ video { --transform-translate-y: 100%; } + .lg\:transition-none { + transition-property: none; + } + + .lg\:transition-all { + transition-property: all; + } + + .lg\:transition { + transition-property: background-color, border-color, color, opacity, transform; + } + + .lg\:transition-colors { + transition-property: background-color, border-color, color; + } + + .lg\:transition-opacity { + transition-property: opacity; + } + + .lg\:transition-transform { + transition-property: transform; + } + + .lg\:ease-linear { + transition-timing-function: linear; + } + + .lg\:ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + } + + .lg\:ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + + .lg\:ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + + .lg\:transition-fastest { + transition-duration: 75ms; + } + + .lg\:transition-faster { + transition-duration: 100ms; + } + + .lg\:transition-fast { + transition-duration: 150ms; + } + + .lg\:transition-medium { + transition-duration: 200ms; + } + + .lg\:transition-slow { + transition-duration: 300ms; + } + + .lg\:transition-slower { + transition-duration: 500ms; + } + + .lg\:transition-slowest { + transition-duration: 700ms; + } + .lg\:example { font-weight: 700; color: #f56565; @@ -49077,6 +49349,74 @@ video { --transform-translate-y: 100%; } + .xl\:transition-none { + transition-property: none; + } + + .xl\:transition-all { + transition-property: all; + } + + .xl\:transition { + transition-property: background-color, border-color, color, opacity, transform; + } + + .xl\:transition-colors { + transition-property: background-color, border-color, color; + } + + .xl\:transition-opacity { + transition-property: opacity; + } + + .xl\:transition-transform { + transition-property: transform; + } + + .xl\:ease-linear { + transition-timing-function: linear; + } + + .xl\:ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + } + + .xl\:ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + + .xl\:ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + + .xl\:transition-fastest { + transition-duration: 75ms; + } + + .xl\:transition-faster { + transition-duration: 100ms; + } + + .xl\:transition-fast { + transition-duration: 150ms; + } + + .xl\:transition-medium { + transition-duration: 200ms; + } + + .xl\:transition-slow { + transition-duration: 300ms; + } + + .xl\:transition-slower { + transition-duration: 500ms; + } + + .xl\:transition-slowest { + transition-duration: 700ms; + } + .xl\:example { font-weight: 700; color: #f56565; diff --git a/src/corePlugins.js b/src/corePlugins.js index 6e45b078aaf4..4155acab48b5 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -69,12 +69,6 @@ import whitespace from './plugins/whitespace' import wordBreak from './plugins/wordBreak' import width from './plugins/width' import zIndex from './plugins/zIndex' -import transform from './plugins/transform' -import transformOrigin from './plugins/transformOrigin' -import scale from './plugins/scale' -import rotate from './plugins/rotate' -import translate from './plugins/translate' -import skew from './plugins/skew' import gap from './plugins/gap' import columnGap from './plugins/columnGap' import rowGap from './plugins/rowGap' @@ -87,6 +81,15 @@ import gridTemplateRows from './plugins/gridTemplateRows' import gridRow from './plugins/gridRow' import gridRowStart from './plugins/gridRowStart' import gridRowEnd from './plugins/gridRowEnd' +import transform from './plugins/transform' +import transformOrigin from './plugins/transformOrigin' +import scale from './plugins/scale' +import rotate from './plugins/rotate' +import translate from './plugins/translate' +import skew from './plugins/skew' +import transitionProperty from './plugins/transitionProperty' +import transitionTimingFunction from './plugins/transitionTimingFunction' +import transitionDuration from './plugins/transitionDuration' import configurePlugins from './util/configurePlugins' @@ -181,5 +184,8 @@ export default function({ corePlugins: corePluginConfig }) { rotate, translate, skew, + transitionProperty, + transitionTimingFunction, + transitionDuration, }) } diff --git a/src/plugins/transitionDuration.js b/src/plugins/transitionDuration.js new file mode 100644 index 000000000000..e20a25985e5a --- /dev/null +++ b/src/plugins/transitionDuration.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('transitionDuration', [['transition', ['transitionDuration']]]) +} diff --git a/src/plugins/transitionProperty.js b/src/plugins/transitionProperty.js new file mode 100644 index 000000000000..7d55bc1380a1 --- /dev/null +++ b/src/plugins/transitionProperty.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('transitionProperty', [['transition', ['transitionProperty']]]) +} diff --git a/src/plugins/transitionTimingFunction.js b/src/plugins/transitionTimingFunction.js new file mode 100644 index 000000000000..c68d73eb2c48 --- /dev/null +++ b/src/plugins/transitionTimingFunction.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('transitionTimingFunction', [['ease', ['transitionTimingFunction']]]) +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 5a4039a27a82..7aa291674228 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -525,6 +525,29 @@ module.exports = { full: '100%', }), skew: {}, + transitionProperty: { + none: 'none', + all: 'all', + default: 'background-color, border-color, color, opacity, transform', + colors: 'background-color, border-color, color', + opacity: 'opacity', + transform: 'transform', + }, + transitionTimingFunction: { + linear: 'linear', + in: 'cubic-bezier(0.4, 0, 1, 1)', + out: 'cubic-bezier(0, 0, 0.2, 1)', + 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', + }, + transitionDuration: { + fastest: '75ms', + faster: '100ms', + fast: '150ms', + medium: '200ms', + slow: '300ms', + slower: '500ms', + slowest: '700ms', + }, }, variants: { accessibility: ['responsive', 'focus'], @@ -614,6 +637,10 @@ module.exports = { rotate: ['responsive', 'hover', 'focus'], translate: ['responsive', 'hover', 'focus'], skew: ['responsive', 'hover', 'focus'], + transitionProperty: ['responsive'], + transitionTimingFunction: ['responsive'], + transitionDuration: ['responsive'], + transitionDelay: ['responsive'], }, corePlugins: {}, plugins: [], From d5199e40756691b149c6a1b998bf62aedd80f30d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 8 Jan 2020 10:09:00 -0500 Subject: [PATCH 2/2] Rename transition-duration utilities to `duration-{ms}` --- .../fixtures/tailwind-output-important.css | 90 +++++++++++-------- __tests__/fixtures/tailwind-output.css | 90 +++++++++++-------- src/plugins/transitionDuration.js | 2 +- stubs/defaultConfig.stub.js | 15 ++-- 4 files changed, 119 insertions(+), 78 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 28c1a3401ba1..4c1fb2275340 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -10334,34 +10334,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; } -.transition-fastest { +.duration-75 { transition-duration: 75ms !important; } -.transition-faster { +.duration-100 { transition-duration: 100ms !important; } -.transition-fast { +.duration-150 { transition-duration: 150ms !important; } -.transition-medium { +.duration-200 { transition-duration: 200ms !important; } -.transition-slow { +.duration-300 { transition-duration: 300ms !important; } -.transition-slower { +.duration-500 { transition-duration: 500ms !important; } -.transition-slowest { +.duration-700 { transition-duration: 700ms !important; } +.duration-1000 { + transition-duration: 1000ms !important; +} + .example { font-weight: 700; color: #f56565; @@ -20097,34 +20101,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; } - .sm\:transition-fastest { + .sm\:duration-75 { transition-duration: 75ms !important; } - .sm\:transition-faster { + .sm\:duration-100 { transition-duration: 100ms !important; } - .sm\:transition-fast { + .sm\:duration-150 { transition-duration: 150ms !important; } - .sm\:transition-medium { + .sm\:duration-200 { transition-duration: 200ms !important; } - .sm\:transition-slow { + .sm\:duration-300 { transition-duration: 300ms !important; } - .sm\:transition-slower { + .sm\:duration-500 { transition-duration: 500ms !important; } - .sm\:transition-slowest { + .sm\:duration-700 { transition-duration: 700ms !important; } + .sm\:duration-1000 { + transition-duration: 1000ms !important; + } + .sm\:example { font-weight: 700; color: #f56565; @@ -29861,34 +29869,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; } - .md\:transition-fastest { + .md\:duration-75 { transition-duration: 75ms !important; } - .md\:transition-faster { + .md\:duration-100 { transition-duration: 100ms !important; } - .md\:transition-fast { + .md\:duration-150 { transition-duration: 150ms !important; } - .md\:transition-medium { + .md\:duration-200 { transition-duration: 200ms !important; } - .md\:transition-slow { + .md\:duration-300 { transition-duration: 300ms !important; } - .md\:transition-slower { + .md\:duration-500 { transition-duration: 500ms !important; } - .md\:transition-slowest { + .md\:duration-700 { transition-duration: 700ms !important; } + .md\:duration-1000 { + transition-duration: 1000ms !important; + } + .md\:example { font-weight: 700; color: #f56565; @@ -39625,34 +39637,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; } - .lg\:transition-fastest { + .lg\:duration-75 { transition-duration: 75ms !important; } - .lg\:transition-faster { + .lg\:duration-100 { transition-duration: 100ms !important; } - .lg\:transition-fast { + .lg\:duration-150 { transition-duration: 150ms !important; } - .lg\:transition-medium { + .lg\:duration-200 { transition-duration: 200ms !important; } - .lg\:transition-slow { + .lg\:duration-300 { transition-duration: 300ms !important; } - .lg\:transition-slower { + .lg\:duration-500 { transition-duration: 500ms !important; } - .lg\:transition-slowest { + .lg\:duration-700 { transition-duration: 700ms !important; } + .lg\:duration-1000 { + transition-duration: 1000ms !important; + } + .lg\:example { font-weight: 700; color: #f56565; @@ -49389,34 +49405,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; } - .xl\:transition-fastest { + .xl\:duration-75 { transition-duration: 75ms !important; } - .xl\:transition-faster { + .xl\:duration-100 { transition-duration: 100ms !important; } - .xl\:transition-fast { + .xl\:duration-150 { transition-duration: 150ms !important; } - .xl\:transition-medium { + .xl\:duration-200 { transition-duration: 200ms !important; } - .xl\:transition-slow { + .xl\:duration-300 { transition-duration: 300ms !important; } - .xl\:transition-slower { + .xl\:duration-500 { transition-duration: 500ms !important; } - .xl\:transition-slowest { + .xl\:duration-700 { transition-duration: 700ms !important; } + .xl\:duration-1000 { + transition-duration: 1000ms !important; + } + .xl\:example { font-weight: 700; color: #f56565; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index f2d3c3114c98..d1c1e5521116 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -10334,34 +10334,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } -.transition-fastest { +.duration-75 { transition-duration: 75ms; } -.transition-faster { +.duration-100 { transition-duration: 100ms; } -.transition-fast { +.duration-150 { transition-duration: 150ms; } -.transition-medium { +.duration-200 { transition-duration: 200ms; } -.transition-slow { +.duration-300 { transition-duration: 300ms; } -.transition-slower { +.duration-500 { transition-duration: 500ms; } -.transition-slowest { +.duration-700 { transition-duration: 700ms; } +.duration-1000 { + transition-duration: 1000ms; +} + .example { font-weight: 700; color: #f56565; @@ -20097,34 +20101,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - .sm\:transition-fastest { + .sm\:duration-75 { transition-duration: 75ms; } - .sm\:transition-faster { + .sm\:duration-100 { transition-duration: 100ms; } - .sm\:transition-fast { + .sm\:duration-150 { transition-duration: 150ms; } - .sm\:transition-medium { + .sm\:duration-200 { transition-duration: 200ms; } - .sm\:transition-slow { + .sm\:duration-300 { transition-duration: 300ms; } - .sm\:transition-slower { + .sm\:duration-500 { transition-duration: 500ms; } - .sm\:transition-slowest { + .sm\:duration-700 { transition-duration: 700ms; } + .sm\:duration-1000 { + transition-duration: 1000ms; + } + .sm\:example { font-weight: 700; color: #f56565; @@ -29861,34 +29869,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - .md\:transition-fastest { + .md\:duration-75 { transition-duration: 75ms; } - .md\:transition-faster { + .md\:duration-100 { transition-duration: 100ms; } - .md\:transition-fast { + .md\:duration-150 { transition-duration: 150ms; } - .md\:transition-medium { + .md\:duration-200 { transition-duration: 200ms; } - .md\:transition-slow { + .md\:duration-300 { transition-duration: 300ms; } - .md\:transition-slower { + .md\:duration-500 { transition-duration: 500ms; } - .md\:transition-slowest { + .md\:duration-700 { transition-duration: 700ms; } + .md\:duration-1000 { + transition-duration: 1000ms; + } + .md\:example { font-weight: 700; color: #f56565; @@ -39625,34 +39637,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - .lg\:transition-fastest { + .lg\:duration-75 { transition-duration: 75ms; } - .lg\:transition-faster { + .lg\:duration-100 { transition-duration: 100ms; } - .lg\:transition-fast { + .lg\:duration-150 { transition-duration: 150ms; } - .lg\:transition-medium { + .lg\:duration-200 { transition-duration: 200ms; } - .lg\:transition-slow { + .lg\:duration-300 { transition-duration: 300ms; } - .lg\:transition-slower { + .lg\:duration-500 { transition-duration: 500ms; } - .lg\:transition-slowest { + .lg\:duration-700 { transition-duration: 700ms; } + .lg\:duration-1000 { + transition-duration: 1000ms; + } + .lg\:example { font-weight: 700; color: #f56565; @@ -49389,34 +49405,38 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - .xl\:transition-fastest { + .xl\:duration-75 { transition-duration: 75ms; } - .xl\:transition-faster { + .xl\:duration-100 { transition-duration: 100ms; } - .xl\:transition-fast { + .xl\:duration-150 { transition-duration: 150ms; } - .xl\:transition-medium { + .xl\:duration-200 { transition-duration: 200ms; } - .xl\:transition-slow { + .xl\:duration-300 { transition-duration: 300ms; } - .xl\:transition-slower { + .xl\:duration-500 { transition-duration: 500ms; } - .xl\:transition-slowest { + .xl\:duration-700 { transition-duration: 700ms; } + .xl\:duration-1000 { + transition-duration: 1000ms; + } + .xl\:example { font-weight: 700; color: #f56565; diff --git a/src/plugins/transitionDuration.js b/src/plugins/transitionDuration.js index e20a25985e5a..d109308922b6 100644 --- a/src/plugins/transitionDuration.js +++ b/src/plugins/transitionDuration.js @@ -1,5 +1,5 @@ import createUtilityPlugin from '../util/createUtilityPlugin' export default function() { - return createUtilityPlugin('transitionDuration', [['transition', ['transitionDuration']]]) + return createUtilityPlugin('transitionDuration', [['duration', ['transitionDuration']]]) } diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 7aa291674228..df882c4766a0 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -540,13 +540,14 @@ module.exports = { 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', }, transitionDuration: { - fastest: '75ms', - faster: '100ms', - fast: '150ms', - medium: '200ms', - slow: '300ms', - slower: '500ms', - slowest: '700ms', + '75': '75ms', + '100': '100ms', + '150': '150ms', + '200': '200ms', + '300': '300ms', + '500': '500ms', + '700': '700ms', + '1000': '1000ms', }, }, variants: {