diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 28c1a3401..4c1fb2275 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 f2d3c3114..d1c1e5521 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 e20a25985..d10930892 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 7aa291674..df882c476 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: {