[3.x] Transforms not working (Laravel Mix)

[marcreichel]

What version of Tailwind CSS are you using?

v3.0.1

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

• Laravel 8.75
• Laravel Mix 6.0.39

What version of Node.js are you using?

14.17.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/marcreichel/tailwind3-transforms-reproduction (Deleted)

Screenshot:

Describe your issue

The "base transform" selector is not generated. Therefore any transform utilities do not work.
Basically there should be at least the following css code:

.rotate-90, .translate-x-1\/2 {
    /* --tw-... */
    transform: rotate(var(--tw-rotate)) translateX(var(--tw-translate-x)) /* and so on ... */;
}

But this is completely missing.

[adamwathan]

Just had two seconds to look but it appears this works if you switch to:

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

...instead of doing the imports. Not sure why, will get it looked into this week though!

[marcreichel]

Confirmed! Thanks a lot!

Are the imports not the "go to" for SCSS anymore? Thought for SCSS we have to use the imports instead of the @tailwind directives.

But good to know it is working with the directives.

Again: Thanks a lot! 💙

[ivan-bragin]

Got the same issue. Tried to import tailwind base in every possible way(scss import, @tailwind base, import "tailwind/tailwind.css";). In my case @apply backdrop-blur doesn't work cause --tw-backdrop-filter is not defined. It seems that defaults are not being created. Project configuration is basically default freshly created vite + vue app with create-vue and added postcss

[little3201]

same question

[keithn]

in vite + vue + tailwind 3.0 I also see that it doesn't seem to generate the css classes, I can definitely see the classes update on the dom, it just doesn't show any generated css. If I stop vite and restart it, then they get generated.

[tarasmelnychuk]

Same issue with gatsby, in css I have @apply md:translate-y-10; and then in inspector I see

I have

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

in global.css

tailwindcss@3.0.1
gatsby@4.3.0

[adamwathan]

Most of these comments are not about the main issue here (which is specific to Sass imports), they are actually this issue:

#6409 (comment)

...which is that you cannot use @apply inside a CSS module/Svelte component/Vue component to apply a class that provides @defaults (internal detail).

[thecrypticace]

You can either use the @tailwind directives or @import but they need to not have extensions. When you import the files with a .css extension each file is run through postcss individually before being returned to sass for further compilation which will cause things to break (there's also just other weird issues with .css imports & sass in general). The imports should be written without the extension like this:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

This also mirrors our installation instructions on this page. Also note that the ~ prefix is not required by sass-loader anymore and as such has been deprecated.

[marcreichel]

@thecrypticace Thanks! I would consider adding this to the upgrade guide as I upgraded from 2.x where everything was working fine to 3.x where things broke because of this.

[aje]

I use Tailwind and NextUI together, and I don't want to import Tailwind's "base" since it will break NextUI's base styles. Is there any way to do this?