ARTICLE AD BOX
Title: How to configure html-validate class-pattern for Tailwind CSS?
I'm using html-validate with kebabcase pattern in my Hugo project, but Tailwind classes are failing validation:
h-[76px] (arbitrary values) top-1/2 (fractions) right-2.5 (decimals) -translate-y-1/2 (negative values)How do I create a regex pattern that allows Tailwind syntax while still enforcing kebabcase for custom classes?
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" } }