Basics

This check has a base priority of normal and works with any version of Elixir.

Explanation

Forbids data-[<name>]: bracket-variant syntax for boolean data-attribute Tailwind variants. Use the shorthand data-<name>: form instead.

Tailwind supports two forms for data-attribute variants:

• data-<name>: — matches when the attribute is present (boolean).
• data-[<name>=<value>]: — matches when the attribute has a specific value.

For boolean attributes like data-disabled or data-open, the bracketed form (data-[disabled]:) is an obscure way of writing data-disabled:. Reserve brackets for value matching (data-[state=open]:).

The check inspects every ~H sigil and every .heex template referenced via embed_templates. Detection is line-by-line: a data-[name]: whose brackets wrap across lines is not flagged.

Bad

<div class={["data-[disabled]:opacity-50"]}>...</div>

Good

<div class={["data-disabled:opacity-50"]}>...</div>
<div class={["data-[state=open]:bg-red-50"]}>...</div>

Check-Specific Parameters

There are no specific parameters for this check.

General Parameters

Like with all checks, general params can be applied.

Parameters can be configured via the .credo.exs config file.