ARTICLE AD BOX
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.
