Predefined patterns

Rules enforcing patterns such as {@link rule:class-pattern} and {@link rule:id-pattern} take one or more patterns as an option.

{
  "pattern": ["kebabcase"],
}

This is a list of predefined patterns that can be used with such rules.

kebabcase

Matches strings with words separated by hyphen. Must start with a letter and cannot end with a hyphen. Multiple consecutive hyphens are not allowed.

camelcase

Matches strings with words the first letter of each word capitalized except the initial letter. Must start with a letter.

snakecase

Matches strings with words separated by underscore. Must start with a letter and cannot end with an underscore. Multiple consecutive underscores are not allowed.

bem

Matches string using BEM naming convention.

tailwind

Matches Tailwind CSS class names.

INFO

This pattern validates the basic format of Tailwind class names but does not verify if a specific class exists in Tailwind. It uses a permissive approach to support all Tailwind constructs including arbitrary values, variants, custom plugins, and future additions without requiring the Tailwind library as a dependency.

Custom patterns

In addition to the predefined patterns above, you can define custom regular expressions using either a string wrapped with / ("/^[a-z-]+/$") or a RegExp object. Each keyword (e.g. each class) is matched individually so you do not need to handle whitespace between them.

{
  "pattern": ["/^[a-z-]+$/"],
}

When using Javascript you may also define the pattern directly as a regular expression:

{
	"pattern": [/^[a-z-]+$/],
}

TIP

You typically want to use ^ and/or $ to match the start or end of the keyword.