Tailwind v3, Vue, Vite, @apply any transform

[St1ggy]

What version of Tailwind CSS are you using?

3.0.0

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

"vue": "3.2.24",
"autoprefixer": "10.4.0",
"postcss": "8.4.4",
"tailwindcss": "3.0.0",
"vite": "2.7.1",

What version of Node.js are you using?

16.13.1

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS Monterey

Reproduce link
https://stackblitz.com/edit/vitejs-vite-3t2bb4?file=src/components/HelloWorld.vue

Describe your issue

Any transform is not working with @apply in Vue, but works in playground

In my index.scss

[ferdinanddoremus]

Same issue. Same build tools. Except i'm using nextjs and not vue/vite.
--tw-transform does not seem to be defined on every transform related utilities.

[devhelpr]

I am seeing the same thing , buildtools webpack v5.47 + tailwindcss v3 + postcss v8.4.4 .. but also postcss-import 14.0.2 and postcss-import-ex-glob 2.0.1. As far as I can see it is related with postcss-import and postcss-import-ex-glob because if I add the css rules with the @apply and transforms directly to my main,css, it works as expected

[St1ggy]

As workaround I did

* {
  @apply rotate-0;
}

in my index.scss file and all transforms now works correctly

[devhelpr]

In my main.css I now did, and it also works:
* { @apply transform; }

[ferdinanddoremus]

This solution actually breaks all fixed positioned elements as you can not use them with a parent having a transform property.

[devhelpr]

yeah, you're correct.. but I don't have those yet in my current project until next week ;-) .. the rotate-0 hack doesn't work for me

[ferdinanddoremus]

My workaround - not so workaround - is to manually add transform class to element :

<div
  className={clsx(
    'motion-safe:transition-all transform',
    className,
    styles.modalClose,
    {
      [styles.modalOpen]: isOpen,
    }
  )}
>

Which is not what we want here with tailwind v3, as it officialy says we could get rid of this transform utility.

I guess there is a problem using transform properties with @apply here which does not populate css variable accordingly.

Made another test here : https://play.tailwindcss.com/oJyqCSnd7R and while inspecting elements, we can see vars are actually defined, so maybe we are missing something on the tailwind setup.

[Demetryi]

a temporary solution - as @ferdinanddoremus mentioned , we can add a transform class to an element that has transformations in @apply.
Works fine for me, but still waiting for an update with a fix 😅

[devhelpr]

That doesn't work for ::before and ::after unfortunately

[snax4a]

I also faced this issue, transform is not working if used in @apply

Edit:
ring utilities are also not working with @apply

[alirezas]

I have the same issue and in my case, I think postcss-import cause it.

it will work

/* app.css */
.working {
  @apply rotate-45;
}

but it will not work

/* app.css */
@import 'foo.css'

/* foo.css */
.not-working {
  @apply rotate-45;
}

Using:

    "postcss": "^8.4.4",
    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.6",
    "postcss-nested-ancestors": "^2.0.0",
    "postcss-simple-vars": "^6.0.3",
    "tailwindcss": "^3.0.1"

[danr-za]

Same here.
Provided workaround does not work for before and after pseudo selectors.

[mrspence]

@snax4a , @St1ggy and anyone else -

What's your current postcss-plugin ordering looking like?

[ferdinanddoremus]

@snax4a , @St1ggy and anyone else -

What's your current postcss-plugin ordering looking like?

Here is mine :

plugins: {
  'tailwindcss/nesting': {},
  tailwindcss: {},
  autoprefixer: {},
},

[St1ggy]

@snax4a , @St1ggy and anyone else -

What's your current postcss-plugin ordering looking like?

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'), 
    require('autoprefixer')
  ],
}

[snax4a]

@snax4a , @St1ggy and anyone else -

What's your current postcss-plugin ordering looking like?

This is mine config:

module.exports = {
  plugins: ['tailwindcss/nesting', 'tailwindcss', 'postcss-flexbugs-fixes'],
}

I am using @apply in my CSS modules, I am using the same styling technique as vercel's commerce project https://github.com/vercel/commerce/blob/main/components/checkout/PaymentMethodView/PaymentMethodView.module.css

[alirezas]

@snax4a , @St1ggy and anyone else -

What's your current postcss-plugin ordering looking like?

here is mine:

    require('postcss-import'),
    require('postcss-simple-vars'),
    require('postcss-nested-ancestors'),
    require('tailwindcss/nesting'),
    require('tailwindcss')

[Demetryi]

I previously used the default nextjs postcss configuration from the example, but after discovering this problem I tried other combinations, some of which have been mentioned above by other peoples .

[adamwathan]

Hey folks! We've patched a fix for this in v3.0.2 👍 It involved disabling this new optimizeUniversalDefaults feature which is a meaningful performance boost in the browser on huge pages with lots of HTML, so that sucks, but we almost have a fix in place that will allow us to re-enable it for v3.0.3.