feat: add rule enforces-arbitrary-value-syntax

README.md

@@ -15,6 +15,7 @@ While you can use the official plugin [`prettier-plugin-tailwindcss`](https://ww
 Learn more about each supported rules by reading their documentation:
 
 - [`classnames-order`](docs/rules/classnames-order.md): order classnames for consistency and it makes merge conflict a bit easier to resolve
+- [`enforces-arbitrary-value-syntax`](docs/rules/enforces-arbitrary-value-syntax.md): enforce correct arbitrary value syntax using square brackets (e.g. `p-10px` should be `p-[10px]`)
 - [`enforces-negative-arbitrary-values`](docs/rules/enforces-negative-arbitrary-values.md): make sure to use negative arbitrary values classname without the negative classname e.g. `-top-[5px]` should become `top-[-5px]`
 - [`enforces-shorthand`](docs/rules/enforces-shorthand.md): merge multiple classnames into shorthand if possible e.g. `mx-5 my-5` should become `m-5`
 - [`migration-from-tailwind-2`](docs/rules/migration-from-tailwind-2.md) for easy upgrade from Tailwind CSS `v2` to `v3`.

docs/rules/enforces-arbitrary-value-syntax.md

@@ -0,0 +1,84 @@
+# Enforces correct Tailwind CSS arbitrary value syntax (enforces-arbitrary-value-syntax)
+
+This rule enforces the correct Tailwind CSS arbitrary value syntax, which is using square brackets `[]` to wrap arbitrary values.
+
+## Rule Details
+
+In Tailwind CSS, when you need to use a custom value that is not in the preset, you should use the arbitrary value syntax `prefix-[value]` instead of directly appending the value after the prefix.
+
+### Incorrect Examples
+
+```html
+<div class="p-10px mx-15px leading-20px text-60px w-800px">
+  These class names use the incorrect syntax
+</div>
+```
+
+```js
+classnames("p-10px", "mx-15px", "leading-20px", "text-60px", "w-800px");
+```
+
+### Correct Examples
+
+```html
+<div class="p-[10px] mx-[15px] leading-[20px] text-[60px] w-[800px]">
+  These class names use the correct syntax
+</div>
+```
+
+```js
+classnames(
+  "p-[10px]",
+  "mx-[15px]",
+  "leading-[20px]",
+  "text-[60px]",
+  "w-[800px]"
+);
+```
+
+## Options
+
+```js
+...
+"tailwindcss/enforces-arbitrary-value-syntax": [<enabled>, {
+  "callees": Array<string>,
+  "config": <string>|<object>,
+  "skipClassAttribute": <boolean>,
+  "tags": Array<string>,
+}]
+...
+```
+
+### `callees` (default: `["classnames", "clsx", "ctl", "cva", "tv"]`)
+
+If you use tool libraries like [@netlify/classnames-template-literals](https://github.com/netlify/classnames-template-literals), you can add their names to the list to ensure that the rule can parse them correctly.
+
+### `ignoredKeys` (default: `["compoundVariants", "defaultVariants"]`)
+
+When using libraries like `cva`, some object keys are not used to contain class names.
+You can specify which keys will not be parsed by the plugin through this setting.
+For example, `cva` has `compoundVariants` and `defaultVariants`.
+Note: Since `compoundVariants` can contain class names in its `class` attribute, you can also use callee to ensure that this inner section is parsed while its parent is ignored.
+
+### `config` (default: generated by `tailwindcss/lib/lib/load-config`)
+
+By default, the plugin will try to load the file returned by the official `loadConfig()` tool.
+
+This allows the plugin to use your customized `colors`, `spacing`, `screens`, etc.
+
+You can provide another path or file name for the Tailwind CSS configuration file, such as `"config/tailwind.js"`.
+
+If the external file cannot be loaded (e.g. the path is incorrect or the file has been deleted), an empty object `{}` will be used.
+
+You can also directly inject a pure `object` configuration, such as `{ prefix: "tw-", theme: { ... } }`.
+
+Finally, the plugin will [merge the provided configuration](https://tailwindcss.com/docs/configuration#referencing-in-java-script) with [Tailwind CSS's default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js).
+
+### `skipClassAttribute` (default: `false`)
+
+Set `skipClassAttribute` to `true` if you only want to check class names inside functions in `callees`.
+This will avoid checking `class` and `className` attributes, but will still check `callees` inside these attributes.
+
+### `tags` (default: `[]`)
+
+Optional, if you use tag templates, you should provide them in this array.

lib/config/rules.js

@@ -5,6 +5,7 @@
 
 module.exports = {
   'tailwindcss/classnames-order': 'warn',
+  'tailwindcss/enforces-arbitrary-value-syntax': 'warn',
   'tailwindcss/enforces-negative-arbitrary-values': 'warn',
   'tailwindcss/enforces-shorthand': 'warn',
   'tailwindcss/migration-from-tailwind-2': 'warn',

lib/index.js

@@ -13,6 +13,7 @@ var base = __dirname + '/rules/';
 module.exports = {
   rules: {
     'classnames-order': require(base + 'classnames-order'),
+    'enforces-arbitrary-value-syntax': require(base + 'enforces-arbitrary-value-syntax'),
     'enforces-negative-arbitrary-values': require(base + 'enforces-negative-arbitrary-values'),
     'enforces-shorthand': require(base + 'enforces-shorthand'),
     'migration-from-tailwind-2': require(base + 'migration-from-tailwind-2'),