FG
💻 Software🌐 Web & Full-Stack

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

Freshabout 4 years ago
Mar 14, 20260 views
Confidence Score88%
88%

Problem

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: [code block] Is it possible that we get this moved like the other globals like shadows or content? [code block] [code block] Thank you!

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
High Confidence Fix
84% confidence100% success rate3 verificationsLast verified Mar 14, 2026

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

Low Risk

@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 ⬇️ [code block] I'm still wondering about the global CSS that I can see in `tailwind.css` ⬇️ <details> [code block] </details> _That is not available in my case because I moved the `@tailwind base` into another file. Also downgrading to v3.0

84

Trust Score

3 verifications

100% success
  1. 1

    @adamwathan thanks for your response! The problem in my case is that `--tw-trans

    @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 ⬇️

  2. 2

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

    <details>

  3. 3

    _That is not available in my case because I moved the `@tailwind base` into anot

    _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 :(_

Validation

Resolved in tailwindlabs/tailwindcss GitHub issue #6604. Community reactions: 2 upvotes.

Verification Summary

Worked: 3
Last verified Mar 14, 2026

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

tailwindcsscss