TL;DR - Use eslint to prevent us from getting into more style-debt.
The ESLint rule used to prevent the use of raw, hardcoded color values (and other arbitrary values) in favor of configuration-based Tailwind classes is tailwindcss/no-arbitrary-value
This rule is part of the eslint-plugin-tailwindcss plugin and is designed to enforce consistency and adherence to your project's defined design system.
Configuration
By default, the no-arbitrary-value rule is turned off. You need to explicitly enable it in your ESLint configuration file (e.g., .eslintrc.js or eslint.config.js).
To enable the rule, modify your configuration as follows:
{
"extends": ["plugin:tailwindcss/recommended"],
"rules": {
"tailwindcss/no-arbitrary-value": "error"
}
}
TL;DR - Use eslint to prevent us from getting into more style-debt.
The ESLint rule used to prevent the use of raw, hardcoded color values (and other arbitrary values) in favor of configuration-based Tailwind classes is
tailwindcss/no-arbitrary-valueThis rule is part of the eslint-plugin-tailwindcss plugin and is designed to enforce consistency and adherence to your project's defined design system.
Configuration
By default, the no-arbitrary-value rule is turned off. You need to explicitly enable it in your ESLint configuration file (e.g., .eslintrc.js or eslint.config.js).
To enable the rule, modify your configuration as follows: