The global variable `--tw-transform` is not defined in base

[yannickoo]

What version of Tailwind CSS are you using?

v3.0.7

What build tool (or framework if it abstracts the build tool) are you using?

tailwindcss-cli 3.0.7

What version of Node.js are you using?

v16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/iVIJhwfSBR – Funny thing here: --tw-transform gets directly added to div:after and there is no global definition of that variable. Maybe v3.0.1 is the reason for that 😕

Describe your issue

Edit: It seems like this relates to https://github.com/tailwindlabs/tailwindcss/pull/6500

I am using web components which import a shared CSS file that only contains @tailwind base. When trying to use transform utilities I can also see transform: var(--tw-transform);.

The problem is that the variable is not defined since that does not live in Tailwind base:

*, ::before, ::after {
  ...

  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  ...
}

Is it possible that we get this moved like the other globals like shadows or content?

*, ::before, ::after {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

::before,
::after {
  --tw-content: '';
}

Thank you!

[adamwathan]

Hey! In Tailwind 3, those variables are only assigned to the selectors that need them, not the universal selector. This is for performance reasons — in our testing assigning too many variables to the universal selector causes major initial paint performance issues in Safari on large sites (say > 5000 DOM nodes).

No plans to change this I'm afraid, but you can of course add that CSS to your own CSS.

That said, unless I'm misunderstanding you, adding classes like rotate-90 or whatever should still work, because Tailwind will see where you are adding them and generate the appropriate base rules. Is the problem that using the shadow DOM or whatever the universal selector does cascade into the web component, but regular selectors like .rotate-90 don't?

[AmruthPillai]

I'm not sure if this is the same issue, but didn't want to create a new one. I'm facing the same problem with many of the modifier classes in tailwind. Utilities like rotate, scale, grayscale (filter) are unusable, as in, they just don't work.

The variables just don't seem to add up here. Not sure if I should be using it differently. The docs say that they should work by just adding the rotate-90 class or grayscale class, but they don't.

Currently on Tailwind 3.0.5.

[yannickoo]

@adamwathan thanks for your response! The problem in my case is that --tw-transform is not defined. When trying to use rotate-90 I get CSS like this ⬇️

div {
  --tw-rotate: 90deg;
  -webkit-transform: var(--tw-transform);
          transform: var(--tw-transform)
}

I'm still wondering about the global CSS that I can see in tailwind.css ⬇️

``` *, ::before, ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-color: currentColor; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); --tw-grayscale: var(--tw-empty,/*!*/ /*!*/); --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/); --tw-invert: var(--tw-empty,/*!*/ /*!*/); --tw-saturate: var(--tw-empty,/*!*/ /*!*/); --tw-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/); --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } ```

That is not available in my case because I moved the @tailwind base into another file. Also downgrading to v3.0.1 like on play.tailwindcss.com didn't help :(

[adamwathan]

@yannickoo Can you provide a GitHub repo I can clone and look at? Those universal rules are gone as of v3 like I mentioned, and replaced with rules that target only the elements that need to be targeted.

https://play.tailwindcss.com/GqMJCvWdip

Can see the rules here:

Need to see an actual reproduction to have any more insight here, I can't get this to not work.

[AbdelrhmanAmin]

@adamwathan I have the same problem with transform is not defined. I am using Nextjs: "^12.0.7" and tailwindcss: "^3.0.0". I did upgrade to "^3.0.7", however, the issue is still persisting. I also noticed the same issue with backdrop-filter.

[rikgirbes]

@adamwathan Same issue here, when using the rotate- classes through @apply

tailwindcss v. ^3.0.7 e.g.

.ribbon {
    @apply rotate-45;
}

creates:

.ribbon {
    --tw-rotate: 45deg;
    transform: var(--tw-transform);
}

with --tw-transform being undefined

[AmruthPillai]

I believe this issue is recurring only in NextJS. I tried the same on Svelte and seemed to work as expected. Maybe there's some overridden postcss config that's stopping Tailwind to work as it should?

[AbdelrhmanAmin]

@AmruthPillai I agree. I also tried on a new "create-react-app" and it worked fine.

[rikgirbes]

@AmruthPillai I'm not using NextJS or any js-framework for that matter.

tailwind.scss (included in main.ts and as simple as can be)

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

module.exports = {
    content: [
        './templates/**/*.{tpl,html}',
        './src/**/*.{js,ts,jsx,tsx,vue}',
        './index.html',
    ],
    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

rollup.config.js (only the interesting parts)

export default {
    input: './src/main.ts',
    output: {
        file: './dist/main.js',
        format: 'iife',
        plugins: [
            production && terser()
        ],
    },
    plugins: [
        resolve(),
        json(),
        typescript({
            allowSyntheticDefaultImports: true,
            resolveJsonModule: true,
            moduleResolution: 'node',
        }),
        commonjs(),
        babel({
            babelHelpers: 'bundled',
            exclude: 'node_modules/**'
        }),
        postcss({
            extract: true,
            minimize: production
        }),
        replace({
            'process.env.NODE_ENV': JSON.stringify('development'),
            'preventAssignment' : true
        }),
    ]
}

[nstgeorge]

@AmruthPillai I agree. I also tried on a new "create-react-app" and it worked fine.

My CRA app is having this issue with blur classes, it seems universal (or at least not connected to CRA vs Next.js).

[AmruthPillai]

@nstgeorge Could you confirm that the file you have used the blur class is covered by the content array in tailwind.config.css?

[jshimkoski]

I ran into this issue as well while upgrading a codebase from Tailwind 2 -> Tailwind 3.

To fix the issue, I wound up removing the @apply CSS referencing transform changes and instead used the tailwind classes directly on the element(s) in question.

This definitely made the upgrade process a bit painful as it's not a cut and dry issue to correct in all codebases.

If this behavior can't be changed for performance reasons, it might be a good idea to update the "Automatic transforms and filters" section in the upgrade guide to indicate this @apply shortcoming.

You'd probably need to update the documentation for the transform related classes as well to indicate that you cannot use them with @apply.

[thecrypticace]

I cannot reproduce this in an isolated environment on the latest version of tailwind. A cloneable reproduction would be significantly helpful here. As far as I can get, output-wise, --tw-transform is always defined.

Could someone provide a reproduction we can clone to triage the issue?

When I pass tailwind this:

tailwind.config.js

module.exports = {
    content: [{ raw: html`<div class="foo"></div>` }],
  }

input.css

@tailwind utilities;

.foo {
    @apply rotate-90;
}

I get this:

output.css

.foo {
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
          rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
          scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-rotate: 90deg;
        transform: var(--tw-transform);
}

Which has --tw-transform.

[miftahalrasyid]

if you want to load transform function in .module.css file you have to point out the the path in tailwind.config js

example:

content: [
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx,css}",
],

i add render tailwind in ./components file with all the extension mention above

cheers

[adeel-ali-atp]

In my case, @tailwind base; was not added. After adding transform started working

[tomaszbujnowicz]

What about the case where we exclude @tailwind base (e.g. existing project integration), then all -tw- values are gone. It seems that they are part of the base somehow.

*, ::before, ::after { --tw-translate-x: 0; --tw-translate-y: 0; ...

[vdawg-git]

I have this problem too, running Vite + Svelte, but with the blur backdrop filter. It loads all --tw variables associated with backdrop filters, but they are not set and thus Chrome does not apply the desired effect.

My workaround is to set all variables in the global.css with Tailwind:

:root { --tw-backdrop-blur: blur(0); --tw-backdrop-brightness: brightness(100%); --tw-backdrop-contrast: contrast(100%); --tw-backdrop-grayscale:grayscale(0%); --tw-backdrop-hue-rotate: hue-rotate(0deg) ; --tw-backdrop-invert: invert(0%) ; --tw-backdrop-opacity: opacity(100%) ; --tw-backdrop-saturate: saturate(100%); --tw-backdrop-sepia: sepia(0%) ; }

Oddly enough, it worked for me before, but after I moved to another template as a base this bug occurred. Config is the same.

[Shaker-Hamdi]

I have the same issue. I'm using Next.js, Tailwind CSS, twin.macro, and styled-components.

When applying the classes inside the styled-component Div like this, it doesn't work (with or without the transform class) ...

.div {
    ${tw`transform -translate-y-1/2`}
}

However, applying the class -translate-y-1/2 directly to the <div> element inside the component does work perfectly 😕

<div className="-translate-y-1/2">

I'm not sure if it's a twin.macro issue in my case or is it a configuration issue or what.

[jaydiablo]

Also ran into this issue, in my case, the transform/translate rules are defined in an @apply directive that's in a postcss CSS file that ends up getting included in the main css file where the @tailwind directives are (via an @import).

There were two ways to fix this, one, was to add @tailwind base at the top of this imported file (thanks @adeel-ali-atp for the suggestion), however, this approach seems to duplicate all of the CSS that @tailwind base provides, as the size of the compiled CSS file increased substantially.

The other option was to move the rules into the same file where the @tailwind directives live rather than importing the file, this only increased the output CSS size a little bit and the transforms work as expected.

So it seems to be when @apply is used for these transforms/translates, as @jshimkoski suggested, but only when the @apply is used in a file that also doesn't contain @tailwind base.

[jaydiablo]

Sorry for the noise, I upgraded Tailwind to latest (3.1.0) and that seems to resolve this. FTR, believe we were on 3.0.0.

[wsz7777]

must link base style ？