Some Tailwind classes won't work in Markdown Attributes

[Hrishikesh]

Hello!

I was trying to use custom classes in Markdown files using attributes and looks like in some cases it doesn’t work. To be specific, I’m using Tailwind CSS and there, we can specify variants with their prefix. For example, if I wish to change a property value for dark theme, I can specify it as dark:<property>.

So, in my Markdown, I have this:

Foo: Some text
{.border-orange-700 .dark:border-orange-300}

This doesn’t apply the classes and rather renders it as text.

It works when I remove the dark: prefix. So, I tried escaping the : like this:

Foo: Some text
{.border-orange-700 .dark\:border-orange-300}

And it still doesn’t work.

I can apply a custom class and use @apply in my SCSS, but I’d like to avoid it if possible.

Am I missing something or is this not possible?

I’m using Hugo 0.83.1-extended (Windows).

[Hrishikesh]

Sorry to bother, turns out, Tailwind also can be configured to change this.

tailwind.config.js:

module.exports = {
  separator: '-'
}

And now, I can simply use - instead of : and it works.

[Hrishikesh]

However, the ability to be able to use : would still be better considering most of the class names already contain -. So, - or _ really make it difficult to distinguish from other classes and element states.

EDIT: I just re-read Hugo documentation and turns out, I could do this:

Foo: Some text
{class = "border-orange-700 dark:border-orange-300"}

and it works just fine.

Apologies for not doing this before.