v2.2.8 not generating global variables

[mattiaz9]

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: #5034

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

To run the reproduction repository: yarn && yarn dev

[adamwathan]

Reverted the main piece of the changes that cause this stuff for v2.2.7, check that out and see if it helps. Hopefully can resolve the underlying issues and bring these improvements back soon.

[mattiaz9]

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

[mattiaz9]

@adamwathan just checked and global variables for filter & backdrop-filter are still not generated. 2.2.4 is the only working version for me

[bstro]

am on 2.2.7 [edit: I tried upgrading to 2.2.9, same problem persists]

similar issue as @mattiaz9 — backdrop filters do not work. I am trying to apply a backdrop blur to a modal underlay div like so:

.underlay {
  @apply fixed
    inset-0
    z-50
    flex
    items-center
    justify-center
    bg-white
    bg-opacity-80
    backdrop-blur;
}

and in-browser, the resulting CSS looks like:

If I manually change the backdrop-filter property's value to --tw-backdrop-blur, it works.

I've downgraded to 2.2.4 like op and things seem to be working again.

[jcasanova]

Hi @mattiaz9 thanks for reporting it

Same issue here, noticed kind of bug between v2.2.4 (working) and latest v2.2.16 (broken).

From the output of *, ::before, ::after it looks like the shadow/ring utility is breaking something.
I tried removing the experimental optimizeUniversalDefaults flag, upgrading/downgrading several versions around this optimization without any luck.

@adamwathan the point is filters related vars are not defined

Globals from 2.2.4 (working)

Globals from 2.2.16 (broken)

[jcasanova]

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);
    }
}

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

The issue here is that your center-content.scss and your index.scss file are not linked in any way. Therefore Tailwind doesn't know about the other file, and since it doesn't have @tailwind rules in there it's sort of "ignored". A very similar issue with explanation can be found here: #5989 (comment)

The TL;DR is that css files are split.

For your specific use case, you can fix it in 2 ways:

1. Move the center-content with the apply rules to the index.scss file so that it is in one and the same file.

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

.center-content {
  @apply absolute left-1/2 top-1/2;
  @apply transform -translate-x-1/2 -translate-y-1/2;
}

2. Another option is to import the other file, so that it becomes linked.

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

@import "../components//CenterContent//center-content.scss"

In general, I don't really see the benefit in splitting your css files like this. The final output is already pretty small.
That said, you already have an abstraction, you have a CenterContent component, so in stead of using @apply you can directly put those classes in the component. Now you don't even need a css file and still have a single source of truth for that CenterContent logic.

import React from "react"

const CenterContent: React.FC = ({ children }) => {
  return (
    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
      {children}
    </div>
  )
}

export default CenterContent