cloudflare / cloudflare/vinext

Most of the correct ways to configure Tailwind do not work

Open
#1,128 5 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.