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.

Sign up for GitHub

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

Jump to bottom

Does not support v4.0.0-alpha.24 with tailwind.css config file #318

Open
aaronadamsCA opened this issue Sep 21, 2024 · 2 comments · May be fixed by #330
Open

Does not support v4.0.0-alpha.24 with tailwind.css config file #318

aaronadamsCA opened this issue Sep 21, 2024 · 2 comments · May be fixed by #330
Assignees
@thecrypticace

Comments

@aaronadamsCA
Copy link

What version of prettier-plugin-tailwindcss are you using?

v0.6.6

What version of Tailwind CSS are you using?

v4.0.0-alpha.24

What version of Node.js are you using?

v20.17.0

What package manager are you using?

pnpm

What operating system are you using?

Ubuntu

Reproduction URL

https://github.com/aaronadamsCA/prettier-plugin-tailwindcss-issue-270/tree/alpha-24-issue/my-app

Describe your issue

Starting with Tailwind v4.0.0-alpha.24 this plugin errors when given a tailwind.css config file.

$ pnpm exec prettier src/main.jsx 
src/main.jsx
[error] src/main.jsx: /workspaces/prettier-plugin-tailwindcss-issue-270/my-app/tailwind.css:1
[error] @import "tailwindcss";
[error] ^
[error] 
[error] SyntaxError: Invalid or unexpected token
[error]     at wrapSafe (node:internal/modules/cjs/loader:1378:20)
[error]     at Module._compile (node:internal/modules/cjs/loader:1428:41)
[error]     at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
[error]     at Module.load (node:internal/modules/cjs/loader:1288:32)
[error]     at Module._load (node:internal/modules/cjs/loader:1104:12)
[error]     at Module.require (node:internal/modules/cjs/loader:1311:19)
[error]     at require (node:internal/modules/helpers:179:18)
[error]     at Wr (file:///workspaces/prettier-plugin-tailwindcss-issue-270/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:156:14078)
[error]     at file:///workspaces/prettier-plugin-tailwindcss-issue-270/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2353:3939
[error]     at pJ (file:///workspaces/prettier-plugin-tailwindcss-issue-270/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2353:3944)

Easy to reproduce:

.prettierrc.json

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.css"
}

tailwind.css

@import "tailwindcss";
@thecrypticace
Copy link
Contributor

Hey right now the config option for v4 is called tailwindEntryPoint so this will work:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindEntryPoint": "./tailwind.css"
}

I realize this isn't in the readme though — I'll leave this open as a reminder to update. I also might look into just making tailwindConfig work for this too.

@thecrypticace thecrypticace self-assigned this Sep 24, 2024
@aaronadamsCA
Copy link
Author

Thanks, that's interesting! Up to and including v4.0.0-alpha.23 I was clearly using the wrong option, but it only started crashing with alpha.24.

Now I've upgraded all Tailwind dependencies and given each monorepo package its own .prettierrc.json with tailwindEntryPoint configured—and not only is everything working again, but it turns out I'm getting much better results in some packages when sorting classes.

Let's call this one user error, then. Glad to have it sorted, thanks for the tip!

@thecrypticace thecrypticace linked a pull request Nov 18, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thecrypticace thecrypticace

Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@thecrypticace @aaronadamsCA