Tailwind CSS doesn't get compiled in @import'ed files

[SpadarShut]

Describe the bug

TailwindCSS doesn't get compiled if it's inside files that are imported.

In main css file:

@import "base.css";
@import "components.css";
@import "utils.css";

in imported files:

@tailwind base;

@layer base {
  #id {
    @apply flex min-h-screen flex-col;
  }
}

Reproduce

https://github.com/SpadarShut/jest-preview-import-tw-issue

Expected behavior

CSS should be compiled

Environment (please complete the following information)

• OS: macOS 12.2.1
• Browser: chrome
• Jest version: 27.5.1

[nvh95]

Hi @SpadarShut. Thank you for your report on this issue. I confirmed this is a bug from jest-preview. We will let you know when we release a fix for it.
For now, you can workaround by importing CSS files that have tailwind syntax directly to setupTests.js (setupFilesAfterEnv in jest.config.js)

// setupTests.js
import "base.css";
import "components.css";
import "utils.css";

[SpadarShut]

Thanks! I worked around it in the same way.

[SpadarShut]

While we are at it, can you tell if this is a bug or not: when i change values in a select, the preview does not reflect it, though elements dependent on that value are rendered correctly.

[nvh95]

@SpadarShut I encountered this issue recently and I think this is related to @testing-library/dom interacting with jsdom. I am not sure if jest-preview could do anything to correct this behavior. I will let you know in the future if I have more insights/ ideas. For now, please think of it as a caveat. Thanks.

[SpadarShut]

Thanks! I used testing library as well.

[nvh95]

Hey @SpadarShut. I fixed this issue and released version0.3.1-alpha.0. Please try it again and let me know if it resolves your problem.

I will include this fix in 0.3.1 in a couple of days.

[nvh95]

@all-contributors please add @SpadarShut for bug

[allcontributors]

@nvh95

I've put up a pull request to add @SpadarShut! 🎉

[github-actions]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that are unactionable. Please reach out if you have more information for us! 💪