useTailwindStaticClassStrings (JavaScript)

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. Template interpolation and concatenation are reported even when separated by whitespace or composed entirely of literals. Variables and conditional choices are allowed. This rule does not follow variable assignments or inspect tagged templates.

Examples

Invalid

1
<div className={`bg-${color}`} />;

code-block.jsx:1:17 lint/nursery/useTailwindStaticClassStrings ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class string is constructed dynamically.
  
  > 1 │ <div className={`bg-${color}`} />;
      │                 ^^^^^^^^^^^^^
    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 className={"text-" + color} />;

code-block.jsx:1:17 lint/nursery/useTailwindStaticClassStrings ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class string is constructed dynamically.
  
  > 1 │ <div className={"text-" + color} />;
      │                 ^^^^^^^^^^^^^^^
    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
clsx(`bg-${color}`);

code-block.js:1:6 lint/nursery/useTailwindStaticClassStrings ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class string is constructed dynamically.
  
  > 1 │ clsx(`bg-${color}`);
      │      ^^^^^^^^^^^^^
    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 className={`p-4 ${classes}`} />;

code-block.jsx:1:17 lint/nursery/useTailwindStaticClassStrings ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class string is constructed dynamically.
  
  > 1 │ <div className={`p-4 ${classes}`} />;
      │                 ^^^^^^^^^^^^^^^^
    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 className={active ? "bg-red-500" : "bg-blue-500"} />;
2
<div className="p-4 text-white" />;

Recognized class strings

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