Skip to content

Conversation

@philipp-spiess
Copy link
Member

@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
@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.

3 participants