diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 2eeb44287..28c1a3401 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 c152840bb..f2d3c3114 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 6e45b078a..4155acab4 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 000000000..e20a25985 --- /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 000000000..7d55bc138 --- /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 000000000..c68d73eb2 --- /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 5a4039a27..7aa291674 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: [],