useTailwindStaticClassStrings (HTML)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/useTailwindStaticClassStrings
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- tailwind
Sources:
- Inspired from shadcn/require-static-classes

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useTailwindStaticClassStrings": "error"
6
      }
7
    }
8
  }
9
}

Description

Require complete, statically written class names.

Tailwind detects class names in source text. Dynamic string construction can hide complete class names from its source scanner. Choose between complete class names instead. Class strings containing interpolation are reported, including interpolations separated by whitespace.

This rule checks Svelte class attribute interpolation. JavaScript expressions inside HTML attributes, including Vue bindings and Astro expressions, are not inspected.

Examples

Invalid

1
<div class="bg-{color}"></div>

code-block.svelte:1:12 lint/nursery/useTailwindStaticClassStrings ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class string is constructed dynamically.
  
  > 1 │ <div class="bg-{color}"></div>
      │            ^^^^^^^^^^^^
    2 │ 
  
  ℹ Tailwind scans source text for complete class names.
  
  ℹ Use complete class names, choosing between them with a conditional expression or a lookup.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<div class="p-4 {classes}"></div>

code-block.svelte:1:12 lint/nursery/useTailwindStaticClassStrings ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class string is constructed dynamically.
  
  > 1 │ <div class="p-4 {classes}"></div>
      │            ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Tailwind scans source text for complete class names.
  
  ℹ Use complete class names, choosing between them with a conditional expression or a lookup.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<div class="p-4 text-white"></div>
2
<div class={active ? "bg-red-500" : "bg-blue-500"}></div>

Recognized class strings

This rule checks the attributes and functions recognized by the top-level tailwind configuration.