@viclafouch/eslint-config-viclafouch 4.22.1-beta.0 → 4.22.1-beta.1

package/README.md

@@ -18,13 +18,14 @@ These are the ESLint and Prettier settings for a Next.js project ⚡️
   - [If you want to enable imports sorting](#if-you-want-to-enable-imports-sorting)
   - [If you use Next.js](#if-you-use-nextjs)
   - [If you use React.js](#if-you-use-reactjs)
+  - [If you use Tailwind CSS v4](#if-you-use-tailwind-css-v4)
   - [If you want to use Prettier](#if-you-want-to-use-prettier)
   - [If you use VS Code](#if-you-use-vs-code)
 
 ## What it does
 
 * Lints JavaScript / TypeScript based on the latest standards
-* Multiple configs `react` `hooks` `next`..
+* Multiple configs `react` `hooks` `next` `tailwindcss`..
 * Shared `tsconfig.json`
 * Fixes issues and formatting errors with Prettier
 * Check for accessibility rules on JSX elements.
@@ -195,6 +196,26 @@ export default [
 ]
 ```
 
+## If you use Tailwind CSS v4
+
+You can add linting rules for Tailwind CSS v4 using `eslint-plugin-better-tailwindcss`. You need to provide the path to your CSS entry file via the `entryPoint` option.
+
+```js
+import { baseConfig, betterTailwindcssConfig } from '@viclafouch/eslint-config-viclafouch'
+
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+export default [
+  ...baseConfig,
+  ...betterTailwindcssConfig({
+    entryPoint: 'src/global.css'
+  }),
+  {
+    ignores: ['**/node_modules/**']
+  }
+]
+```
 
 ## If you want to use Prettier
 

package/better-tailwindcss.mjs

@@ -0,0 +1,32 @@
+import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
+
+/**
+ * @typedef {Object} BetterTailwindcssOptions
+ * @property {string} entryPoint - Path to the CSS entry file (Tailwind v4)
+ */
+
+/**
+ * Creates ESLint flat config for eslint-plugin-better-tailwindcss (Tailwind v4)
+ * @param {BetterTailwindcssOptions} options
+ * @returns {import("eslint").Linter.Config[]}
+ */
+export default function betterTailwindcssConfig({ entryPoint }) {
+  const recommendedRules = betterTailwindcss.configs?.recommended?.rules ?? {}
+
+  return [
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: {
+        'better-tailwindcss': betterTailwindcss
+      },
+      settings: {
+        'better-tailwindcss': {
+          entryPoint
+        }
+      },
+      rules: {
+        ...recommendedRules
+      }
+    }
+  ]
+}

package/index.d.ts

@@ -7,3 +7,12 @@ export declare const nextConfig: Linter.Config[]
 export declare const prettierConfig: Linter.Config[]
 export declare const hooksConfig: Linter.Config[]
 export declare const importsConfig: Linter.Config[]
+
+export interface BetterTailwindcssOptions {
+  /** Path to the CSS entry file (Tailwind v4) */
+  entryPoint: string
+}
+
+export declare function betterTailwindcssConfig(
+  options: BetterTailwindcssOptions
+): Linter.Config[]

package/index.mjs

@@ -5,3 +5,4 @@ export { default as nextConfig } from './next.mjs'
 export { default as prettierConfig } from './prettier.mjs'
 export { default as hooksConfig } from './hooks.mjs'
 export { default as importsConfig } from './imports.mjs'
+export { default as betterTailwindcssConfig } from './better-tailwindcss.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viclafouch/eslint-config-viclafouch",
-  "version": "4.22.1-beta.0",
+  "version": "4.22.1-beta.1",
   "description": "ESLint and Prettier Config from Victor de la Fouchardiere",
   "type": "module",
   "main": "./index.mjs",
@@ -45,23 +45,24 @@
     "@total-typescript/ts-reset": "^0.6.1",
     "app-root-path": "^3.1.0",
     "babel-loader": "^10.0.0",
+    "eslint": ">= 9",
     "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-better-tailwindcss": "^3.8.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-unicorn": "^58.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-testing-library": "^7.1.1",
+    "eslint-plugin-unicorn": "^58.0.0",
     "get-tsconfig": "^4.10.0",
     "globals": "^16.0.0",
     "prettier": ">= 3",
     "prettier-plugin-curly": "^0.3.1",
     "typescript": ">= 5",
-    "typescript-eslint": "^8.26.0",
-    "eslint": ">= 9"
+    "typescript-eslint": "^8.26.0"
   },
   "scripts": {
     "lint": "eslint .",