The global variable --tw-transform is not defined in base
#6604
Comments
|
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 |
|
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 Currently on Tailwind 3.0.5. |
|
@adamwathan thanks for your response! The problem in my case is that I'm still wondering about the global CSS that I can see in That is not available in my case because I moved the |
|
@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. |
|
@adamwathan I have the same problem with |
|
@adamwathan Same issue here, when using the tailwindcss v. ^3.0.7 .ribbon {
@apply rotate-45;
}creates: .ribbon {
--tw-rotate: 45deg;
transform: var(--tw-transform);
}with |
|
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? |
|
@AmruthPillai I agree. I also tried on a new "create-react-app" and it worked fine. |
|
@AmruthPillai I'm not using NextJS or any js-framework for that matter. tailwind.scss (included in @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
}),
]
} |
My CRA app is having this issue with
|
|
@nstgeorge Could you confirm that the file you have used the |
|
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 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 You'd probably need to update the documentation for the transform related classes as well to indicate that you cannot use them with |
|
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, 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 |
|
if you want to load transform function in .module.css file you have to point out the the path in tailwind.config js example: i add render tailwind in ./components file with all the extension mention above cheers |
|
In my case, @tailwind base; was not added. After adding transform started working |
|
What about the case where we exclude @tailwind base (e.g. existing project integration), then all -tw- values are gone.
|
|
I have this problem too, running Vite + Svelte, but with the blur backdrop filter. My workaround is to set all variables in the global.css with Tailwind:
Oddly enough, it worked for me before, but after I moved to another template as a base this bug occurred. Config is the same. |
|
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 However, applying the class
I'm not sure if it's a twin.macro issue in my case or is it a configuration issue or what. |
|
Also ran into this issue, in my case, the transform/translate rules are defined in an There were two ways to fix this, one, was to add The other option was to move the rules into the same file where the So it seems to be when |
|
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. |
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-transformgets directly added todiv:afterand 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 seetransform: var(--tw-transform);.The problem is that the variable is not defined since that does not live in Tailwind base:
Is it possible that we get this moved like the other globals like shadows or content?
Thank you!
The text was updated successfully, but these errors were encountered: