Tailwind not generating arbitrary values for content containing CSS counters

[noahmpauls]

Admittedly a niche requirement, but I'm having some trouble using arbitrary values to fill content with the counters() function. Ran into this while writing a plugin that adds most counter functionality in utility classes:

<ol class="count-[section]">
  <!-- should generate "content: counters(section,'.');" -->
  <li class="count-inc-[section] before:content-[counters(section,'.')]">List Item</li>
</ol>

In the above example:

• count-[section] -> counter-reset: section;
• count-inc-[section] -> counter-increment: section 1;

Unfortunately, Tailwind doesn't generate any CSS for before:content-[counters(section,'.')]. It can, however, handle the counter() function:

<ol class="count-[section]">
  <!-- does generate "content: counter(section);" -->
  <li class="count-inc-[section] before:content-[counter(section)]">List Item</li>
</ol>

...unless there's any extra content to add:

<ol class="count-[section]">
  <!-- should generate "content: counter(section)' ) ';" -->
  <li class="count-inc-[section] before:content-[counter(section)'_)_']">List Item</li>
</ol>

Seems to be some sort of issue with introducing quotation marks along with those function calls. Are there any workarounds for this?

[sethgw]

Linking an answer:

#7032

I got it to work by following this example ☝️

 <div>
          <ol className="[counter-reset:section]">
            <li className="[counter-increment:section] marker:[content:counters(section,'.')]">
              one
            </li>
            <li className="[counter-increment:section] marker:[content:counters(section,'.')]">
              two
              <ol className="ml-8 [counter-reset:section]">
                <li className="[counter-increment:section] marker:[content:counters(section,'.')]">
                  two.one
                </li>
                <li className="[counter-increment:section] marker:[content:counters(section,'.')]">
                  two.two
                  <ol className="ml-8 [counter-reset:section]">
                    <li className="[counter-increment:section] marker:[content:counters(section,'.')]">
                      two.two.one
                    </li>
                  </ol>
                </li>
                <li>two.three</li>
              </ol>
            </li>
          </ol>
  </div>

[Tofandel]

This is so unreadable I'd rather use plain css for that