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

Empty Selector Generated in Tailwind CSS Output #15017

Open
amjarmed opened this issue Nov 16, 2024 · 4 comments
Open

Empty Selector Generated in Tailwind CSS Output #15017

amjarmed opened this issue Nov 16, 2024 · 4 comments

Comments

@amjarmed
Copy link

amjarmed commented Nov 16, 2024

I encountered an issue where Tailwind CSS generates an invalid empty selector { } in the compiled CSS, causing errors during parsing.

Parsing css source code failed
  839 |   border-width: 1px;
  840 | }
> 841 |  {
      |   ^
  842 |   border-bottom-width: 1px !important;
  843 | }
  844 | .border-b {

Invalid empty selector at

What version of Tailwind CSS are you using?

  • "tailwindcss": "^3.4.14",

What build tool (or framework if it abstracts the build tool) are you using?

  • "next": "15.0.1",

What browser are you using?

  • Chrome

What operating system are you using?

  • Windows

Reproduction URL

https://github.com/amjarmed/jsm-banking

Describe your issue
Tailwind CSS should not generate any empty selectors. All rules should be associated with a valid class or selector.
A selector {border-bottom-width: 1px !important; } is generated without a class name, leading to parsing failures during build or runtime.

@adamwathan
Copy link
Member

Can you please provide a reproduction as required in the issue template? We can’t fix this until we know when it happens.

@amjarmed
Copy link
Author

Can you please provide a reproduction as required in the issue template? We can’t fix this until we know when it happens.

Thank you for your comments! I've updated the issue template, and all the necessary information is now available above. Please feel free to review it, and let me know if you need anything else.

@adamwathan
Copy link
Member

adamwathan commented Nov 16, 2024

What are you doing that triggers the error? When I run npm run build in your project I get a bunch of non-CSS errors but the CSS file is generated and doesn't contain this issue.

These are the only errors I see when doing a build:

image

@amjarmed
Copy link
Author

What are you doing that triggers the error? When I run npm run build in your project I get a bunch of non-CSS errors but the CSS file is generated and doesn't contain this issue.

When I run pnpm dlx tailwindcss -i ./app/globals.css -o ./app/output.css --watch to isolate Tailwind CSS from Next.js, I noticed that the generated output.css contains a selector without a class name: { border-bottom-width: 1px !important; }.

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

No branches or pull requests

2 participants