Html-validate class-pattern: How to allow Tailwind CSS syntax while enforcing kebab-case?

support
1

I’m using html-validate in my Hugo project with kebab-case enforcement, but Tailwind CSS classes are failing validation:

Failing classes:

  • h-[76px] (arbitrary values with brackets/backslashes)
  • top-1/2 (fractions)
  • right-2.5 (decimals)
  • -translate-y-1/2 (negative values with leading dash)
  • text-[001C3F] (arbitrary hex colors)

Current config:

{
  "extends": [
    "html-validate:recommended"
  ],
  "rules": {
    "parser-error": "off",
    "class-pattern": [
      "error",
      {
        "pattern": "kebabcase"
      }
    ],
    "no-dup-class": "error",
    "valid-id": "error",
    "no-dup-id": "error",
    "attr-spacing": "off",
    "doctype-style": "off",
    "long-title": "off",
    "no-inline-style": "off",
    "require-sri": "off",
    "no-unknown-elements": "off",
    "no-implicit-close": "off",
    "void-style": "off"
  }
}

Error output:

/home/Kevindodiya75/bytelogik_shop/layouts/index.html
   3:17  error  class "h-[76px]" does not match the configured pattern "kebabcase"          class-pattern
   5:30  error  class "text-[001C3F]" does not match the configured pattern "kebabcase"     class-pattern
  18:33  error  class "right-2.5" does not match the configured pattern "kebabcase"         class-pattern
  18:43  error  class "top-1/2" does not match the configured pattern "kebabcase"           class-pattern
  18:61  error  class "-translate-y-1/2" does not match the configured pattern "kebabcase"  class-pattern

✖ 5 problems (5 errors, 0 warnings)

What I’ve tried:

  • Using the default “kebabcase” pattern (fails on Tailwind syntax as shown above)
  • Turning off the rule entirely (works but loses all class name validation)

What I need:
A regex pattern that allows Tailwind’s special syntax (brackets, slashes, decimals, escaped characters, leading dashes) while still enforcing kebab-case for my custom classes, OR guidance on best practices for using html-validate with Tailwind CSS.

2

This looks exactly like the issue here posted a few days ago.
maybe you can find some insights there.

Any special reason for not participating in that discussion?