postcss-import module breaks content & safelist when using TailwindCLI

[ghost]

What version of Tailwind CSS are you using?
Tested from 3.0.0 to 3.0.24

What build tool (or framework if it abstracts the build tool) are you using?
TailwindCSS CLI from 3.0.0 to 3.0.24

What version of Node.js are you using?
v12.13.0

What browser are you using?
Chrome

What operating system are you using?
Linux (server & compilation side)

Reproduction repository:

• https://github.com/Pilot-in/tailwind-issue-8153

Assets URL (pastebin urls)

• My generated safelist.txt (used your regex to extract classes from my website code)
• tailwind.config.js
• tailwind.css
• postcss.config.js

Command i use to compile from build_1 folder (see below folder structure):
/path/from/root/tailwind-v3/tailwindcss -i tailwind.css -o tailwind.min.css --postcss

My folder structure is like so:

tailwind-v3
├── tailwindcss     # tailwindcss is the standalone linux bin of 3.0.24 you released
├── tmp
│   ├── build
│   ├── ──  build_1                     # the folder where i init the CLI command
│   ├── ── ── tailwind.css              # it's my input tailwind.css file
│   ├── ── ── tailwind.config.js
│   ├── ── ── postcss.config.js
│   ├── ── ── safelist.txt              # the file which contains all the potential classes i want to generate
└── ...

Describe your issue

My safelist.txt is used in 'content': ['./safelist.txt'], in my tailwind.config.js
Also tried to add all words present in my safelist.txt directly into safelist as your doc says in my tailwind.config.js but it never generates my classes.
For example, the .flex class is not present in my final generated tailwind.min.css file.

Output i get from CLI is: Done in 2328ms.
It does generate a tailwind.min.css but only with the content in my tailwind.css file.
So it seems to find & use my safelist.txt in content since i have no "Warn, no content defined" message but doesn't generate classes.

[adamwathan]

Hey! Do you mind providing an actual reproduction repository we can clone that demonstrates the issue? Trying to create a reproduction ourselves from the information in an issue drastically increases the amount of time it takes for us to provide a solution and if we have do that for every issue it’s impossible for us to keep up.

[ghost]

Hey @adamwathan
Thanks for the reactivity!

You're right, i even realised i forgot some parts, here you go :) (I added a readme with steps)
https://github.com/Pilot-in/tailwind-issue-8153

[ghost]

I did more tests & it seems not only related to standalone, CLI has the same issue running npx tailwindcss -i tailwind.css -o tailwind.min.css --postcss in the reproduction repository subfolder build_1

[ghost]

After further testings, i found that postcss-import in postcss.config.js seems to be the module breaking content & safelist features (i don't know why tho')

[bradlc]

Hey @damien-pilot-in. postcss-import adheres to the CSS spec and disallows @import statements anywhere except at the very top of a file. Because your tailwindcss/components and tailwindcss/utilities imports are not at the top of your CSS file they are not being pulled in. Check out the Tailwind CSS documentation for more information and workarounds: https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

In your specific case, since you only have one CSS file one option would be to replace the tailwindcss imports with @tailwind directives:

- @import "tailwindcss/base";
+ @tailwind base;

...

- @import "tailwindcss/components";
+ @tailwind components;

...

- @import "tailwindcss/utilities";
+ @tailwind utilities;

I hope that helps!