Consistency

no-inline-styles

Disallow inline style attributes; use Tailwind utility classes.

Flags inline style={{ ... }} usage and steers it onto Tailwind utilities (or CSS variables for dynamic cases). Inline styles are how AI agents bypass the design-token boundary entirely — every one is a hex / pixel / colour outside the system.

Behavior

• Fixable: No.
• Suggestions: Yes.

Examples

Bad:

<div style={{ color: "red", padding: "16px" }} />

Good:

<div className="text-red-500 p-4" />

Related rules

• no-arbitrary-colorsDisallow arbitrary color values like bg-[#FF0000] in Tailwind classes.
• no-arbitrary-spacingDisallow arbitrary spacing values like p-[13px] in Tailwind classes.
• max-tailwind-classesFlag elements with too many Tailwind utility classes.

Use it

Enable no-inline-styles in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/no-inline-styles': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules