Tailwind CSS: error importing CSS files into layers

support
1

Hello, I can not import CSS files into layers.

@import "tailwindcss";
@source "hugo_stats.json";

@layer theme, layout, ui, test;
@import "test.css" layer(test);
@import "theme.css" layer(theme);
...

Fails with `

TAILWINDCSS: failed to transform “/css/main.css” (text/css): Error: Can’t resolve ‘test.css’ in '/user/site`

I can import fine with

@import "tailwindcss";
@source "hugo_stats.json";

@layer theme, layout, ui;
@import "test.css";

@layer theme {
  * {
    @apply bg-blue-300;
  }
}
@layer layout {
  * {
    @apply bg-red-300;
  }
}
@layer ui {
  * {
    @apply bg-purple-300;
  }
}

As a site author I want import CSS modules into layers for easier style management.

EDIT: I am also now confused why the layer syntax works with in this example

@layer framework, theme, layout, ui, test;
@import "tailwindcss" layer(framework);
/* still fails */
/* @import "test.css" layer(test); */
@source "hugo_stats.json";

@layer theme {
  * {
    @apply bg-blue-300;
  }
}
@layer layout {
  * {
    @apply bg-red-300;
  }
}
@layer ui {
  * {
    @apply bg-purple-300;
  }
}
2

This is a bug.

On any line in the file, we expect everything after @import to be the path. We do not expect anything after the path.

See https://github.com/gohugoio/hugo/issues/13645.

This works fine:

@layer test {
  @import "test.css";
}
3

Syntax is here: https://developer.mozilla.org/en-US/docs/Web/CSS/@import/layer_function

I see you changed my title to be Tailwind CSS specific, but I think it is not Tailwind specific?

This workaround (below) Is perfectly reasonable.

@layer test {
  @import "test.css";
}

Yes, I see the issue, many fun import statements!