Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v2.2.8 not generating global variables

See original GitHub issue

What version of Tailwind CSS are you using?

2.2.6

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

vite 2.4.3, postcss 8.3.6, typescript 4.3.5

What version of Node.js are you using?

v14

What browser are you using?

Safari, Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/mattiaz9/tailwind-global-variable-issue

Describe your issue

I believe is the same issue as this: https://github.com/tailwindlabs/tailwindcss/issues/5034

What I noticed is that the problem occurs when using @apply rather than utility classes.

To run the reproduction repository: yarn && yarn dev

Issue Analytics

State:
Created 2 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

2reactions

jcasanovacommented, Sep 27, 2021

Another fix for this issue, instead of downgrading to 2.2.4 is to add missing vars to your utility section :


@layer utilities {

   ...

    *, ::before, ::after {
        --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);
        --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
        --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
        --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
        --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
        --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
        --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
        --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
        --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
        --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
        --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    }
}

1reaction

mattiaz9commented, Jul 31, 2021

@adamwathan looks like it’s working (mostly), but I noticed that the var --tw-backdrop-filter is missing and the backdrop filter doesn’t work. Apparently this issue is there since the version 2.2.5.

Top Results From Across the Web

Global role variables — DebOps v2.2.8-16-g15075c1fe ...

One place where users can define variables that are always guaranteed to be present is the Ansible inventory. However roles cannot modify the...

Loading Project and Katalon Studio is stuck at "Generating ...

Please check all of your Global Variable profiles, some of your variables are invalid so KS could not generate GlobalVariable.class when ...

2.7: Global Variables - Engineering LibreTexts

The problem is that example2 creates a new local variable named been_called . The local variable goes away when the function ends, and...

Create a global value - Automation Anywhere Documentation

When the global value is initialized, you cannot change the name. Global values cannot be named Java keywords such as String, Boolean, Integer, ......

Refactor Global Variables Out of Functions - Free Code Camp

In this functional programming tutorial we refactor global variables out of functions. This video constitutes one part of many where I cover ...