Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Throw a useful error when tailwindcss is used as a PostCSS plugin #14378

Merged
merged 9 commits into from
Sep 11, 2024

Conversation

philipp-spiess
Copy link
Contributor

@philipp-spiess philipp-spiess commented Sep 10, 2024

While upgrading a project to Tailwind CSS v4, I forgot to remove the tailwindcss import from the PostCSS config. As a result of this, I was greeted with the following message:

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/philipp/dev/project): [TypeError] Invalid PostCSS Plugin found at: plugins[0]

(@/Users/philipp/dev/project/postcss.config.js)
TypeError: Invalid PostCSS Plugin found at: plugins[0]

I don't think this was particularly helpful, so I’m proposing we add a default function export to the tailwindcss package so when it's used inside PostCSS, we can control the error message. So I changed it to something along these lines:

It looks like you're trying to use the \`tailwindcss\` package as a PostCSS plugin. This is no longer possible since Tailwind CSS v4.

If you want to continue to use Tailwind CSS with PostCSS, please install \`@tailwindcss/postcss\` and change your PostCSS config file.
    at w (/Users/philipp/dev/project/node_modules/tailwindcss/node_modules/tailwindcss/dist/lib.js:1:21233)
    at Object.<anonymous> (/Users/philipp/dev/project/node_modules/tailwindcss/postcss.config.cjs:3:13)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)

This is also a good place to link to the migration guides once we have them 🙂

@philipp-spiess

This comment was marked as outdated.

@philipp-spiess philipp-spiess marked this pull request as draft September 10, 2024 12:06
@philipp-spiess philipp-spiess marked this pull request as ready for review September 11, 2024 09:15
@philipp-spiess philipp-spiess merged commit 63390c9 into next Sep 11, 2024
2 of 3 checks passed
@philipp-spiess philipp-spiess deleted the fix/warn-when-tailwindcss-used-as-postcss-plugin branch September 11, 2024 15:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants