SCSS @import directives nested inside @layer are not tracked

[makkarpov]

What version of Tailwind CSS are you using?

v2.2.4

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

Nuxt with @nuxtjs/tailwindcss

What version of Node.js are you using?

v14.16.1

What browser are you using?

N/A

What operating system are you using?

Linux

Reproduction repository

https://github.com/makkarpov/tailwind-dep-repro

Describe your issue

SCSS loses track of dependencies when @import statements are embedded within @layer ... { ... } directive. Change of imported file does not trigger recompilation of the style, and as a result nothing is changed in actual output.

If you have SCSS organized like this

main.scss:

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

@layer components {
  @import 'inner';
}

_inner.scss:

.test { @apply anything; }

then changes in _inner.scss won't be picked by HMR, requiring change in main.scss to trigger recompilation process. This greatly hinders development, requiring any nested change to be followed by change of root file.

[adamwathan]

Good catch, I spent some time looking into this and I think the issue is that we are never informed that that file is a dependency, so we don't bust our internal cache when it changes.

Probably not the workaround you want to hear but are you able to just not use Sass? Using just PostCSS will be faster with less compatibility issues to worry about, and still supports all the Sass features you probably need.

https://tailwindcss.com/docs/using-with-preprocessors

Notes for myself — this is basically because CSS files are treated as context dependencies, but with Sass we don't get a full list of the actual files, I'm guessing we are only getting the main.scss file. We might want to figure out a way to bust the cache if the actual CSS input source changes, but that will be tricky to do I imagine.

[aryairama]

Same here.

[davidwebca]

I'm running into this issue periodically in my current setup and I'd like to eliminate it. I'm moving slowly towards removing sass in my workflow, but I'm not there yet and it would be awesome to fix, even if it's a hack like "automatically forcing a save on the main file if a sub file is saved" kinda thing.

I'm using Laravel-Mix right now and I'm thinking maybe there's a way to automate this 🤔

[leonardssh]

Same here. 🤔

[adamwathan]

Originally posted by @asafari72 in #6425

Hi,
I came across a case in version 3 of Tailwind.
Tailwind does not understand the change when I use preprocessor and want to import a bunch of SCSS files together. The change takes effect when I save the style.scss file or the tailwind.config.js file. Please note the following example, I implemented this example in both Angular and Vue and did not get the result
Repository URL

https://github.com/asafari72/tailwind-vue-issue.git

Example
For example, I've this structure for styling my project:

├── projects
│   ├── styles
│   	├── styles.scss
├── src
│   ├── index.scss
├── tailwind.config.js

in styles.css I've to write class for a simple button like:

@layer components{
.btn {
	@apply bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600;
 }
}

and in the index.scss I've

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

@import  "../projects/styles/styles.scss"

when I change the same property in the .btn class change not working but if I save tailwind.config.js or index.scss file its work.

Thanks.

packages.json :

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.4",
    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.6",
    "sass": "^1.45.0",
    "tailwindcss": "^3.0.1",
    "typescript": "^4.4.4",
    "vite": "^2.7.1",
    "vue-tsc": "^0.29.8"
  }
}

Node.js version:
16.13.0

Browser:
Chrome version 96.0.4664.93

Operation system:
Window 11 version 21H2

IDE :
VSCode 1.63.0

[florianbouvot]

Same here, anyone find a way fix that?

[alisafariir]

The problem still exists in version 3.0.18. Does anyone have a solution to this problem?

[masanaikeshima]

Yeah I'm also experiencing this issue using version 3.0.19

[jcsuzanne]

Also experiencing this issue using 3.0.19 and a laravel mix build using tailwind and SASS.
Removing the tailwind configuration in the build options remove the bug but i'm not able to use Tailwind directive in the sass file.

The only stable solution i have today is to revert back to Tailwind v2 and force using the JIT mode.
Hope there will be a fix soon for Tailwind V3!

[Charton100774]

Same here, i'm using 3.0.23 and laravel mix.

My app.scss file looks like this :

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

@import 'components/btn';

in my components/_btn.scss i'm using the @layer components directive to create custom btn classes.

Saving the file will trigger my watcher but unfortunately the changes are not tracked and nothing happened.

Saving the tailwind.config.js or app.scss file will track the changes, or if i stop and run back my watcher, it will also work.

Hope to have this solved ASAP :)

[NisuSan]

Same when tried to import scss file after main layers.

/*tailwind.css*/
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./layers.scss";

//layers.scss
@layer base {
  [theme="light"] {
    html {
      @apply bg-light-light-shades text-light-dark-shades;
    }
  }

  [theme="dark"] {
    html {
      @apply bg-light-dark-shades text-light-light-shades;
    }
  }
}

Expected: the html tag should have bg and text colors according to attribute theme.
Real: the html tag does not have any css that should be applied to it.

I'm using nuxt 3 with vite and @nuxtjs/tailwindcss v6.12.1