cloudflare / cloudflare/vinext
Most of the correct ways to configure Tailwind do not work
- Dominant language
- TypeScript
- Stars
- 8.8k
- Forks
- 406
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 120
Description
There are multiple ways of configuring Tailwind that would, in my mind, apply.
When Tailwind is configured "the new Next.js way", as Turbopack loader:
`next.config.ts`
```ts
turbopack: {
rules: {
"*.css": {
loaders: ["@tailwindcss/webpack"],
},
},
},
```
but this appears to be completely ignored. Even if present without dependency installed, this produces no error.
I also tried "the old way":
`postcss.config.json`
```json
{
"plugins": {
"@tailwindcss/postcss": {}
}
}
```
and this didn't work either.
Finally, I have tried with `postcss.config.ts`:
`postcss.config.js`
```ts
export default {
"plugins": {
"@tailwindcss/postcss": {}
}
}
```
And this finally have worked. Or... Would have worked, if not for another issue. Importing global CSS from `src/app/layout.tsx` simply fails. No error, no anything, just no CSS on the page. I had to move the import to each and every `page.tsx` for it to start working.
Contributor guide
Assessment
This issue has not been assessed yet.