[Feature request] classname value likes arbitrary colors `text-[#fff]` should be replace predefined tailwind classname `text-white`

[ihavecoke]

Is your feature request related to a problem? Please describe. Our team is working on a large frontend project involving multiple frontend developers. During development on different branches, we often encounter inconsistencies in Tailwind CSS class names, especially when using dynamic arbitrary values, such as:

<div className="text-[#fff]">foo</div>

Where text-[#fff] corresponds to a color defined in the original tailwind.config.js file, for example: text-white.

Therefore, we would like to request support for adding additional parameters to the no-arbitrary-values rule. This would automatically replace occurrences of patterns like text-[#fff] with text-white.

Describe the solution you'd like

We propose enabling this feature through the following configuration:

{
  "rules": {
    "no-arbitrary-values": [
      "warn",
      ["colors"]
    ]
  }
}

This configuration would allow us to activate the feature and search for dynamic arbitrary values within the Tailwind configuration's theme colors.

Describe alternatives you've considered We can suggest replacing this value with text-white, but it should also be possible to eignore it.

[bezbac]

I think this is a duplicate of https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/175

[ihavecoke]

@bezbac Yes, it has a similar function to the issue you mentioned, so is it possible to implement and integrate this function into the current plugin @francoismassart ?

[francoismassart]

The new rule has been added since v3.15.0

npm i eslint-plugin-tailwindcss@latest -D