Transforms Plugin for Tailwind CSS
Installation
npm install tailwindcss-transforms
Usage
// tailwind.config.js theme: transform: // defaults to this value 'none': 'none' transformOrigin: // defaults to these values 't': 'top' 'tr': 'top right' 'r': 'right' 'br': 'bottom right' 'b': 'bottom' 'bl': 'bottom left' 'l': 'left' 'tl': 'top left' translate: // defaults to {} '1/2': '50%' 'full': '100%' 'right-up': '100%' '-100%' '3d': '40px' '-60px' '-130px' scale: // defaults to {} '90': '0.9' '100': '1' '110': '1.1' '-100': '-1' 'stretched-x': '2' '0.5' 'stretched-y': '0.5' '2' '3d': '0.5' '1' '2' rotate: // defaults to {} '90': '90deg' '180': '180deg' '270': '270deg' '3d': '0' '1' '0.5' '45deg' skew: // defaults to {} '-5': '-5deg' '5': '5deg' perspective: // defaults to {} 'none': 'none' '250': '250px' '500': '500px' '750': '750px' '1000': '1000px' perspectiveOrigin: // defaults to these values 't': 'top' 'tr': 'top right' 'r': 'right' 'br': 'bottom right' 'b': 'bottom' 'bl': 'bottom left' 'l': 'left' 'tl': 'top left' variants: // all the following default to ['responsive'] transform: 'responsive' transformOrigin: 'responsive' translate: 'responsive' scale: 'responsive' rotate: 'responsive' skew: 'responsive' perspective: 'responsive' perspectiveOrigin: 'responsive' transformStyle: 'responsive' backfaceVisibility: 'responsive' transformBox: 'responsive' plugins: '3d': false // defaults to false
This plugin generates the following utilities:
/* configurable with the "transform" theme object */ /* configurable with the "transformOrigin" theme object */ /* configurable with the "translate" theme object *//* when the key starts with a minus sign: *//* when the value is an array with two values: *//* when the value is an array with three values: */ /* configurable with the "scale" theme object *//* when the key starts with a minus sign: *//* when the value is an array with two values: *//* when the value is an array with three values: */ /* configurable with the "rotate" theme object *//* when the key starts with a minus sign: *//* when the value is an array: */ /* configurable with the "skew" theme object *//* when the key starts with a minus sign: */ /* configurable with the "perspective" theme object (only if the "3d" option is true) */ /* configurable with the "perspectiveOrigin" theme object (only if the "3d" option is true) */ /* generated when the "3d" option is set to true */ /* not configurable (except for variants) */