Empty Selector Generated in Tailwind CSS Output

[amjarmed]

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]

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

[amjarmed]

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]

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:

[amjarmed]

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; }.

[jyefuriii]

Hi, I'm also encountering this issue and it's very frustrating. We're you able to find a solution on this?

[amjarmed]

Hi, I'm also encountering this issue and it's very frustrating. We're you able to find a solution on this?

I don't remember how I solved it , but I think the problem was with !border-b-DEFAULT Remove it

[adamwathan]

Going to close this one since we haven't been able to come up with a clear/straightforward reproduction but please feel free to open a new issue that includes a minimal reproduction if you are still having problems.