fix: add missing PostCSS config for Tailwind v4 CSS rendering#92
Open
Alexi5000 wants to merge 2 commits into
Open
fix: add missing PostCSS config for Tailwind v4 CSS rendering#92Alexi5000 wants to merge 2 commits into
Alexi5000 wants to merge 2 commits into
Conversation
The project uses `@tailwindcss/postcss` (v4) and imports Tailwind via `@import tailwindcss` in globals.css, but no PostCSS configuration file existed to register the plugin. Without it, Next.js never processes the Tailwind directives and all utility classes are absent in production builds — resulting in completely unstyled output. Fixes OpenKnots#84
|
@Alexi5000 is attempting to deploy a commit to the 0xBuns Team on Vercel. A member of the Team first needs to authorize it. |
Adds scripts/assert-tailwind-css.mjs and a verify:css npm script, wired into CI after the build step. It scans the .next output for compiled Tailwind utilities (.flex, .grid, .items-center, .p-4, .text-sm) and fails if they are absent. This guards the exact regression this PR fixes (OpenKnots#84): a missing postcss.config.mjs lets `next build` succeed while silently emitting CSS with no Tailwind utilities, leaving the UI unstyled. The build alone does not catch this; the assertion does.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
postcss.config.mjswith@tailwindcss/postcssplugin registrationRoot Cause
The project uses Tailwind CSS v4 (
@tailwindcss/postcssin devDependencies) and imports it via@import "tailwindcss"inapp/globals.css. However, no PostCSS configuration file existed to register the plugin with Next.js.Without this file, the
@import "tailwindcss"directive is never processed — all Tailwind utility classes (flex,p-4,text-sm, etc.) are absent from the compiled CSS, resulting in completely unstyled HTML output as shown in #84.Why this wasn't caught locally
pnpm devwith Turbopack may have a different CSS pipeline behavior that masks the issue. Production builds (pnpm build) and Vercel deployments rely on PostCSS processing, which requires the config file.Test plan
pnpm buildcompletes without CSS warningsFixes #84