Arbitrary properties no longer work in v4.1.0

[pmlk]

What version of Tailwind CSS are you using?

v4.1.0

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

@tailwindcss/cli

What version of Node.js are you using?

v23.9.0

What browser are you using?

Chrome, Safari, or N/A

What operating system are you using?

macOS

Reproduction URL

https://github.com/pmlk/tailwindcss-issue-v4-1-0

Describe your issue

Arbitrary properties no longer seem to work, e.g. <h1 class="[background-color:red;]">foo</h1> will no longer render a red background on the element.

Steps to reproduce with the reproduction repo:

1. npm run build
   • generates dist/styles.css and
   • copies src/index.html to dist/index.html
2. open dist/index.html
   • background of the <h1> is not red but SHOULD be red
3. edit the version of @tailwindcss/cli in package.json to 4.0.17
4. npm update
5. npm run build
6. open dist/index.html
   • background of the <h1> is red as expected

[thecrypticace]

Hi! The arbitrary property syntax does not need a ; (see our docs). You should be writing this as <h1 class="[background-color:red]">foo</h1>.

The inclusion of a ; meant that you were accidentally emitting two semicolons into the CSS which we fixed in v4.1 by making sure a top-level ; is not allowed. This could've been used to accidentally emit multiple properties but that would've only worked in the CDN and in Play.

[pmlk]

Thanks for the quickly reply!

I missed it in the release notes 🙈

• Disallow top-level braces, top-level semicolons, and unbalanced parentheses and brackets in arbitrary values (#17361)

[pmlk]

I just discovered another small difference to v4.0.17 and already found a solution. Hopefully, it helps others.

When using <li class="list-inside list-disc"> for long list items that wrap onto two or more lines (e.g. on narrow displays), the second line would align with the bullet point ("disc") rather than with the text of the first line. To address this, I originally used this - I guess quite common - solution:

BEFORE v4.1.0

<li
  class="flex before:mr-2 before:inline-block before:font-extrabold before:content-['&bull;']"
>

The '•' / • is not rendered in the browser anymore (since v4.1.0). I'm assuming this is due to the mismatch in how it's rendered it in the HTML (before:content-['•']) and how it's emitted in the CSS (.before\:content-\[\'\&bull\;\'\] {)

NOW in / since v4.1.0

<li
  data-before="&bull;"
  class="flex before:mr-2 before:inline-block before:font-extrabold before:content-[attr(data-before)]"
>

Or, simpler, where possible use the unescaped version:

<li
  class="flex before:mr-2 before:inline-block before:font-extrabold before:content-['•']"
>

Unless there is a way to escape it that I am not aware of, this simpler version probably won't work with " ("), but the former version should.