{"id":13480299,"url":"https://github.com/benface/tailwindcss-transforms","last_synced_at":"2025-03-27T10:31:20.457Z","repository":{"id":65412312,"uuid":"132368408","full_name":"benface/tailwindcss-transforms","owner":"benface","description":"[DEPRECATED] Tailwind CSS plugin to generate transform utilities","archived":true,"fork":false,"pushed_at":"2020-03-15T12:50:06.000Z","size":396,"stargazers_count":100,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T02:26:52.192Z","etag":null,"topics":["tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benface.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-06T19:14:23.000Z","updated_at":"2025-02-06T00:40:45.000Z","dependencies_parsed_at":"2023-01-22T07:45:15.472Z","dependency_job_id":null,"html_url":"https://github.com/benface/tailwindcss-transforms","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-transforms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-transforms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-transforms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-transforms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benface","download_url":"https://codeload.github.com/benface/tailwindcss-transforms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245826836,"owners_count":20678863,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T17:00:36.991Z","updated_at":"2025-03-27T10:31:20.200Z","avatar_url":"https://github.com/benface.png","language":"JavaScript","readme":"# ⛔️ DEPRECATED\n\nTailwind CSS 1.2 (released in February 2020) has utilities for [scale](https://tailwindcss.com/docs/scale), [rotate](https://tailwindcss.com/docs/rotate), [translate](https://tailwindcss.com/docs/translate), [skew](https://tailwindcss.com/docs/skew), and [transform origin](https://tailwindcss.com/docs/transform-origin), and contrary to this plugin, they are fully composable (e.g. a single element can have more than one transform type). It doesn’t have 3D transforms (`translateZ`, `translate3d`, `scaleZ`, `scale3d`, `rotateX`, `rotateY`, `rotate3d`, `perspective`, `transform-style`, and `backface-visibility`) but those are not very common and can be added to projects manually on a case-by-case basis.\n\n# Transforms Plugin for Tailwind CSS\n\n## Installation\n\n```bash\nnpm install tailwindcss-transforms\n```\n\n## Usage\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    transform: { // defaults to this value\n      'none': 'none',\n    },\n    transformOrigin: { // defaults to these values\n      't': 'top',\n      'tr': 'top right',\n      'r': 'right',\n      'br': 'bottom right',\n      'b': 'bottom',\n      'bl': 'bottom left',\n      'l': 'left',\n      'tl': 'top left',\n    },\n    translate: { // defaults to {}\n      '1/2': '50%',\n      'full': '100%',\n      'right-up': ['100%', '-100%'],\n      '3d': ['40px', '-60px', '-130px'],\n    },\n    scale: { // defaults to {}\n      '90': '0.9',\n      '100': '1',\n      '110': '1.1',\n      '-100': '-1',\n      'stretched-x': ['2', '0.5'],\n      'stretched-y': ['0.5', '2'],\n      '3d': ['0.5', '1', '2'],\n    },\n    rotate: { // defaults to {}\n      '90': '90deg',\n      '180': '180deg',\n      '270': '270deg',\n      '3d': ['0', '1', '0.5', '45deg'],\n    },\n    skew: { // defaults to {}\n      '-5': '-5deg',\n      '5': '5deg',\n    },\n    perspective: { // defaults to {}\n      'none': 'none',\n      '250': '250px',\n      '500': '500px',\n      '750': '750px',\n      '1000': '1000px',\n    },\n    perspectiveOrigin: { // defaults to these values\n      't': 'top',\n      'tr': 'top right',\n      'r': 'right',\n      'br': 'bottom right',\n      'b': 'bottom',\n      'bl': 'bottom left',\n      'l': 'left',\n      'tl': 'top left',\n    },\n  },\n  variants: { // all the following default to ['responsive']\n    transform: ['responsive'],\n    transformOrigin: ['responsive'],\n    translate: ['responsive'],\n    scale: ['responsive'],\n    rotate: ['responsive'],\n    skew: ['responsive'],\n    perspective: ['responsive'],\n    perspectiveOrigin: ['responsive'],\n    transformStyle: ['responsive'],\n    backfaceVisibility: ['responsive'],\n    transformBox: ['responsive'],\n  },\n  plugins: [\n    require('tailwindcss-transforms')({\n      '3d': false, // defaults to false\n    }),\n  ],\n};\n```\n\nThis plugin generates the following utilities:\n\n```css\n/* configurable with the \"transform\" theme object */\n.transform-none {\n  transform: none;\n}\n\n/* configurable with the \"transformOrigin\" theme object */\n.transform-[key] {\n  transform-origin: [value];\n}\n\n/* configurable with the \"translate\" theme object */\n.translate-x-[key] {\n  transform: translateX([value]);\n}\n.translate-y-[key] {\n  transform: translateY([value]);\n}\n.translate-z-[key] { /* only if the \"3d\" option is true */\n  transform: translateZ([value]);\n}\n/* when the key starts with a minus sign: */\n.-translate-x-[key] {\n  transform: translateX([value]);\n}\n.-translate-y-[key] {\n  transform: translateY([value]);\n}\n.-translate-z-[key] { /* only if the \"3d\" option is true */\n  transform: translateZ([value]);\n}\n/* when the value is an array with two values: */\n.translate-[key] {\n  transform: translate([value-1], [value-2]);\n}\n/* when the value is an array with three values: */\n.translate-[key] {\n  transform: translate3d([value-1], [value-2], [value-3]);\n}\n\n/* configurable with the \"scale\" theme object */\n.scale-[key] {\n  transform: scale([value]);\n}\n.scale-x-[key] {\n  transform: scaleX([value]);\n}\n.scale-y-[key] {\n  transform: scaleY([value]);\n}\n.scale-z-[key] { /* only if the \"3d\" option is true */\n  transform: scaleZ([value]);\n}\n/* when the key starts with a minus sign: */\n.-scale-[key] {\n  transform: scale([value]);\n}\n.-scale-x-[key] {\n  transform: scaleX([value]);\n}\n.-scale-y-[key] {\n  transform: scaleY([value]);\n}\n.-scale-z-[key] { /* only if the \"3d\" option is true */\n  transform: scaleZ([value]);\n}\n/* when the value is an array with two values: */\n.scale-[key] {\n  transform: scale([value-1], [value-2]);\n}\n/* when the value is an array with three values: */\n.scale-[key] {\n  transform: scale3d([value-1], [value-2], [value-3]);\n}\n\n/* configurable with the \"rotate\" theme object */\n.rotate-[key] {\n  transform: rotate([value]);\n}\n.rotate-x-[key] { /* only if the \"3d\" option is true */\n  transform: rotateX([value]);\n}\n.rotate-y-[key] { /* only if the \"3d\" option is true */\n  transform: rotateY([value]);\n}\n/* when the key starts with a minus sign: */\n.-rotate-[key] {\n  transform: rotate([value]);\n}\n.-rotate-x-[key] { /* only if the \"3d\" option is true */\n  transform: rotateX([value]);\n}\n.-rotate-y-[key] { /* only if the \"3d\" option is true */\n  transform: rotateY([value]);\n}\n/* when the value is an array: */\n.rotate-[key] {\n  transform: rotate3d([value-1], [value-2], [value-3], [value-4]);\n}\n\n/* configurable with the \"skew\" theme object */\n.skew-x-[key] {\n  transform: skewX([value]);\n}\n.skew-y-[key] {\n  transform: skewY([value]);\n}\n/* when the key starts with a minus sign: */\n.-skew-x-[key] {\n  transform: skewX([value]);\n}\n.-skew-y-[key] {\n  transform: skewY([value]);\n}\n\n/* configurable with the \"perspective\" theme object (only if the \"3d\" option is true) */\n.perspective-[key] {\n  perspective: [value]\n}\n\n/* configurable with the \"perspectiveOrigin\" theme object (only if the \"3d\" option is true) */\n.perspective-[key] {\n  perspective-origin: [value]\n}\n\n/* generated when the \"3d\" option is set to true */\n.transform-flat {\n  transform-style: flat;\n}\n.transform-preserve-3d {\n  transform-style: preserve-3d;\n}\n.backface-visible {\n  backface-visibility: visible;\n}\n.backface-hidden {\n  backface-visibility: hidden;\n}\n\n/* not configurable (except for variants) */\n.transform-border {\n  transform-box: border-box;\n}\n.transform-fill {\n  transform-box: fill-box;\n}\n.transform-view {\n  transform-box: view-box;\n}\n```\n","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenface%2Ftailwindcss-transforms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenface%2Ftailwindcss-transforms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenface%2Ftailwindcss-transforms/lists"}