diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 5e2725b64..70e500103 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -8443,12 +8443,14 @@ video { } .transform { + --transform-translate-x: 0 !important; + --transform-translate-y: 0 !important; --transform-scale-x: 1 !important; --transform-scale-y: 1 !important; --transform-rotate: 0 !important; - --transform-translate-x: 0 !important; - --transform-translate-y: 0 !important; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important; + --transform-skew-x: 0 !important; + --transform-skew-y: 0 !important; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important; } .transform-none { @@ -17793,12 +17795,14 @@ video { } .sm\:transform { + --transform-translate-x: 0 !important; + --transform-translate-y: 0 !important; --transform-scale-x: 1 !important; --transform-scale-y: 1 !important; --transform-rotate: 0 !important; - --transform-translate-x: 0 !important; - --transform-translate-y: 0 !important; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important; + --transform-skew-x: 0 !important; + --transform-skew-y: 0 !important; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important; } .sm\:transform-none { @@ -27144,12 +27148,14 @@ video { } .md\:transform { + --transform-translate-x: 0 !important; + --transform-translate-y: 0 !important; --transform-scale-x: 1 !important; --transform-scale-y: 1 !important; --transform-rotate: 0 !important; - --transform-translate-x: 0 !important; - --transform-translate-y: 0 !important; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important; + --transform-skew-x: 0 !important; + --transform-skew-y: 0 !important; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important; } .md\:transform-none { @@ -36495,12 +36501,14 @@ video { } .lg\:transform { + --transform-translate-x: 0 !important; + --transform-translate-y: 0 !important; --transform-scale-x: 1 !important; --transform-scale-y: 1 !important; --transform-rotate: 0 !important; - --transform-translate-x: 0 !important; - --transform-translate-y: 0 !important; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important; + --transform-skew-x: 0 !important; + --transform-skew-y: 0 !important; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important; } .lg\:transform-none { @@ -45846,12 +45854,14 @@ video { } .xl\:transform { + --transform-translate-x: 0 !important; + --transform-translate-y: 0 !important; --transform-scale-x: 1 !important; --transform-scale-y: 1 !important; --transform-rotate: 0 !important; - --transform-translate-x: 0 !important; - --transform-translate-y: 0 !important; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important; + --transform-skew-x: 0 !important; + --transform-skew-y: 0 !important; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important; } .xl\:transform-none { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index f3066a5de..410d2403a 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -8443,12 +8443,14 @@ video { } .transform { + --transform-translate-x: 0; + --transform-translate-y: 0; --transform-scale-x: 1; --transform-scale-y: 1; --transform-rotate: 0; - --transform-translate-x: 0; - --transform-translate-y: 0; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)); + --transform-skew-x: 0; + --transform-skew-y: 0; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)); } .transform-none { @@ -17793,12 +17795,14 @@ video { } .sm\:transform { + --transform-translate-x: 0; + --transform-translate-y: 0; --transform-scale-x: 1; --transform-scale-y: 1; --transform-rotate: 0; - --transform-translate-x: 0; - --transform-translate-y: 0; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)); + --transform-skew-x: 0; + --transform-skew-y: 0; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)); } .sm\:transform-none { @@ -27144,12 +27148,14 @@ video { } .md\:transform { + --transform-translate-x: 0; + --transform-translate-y: 0; --transform-scale-x: 1; --transform-scale-y: 1; --transform-rotate: 0; - --transform-translate-x: 0; - --transform-translate-y: 0; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)); + --transform-skew-x: 0; + --transform-skew-y: 0; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)); } .md\:transform-none { @@ -36495,12 +36501,14 @@ video { } .lg\:transform { + --transform-translate-x: 0; + --transform-translate-y: 0; --transform-scale-x: 1; --transform-scale-y: 1; --transform-rotate: 0; - --transform-translate-x: 0; - --transform-translate-y: 0; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)); + --transform-skew-x: 0; + --transform-skew-y: 0; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)); } .lg\:transform-none { @@ -45846,12 +45854,14 @@ video { } .xl\:transform { + --transform-translate-x: 0; + --transform-translate-y: 0; --transform-scale-x: 1; --transform-scale-y: 1; --transform-rotate: 0; - --transform-translate-x: 0; - --transform-translate-y: 0; - transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)); + --transform-skew-x: 0; + --transform-skew-y: 0; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)); } .xl\:transform-none { diff --git a/src/corePlugins.js b/src/corePlugins.js index 36da4ac31..cc9014455 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -73,6 +73,7 @@ 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 configurePlugins from './util/configurePlugins' @@ -153,5 +154,6 @@ export default function({ corePlugins: corePluginConfig }) { scale, rotate, translate, + skew, }) } diff --git a/src/plugins/skew.js b/src/plugins/skew.js new file mode 100644 index 000000000..803aa57b3 --- /dev/null +++ b/src/plugins/skew.js @@ -0,0 +1,8 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('skew', [ + ['skew-x', ['--transform-skew-x']], + ['skew-y', ['--transform-skew-y']], + ]) +} diff --git a/src/plugins/transform.js b/src/plugins/transform.js index 3ac50276b..bb6194814 100644 --- a/src/plugins/transform.js +++ b/src/plugins/transform.js @@ -3,17 +3,21 @@ export default function() { addUtilities( { '.transform': { + '--transform-translate-x': '0', + '--transform-translate-y': '0', '--transform-scale-x': '1', '--transform-scale-y': '1', '--transform-rotate': '0', - '--transform-translate-x': '0', - '--transform-translate-y': '0', + '--transform-skew-x': '0', + '--transform-skew-y': '0', transform: [ + 'translateX(var(--transform-translate-x))', + 'translateY(var(--transform-translate-y))', 'scaleX(var(--transform-scale-x))', 'scaleY(var(--transform-scale-y))', 'rotate(var(--transform-rotate))', - 'translateX(var(--transform-translate-x))', - 'translateY(var(--transform-translate-y))', + 'skewX(var(--transform-skew-x))', + 'skewY(var(--transform-skew-y))', ].join(' '), }, '.transform-none': { transform: 'none' }, diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 9fb014a45..f8447e852 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -450,6 +450,7 @@ module.exports = { '1/2': '50%', full: '100%', }), + skew: {}, }, variants: { accessibility: ['responsive', 'focus'], @@ -525,6 +526,7 @@ module.exports = { scale: ['responsive', 'hover', 'focus'], rotate: ['responsive', 'hover', 'focus'], translate: ['responsive', 'hover', 'focus'], + skew: ['responsive', 'hover', 'focus'], }, corePlugins: {}, plugins: [],