Tailwind CSS plugin to generate transform utilities

  • By Benoît Rouleau
  • Last update: Sep 5, 2022
  • Comments: 12

⛔️ DEPRECATED

Tailwind CSS 1.2 (released in February 2020) has utilities for scale, rotate, translate, skew, and 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.

Transforms Plugin for Tailwind CSS

Installation

npm install tailwindcss-transforms

Usage

// tailwind.config.js
module.exports = {
  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: [
    require('tailwindcss-transforms')({
      '3d': false, // defaults to false
    }),
  ],
};

This plugin generates the following utilities:

/* configurable with the "transform" theme object */
.transform-none {
  transform: none;
}

/* configurable with the "transformOrigin" theme object */
.transform-[key] {
  transform-origin: [value];
}

/* configurable with the "translate" theme object */
.translate-x-[key] {
  transform: translateX([value]);
}
.translate-y-[key] {
  transform: translateY([value]);
}
.translate-z-[key] { /* only if the "3d" option is true */
  transform: translateZ([value]);
}
/* when the key starts with a minus sign: */
.-translate-x-[key] {
  transform: translateX([value]);
}
.-translate-y-[key] {
  transform: translateY([value]);
}
.-translate-z-[key] { /* only if the "3d" option is true */
  transform: translateZ([value]);
}
/* when the value is an array with two values: */
.translate-[key] {
  transform: translate([value-1], [value-2]);
}
/* when the value is an array with three values: */
.translate-[key] {
  transform: translate3d([value-1], [value-2], [value-3]);
}

/* configurable with the "scale" theme object */
.scale-[key] {
  transform: scale([value]);
}
.scale-x-[key] {
  transform: scaleX([value]);
}
.scale-y-[key] {
  transform: scaleY([value]);
}
.scale-z-[key] { /* only if the "3d" option is true */
  transform: scaleZ([value]);
}
/* when the key starts with a minus sign: */
.-scale-[key] {
  transform: scale([value]);
}
.-scale-x-[key] {
  transform: scaleX([value]);
}
.-scale-y-[key] {
  transform: scaleY([value]);
}
.-scale-z-[key] { /* only if the "3d" option is true */
  transform: scaleZ([value]);
}
/* when the value is an array with two values: */
.scale-[key] {
  transform: scale([value-1], [value-2]);
}
/* when the value is an array with three values: */
.scale-[key] {
  transform: scale3d([value-1], [value-2], [value-3]);
}

/* configurable with the "rotate" theme object */
.rotate-[key] {
  transform: rotate([value]);
}
.rotate-x-[key] { /* only if the "3d" option is true */
  transform: rotateX([value]);
}
.rotate-y-[key] { /* only if the "3d" option is true */
  transform: rotateY([value]);
}
/* when the key starts with a minus sign: */
.-rotate-[key] {
  transform: rotate([value]);
}
.-rotate-x-[key] { /* only if the "3d" option is true */
  transform: rotateX([value]);
}
.-rotate-y-[key] { /* only if the "3d" option is true */
  transform: rotateY([value]);
}
/* when the value is an array: */
.rotate-[key] {
  transform: rotate3d([value-1], [value-2], [value-3], [value-4]);
}

/* configurable with the "skew" theme object */
.skew-x-[key] {
  transform: skewX([value]);
}
.skew-y-[key] {
  transform: skewY([value]);
}
/* when the key starts with a minus sign: */
.-skew-x-[key] {
  transform: skewX([value]);
}
.-skew-y-[key] {
  transform: skewY([value]);
}

/* configurable with the "perspective" theme object (only if the "3d" option is true) */
.perspective-[key] {
  perspective: [value]
}

/* configurable with the "perspectiveOrigin" theme object (only if the "3d" option is true) */
.perspective-[key] {
  perspective-origin: [value]
}

/* generated when the "3d" option is set to true */
.transform-flat {
  transform-style: flat;
}
.transform-preserve-3d {
  transform-style: preserve-3d;
}
.backface-visible {
  backface-visibility: visible;
}
.backface-hidden {
  backface-visibility: hidden;
}

/* not configurable (except for variants) */
.transform-border {
  transform-box: border-box;
}
.transform-fill {
  transform-box: fill-box;
}
.transform-view {
  transform-box: view-box;
}

Github

https://github.com/benface/tailwindcss-transforms

Comments(12)

  • 1

    Unable to get transform classes to show up in my compiled CSS file.

    I've added the tailwindcss-transform package as a plugin in my tailwind.config.js file, and even though the postcss build passes without any issues, I can't seem to see the classes in my compiled, minified style.css. Is there any other pre-requisite I'm missing? facing this same issue in another Nuxt project I'm working on.

  • 2

    Add ability to generate custom transforms

    By introducing a customTransforms (or just transforms?) option which would let you control the full value of the transform property. Maybe the none value could be part of it by default?

  • 3

    Combining rotate and scale on hover does not seem to work

    I have classes like these:

    scale-100 hover:scale-110 rotate-180 hover:rotate-90

    If I remove the hover: rotate-90, the scale works, if I leave it, it does not. But: Having no rotate class on hover makes the item spin back to its original rotation state.

    Is that intended behaviour or a bug?

  • 4

    Add class selector to transformStyle & backfaceVisibility utilities

    The transformStyle and backfaceVisibility utility classes are missing the class selector ., was receiving this error:

    ERROR  in ./assets/css/tailwind.css

Syntax Error: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):                                                                            friendly-errors 00:39:37
SyntaxError

(121:1) Variant cannot be generated because selector contains no classes.

  119 | }
  120 |
