Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The global variable --tw-transform is not defined in base #6604

Closed
yannickoo opened this issue Dec 18, 2021 · 21 comments · Fixed by #6875
Closed

The global variable --tw-transform is not defined in base #6604

yannickoo opened this issue Dec 18, 2021 · 21 comments · Fixed by #6875

Comments

@yannickoo
Copy link

yannickoo commented Dec 18, 2021

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 #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
Copy link
Member

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
Copy link

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.

Screenshot 2021-12-20 at 8 53 08 AM

Screenshot 2021-12-20 at 8 52 55 AM

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
Copy link
Author

yannickoo commented Dec 21, 2021

@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
Copy link
Member

@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:

image

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

@AbdelrhmanAmin
Copy link

@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.
image

@rikgirbes
Copy link

rikgirbes commented Dec 27, 2021

@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
Copy link

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
Copy link

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

@rikgirbes
Copy link

@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
Copy link

@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).

Screen Shot 2022-01-02 at 2 56 42 PM

@AmruthPillai
Copy link

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

@jshimkoski
Copy link

jshimkoski commented Jan 3, 2022

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
Copy link
Contributor

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
Copy link

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
Copy link

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

@tomaszbujnowicz
Copy link

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
Copy link

vdawg-git commented Apr 13, 2022

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
Copy link

Shaker-Hamdi commented May 15, 2022

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
Copy link

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
Copy link

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
Copy link

wsz7777 commented Sep 6, 2024

must link base style ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.