@tailwind-ts/eslint-plugin 0.1.0 → 0.2.0

package/README.md

@@ -2,6 +2,18 @@
 
 ESLint plugin for detecting invalid Tailwind CSS v4 class names — typos, undefined utilities, and bad `@apply` usage — in JavaScript, TypeScript, CSS, and Vue projects.
 
+## What's new in v0.2.0
+
+- **`cva()` variant validation** — lints base classes and variant values inside `class-variance-authority` configs
+- **CSS `@apply` linting** — new `no-invalid-apply` rule for `.css` files
+- **Typo suggestions** — reports `Did you mean "flex"?` when a close match exists
+- **Import-aware helpers** — validates `cn()` / `clsx()` when imported from `@/lib/utils`
+- **Vue `:class` support** — lints class bindings in `.vue` files
+- **`tv()` helper** — tailwind-variants added to defaults
+- **Config presets** — `react`, `vue`, and `css` presets
+- **Multi-entry CSS** — `cssConfigPath` accepts a string or array for monorepos
+- **Batch validation** — faster lint runs via batched worker calls and shared cache
+
 ## Features
 
 - **`cva()` variant validation** — lints base classes and variant values inside `class-variance-authority` configs
@@ -84,6 +96,19 @@ export default [
 | `vue` | `*.{vue,js,ts}` | Enables `:class` parsing (requires `vue-eslint-parser`) |
 | `css` | `**/*.css` | Enables `@apply` validation |
 
+Combine presets for full-stack apps:
+
+```js
+export default [
+  {
+    extends: [tailwindTs.configs.react, tailwindTs.configs.css],
+    settings: {
+      tailwindTs: { cssConfigPath: "./src/styles/tailwind.css" },
+    },
+  },
+];
+```
+
 ## Rules
 
 | Rule | Description | Default |
@@ -91,6 +116,61 @@ export default [
 | [`no-invalid-classname`](./docs/rules/no-invalid-classname.md) | Disallow invalid Tailwind classes in JSX, helpers, and Vue bindings | `error` |
 | [`no-invalid-apply`](./docs/rules/no-invalid-apply.md) | Disallow invalid classes in CSS `@apply` directives | `error` |
 
+Both rules share the same Tailwind design-system validator and support typo suggestions.
+
+## Examples
+
+### JSX typo with suggestion
+
+```jsx
+// error: Class "flexs" is not a valid Tailwind CSS class. Did you mean "flex"?
+<div className="flexs items-center" />
+```
+
+### `cva()` variant values
+
+```ts
+import { cva } from "class-variance-authority";
+
+const button = cva("rounded-lg", {
+  variants: {
+    size: {
+      sm: "p-2 text-lgg", // error on "text-lgg"
+      md: "p-4 text-base",
+    },
+  },
+});
+```
+
+### CSS `@apply`
+
+```css
+.card {
+  @apply flexs items-center rounded-lg; /* error */
+}
+```
+
+### Import-aware `cn()`
+
+```tsx
+import { cn } from "@/lib/utils";
+
+<div className={cn("p-4", "text-lgg")} />
+```
+
+### Monorepo CSS entries
+
+```js
+settings: {
+  tailwindTs: {
+    cssConfigPath: [
+      "./apps/web/src/styles/tailwind.css",
+      "./apps/admin/src/styles/tailwind.css",
+    ],
+  },
+},
+```
+
 ## Settings
 
 | Option | Type | Default | Description |
@@ -99,7 +179,10 @@ export default [
 | `attributes` | `string[]` | `["class", "className"]` | JSX/Vue attributes to lint |
 | `functions` | `string[]` | `["cn", "clsx", "cva", "tv", "twMerge", "twJoin"]` | Helper calls to lint |
 | `whitelist` | `string[]` | `[]` | Regex patterns for allowed non-Tailwind classes |
+| `ignoredKeys` | `string[]` | `["defaultVariants", "compoundVariants", "compoundSlots"]` | Object keys skipped in helper calls |
 | `suggestSimilarClasses` | `boolean` | `true` | Include "Did you mean …?" hints for typos |
+| `cacheMaxAge` | `number` | `600000` | Validation cache TTL in ms (10 min) |
+| `cacheMaxSize` | `number` | `250000` | Max cached validation entries |
 
 ### Typesafe settings
 
@@ -109,6 +192,7 @@ settings: {
     /** @type {import('@tailwind-ts/eslint-plugin').PluginSettings} */
     ({
       cssConfigPath: "./src/styles/tailwind.css",
+      suggestSimilarClasses: true,
     }),
 },
 ```
@@ -116,8 +200,21 @@ settings: {
 ## Limitations
 
 - Dynamic template interpolation (e.g. `` className={`p-${size}`} ``) is not validated
+- Spread props (`className={props.className}`) are skipped unless the value is a static literal upstream
 - Vue support requires `vue-eslint-parser` in your ESLint config
 
+## Migration from v0.1.0
+
+No breaking changes to rule names or settings. v0.2.0 adds optional presets and the `no-invalid-apply` rule via `configs.css`.
+
+```js
+// v0.1.0 — still works
+extends: [tailwindTs.configs.recommended]
+
+// v0.2.0 — add CSS @apply linting
+extends: [tailwindTs.configs.recommended, tailwindTs.configs.css]
+```
+
 ## License
 
 MIT

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@tailwind-ts/eslint-plugin",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "ESLint plugin for detecting invalid Tailwind CSS v4 class names with cva, @apply, and typo suggestions",
   "license": "MIT",
   "type": "module",
-  "author": "",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwind-ts/eslint-plugin.git"
@@ -47,12 +46,6 @@
     "docs/",
     "lib/"
   ],
-  "scripts": {
-    "build": "unbuild --config unbuild.config.ts && node scripts/copy-worker.mjs",
-    "test": "vitest run",
-    "lint": "eslint .",
-    "prepublishOnly": "npm run build && npm test"
-  },
   "dependencies": {
     "@typescript-eslint/utils": "^8.37.0",
     "synckit": "^0.11.11"
@@ -69,18 +62,5 @@
     "vue-eslint-parser": {
       "optional": true
     }
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.31.0",
-    "@tailwindcss/node": "^4.3.2",
-    "@types/node": "^22.15.0",
-    "@typescript-eslint/parser": "^8.37.0",
-    "@typescript-eslint/rule-tester": "^8.37.0",
-    "eslint": "^9.31.0",
-    "tailwindcss": "^4.3.2",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.42.0",
-    "unbuild": "^3.3.1",
-    "vitest": "^3.2.4"
   }
 }