> 121 | @tailwind utilities;
      | ^
  122 |
  • 5

    Bump handlebars from 4.1.2 to 4.5.3

    Bumps handlebars from 4.1.2 to 4.5.3.

    Changelog

    Sourced from handlebars's changelog.

    v4.5.3 - November 18th, 2019

    Bugfixes:

    • fix: add "no-prototype-builtins" eslint-rule and fix all occurences - f7f05d7
    • fix: add more properties required to be enumerable - 1988878

    Chores / Build:

    • fix: use !== 0 instead of != 0 - c02b05f
    • add chai and dirty-chai and sinon, for cleaner test-assertions and spies, deprecate old assertion-methods - 93e284e, 886ba86, 0817dad, 93516a0

    Security:

    • The properties __proto__, __defineGetter__, __defineSetter__ and __lookupGetter__ have been added to the list of "properties that must be enumerable". If a property by that name is found and not enumerable on its parent, it will silently evaluate to undefined. This is done in both the compiled template and the "lookup"-helper. This will prevent new Remote-Code-Execution exploits that have been published recently.

    Compatibility notes:

    • Due to the security-fixes. The semantics of the templates using __proto__, __defineGetter__, __defineSetter__ and __lookupGetter__ in the respect that those expression now return undefined rather than their actual value from the proto.
    • The semantics have not changed in cases where the properties are enumerable, as in:
    {
  __proto__: 'some string'
}
    • The change may be breaking in that respect, but we still only increase the patch-version, because the incompatible use-cases are not intended, undocumented and far less important than fixing Remote-Code-Execution exploits on existing systems.

    Commits

    v4.5.2 - November 13th, 2019

    Bugfixes

    • fix: use String(field) in lookup when checking for "constructor" - d541378
    • test: add fluent API for testing Handlebars - c2ac79c

    Compatibility notes:

    • no incompatibility are to be expected
    ... (truncated)
    Commits
    • c819c8b v4.5.3
    • 827c9d0 Update release notes
    • f7f05d7 fix: add "no-prototype-builtins" eslint-rule and fix all occurences
    • 1988878 fix: add more properties required to be enumerable
    • 886ba86 test/chore: add chai/expect and sinon to "runtime"-environment
    • 0817dad test: add sinon as global variable to eslint in the specs
    • 93516a0 test: add sinon.js for spies, deprecate current assertions
    • 93e284e chore: add chai and dirty-chai for better test assertions
    • c02b05f fix: use !== 0 instead of != 0
    • 8de121d v4.5.2
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 6

    No Copyright Licence

    Hi,

    I found your project it completely solves my problems but to use it on the project that I'm working on I need to have a copyright licence, do you think it could be possible to add it to the project?

    You're under no obligation to choose a license. However, without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work. If you're creating an open source project, we strongly encourage you to include an open source license. The Open Source Guide provides additional guidance on choosing the correct license for your project.

    https://help.github.com/en/articles/licensing-a-repository

    Thanks in advance, cheers

  • 7

    Bump lodash from 4.17.11 to 4.17.13

    Bumps lodash from 4.17.11 to 4.17.13.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
  • 8

    Add `transform-box` utilties

    Planning on deprecating tailwindcss-transform due to being under-developed and having 99% overlap with tailwindcss-transforms. Since yours already supports configuring all properties I don't think it makes sense to maintain both side by side.

    I'd like to know if you'd be open to adding support for transformBox.

    Here's the classes I was generating on mine:

    .transform-border { transform-box: border-box; }
.transform-fill { transform-box: fill-box; }
.transform-view { transform-box: view-box; }
  • 9

    Add ability to generate 3D transforms

    When a new 3d option is true, the following utilities should be generated:

    • translate-z-[name]
    • -translate-z-[name]
    • scale-z-[name]
    • rotate-x-[name]
    • rotate-y-[name]
    • -rotate-x-[name]
    • -rotate-y-[name]
    • perspective-[name] (need a new perspective option)
    • perspective-origin-[name] (need a new perspective-origin option? or just include Tailwind's default backgroundPosition options?)
    • transform-flat
    • transform-preserve-3d
    • backface-visible
    • backface-hidden

    Also, turns out rotateZ() is the same as rotate() so no need for rotate-z-[name] utilities.

  • 10

    Added option to 3d transforms

    Heyo...

    I've added the ability to use 3d transforms, example:

    translate: {
  '1/2': '50%',
  full: '100%',
  center: '-50%, -50%',
  parallax: '20px, 10px, 100px'
},

    There is a big ole conflict with the formatting, I'm using vscode with prettier and format on save, so it kinda did it's thing!

    I've updated the test and readme.

    It would be grand if this could get merged.

    cheers

  • 11

    Ability to generate multi-axis transforms

    The translate, scale, and rotate theme objects should accept arrays to generate multi-axis transform utilities.

    • When a translate or scale value is an array with two values, it should generate a single translate-[key] / scale-[key] utility with transform: translate([value-1], [value-2]) / transform: scale([value-1], [value-2]).
    • When a translate or scale value is an array with three values, it should generate a single translate-[key] / scale-[key] utility with transform: translate3d([value-1], [value-2], [value-3]) / transform: scale3d([value-1], [value-2], [value-3]).
    • When a rotate value is an array, it should generate a single rotate-[key] utility with transform: rotate3d([value-1], [value-2], [value-3], [value-4]).
  • 12

    Bump acorn from 5.7.3 to 5.7.4

    Bumps acorn from 5.7.3 to 5.7.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

Popular Tag

Related