Skip to content

javascript.md

Latest commit

 

History

History
125 lines (93 loc) · 3.01 KB

javascript.md

File metadata and controls

125 lines (93 loc) · 3.01 KB

JavaScript


ESLint

To lint Tailwind CSS classes in JavaScript files, ensure that:

  • The plugin is added to your configuration.
  • The settings object contains the correct Tailwind CSS configuration paths.

Flat config

Read more about the ESLint flat config format


// eslint.config.js

import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";
import { defineConfig } from "eslint/config";

export default defineConfig({
  // enable all recommended rules
  extends: [
    eslintPluginBetterTailwindcss.configs.recommended
  ],

  // if needed, override rules to configure them individually
  // rules: {
  //   "better-tailwindcss/enforce-consistent-line-wrapping": ["warn", { printWidth: 100 }]
  // },

  settings: {
    "better-tailwindcss": {
      // tailwindcss 4: the path to the entry file of the css based tailwind config (eg: `src/global.css`)
      entryPoint: "src/global.css",
      // tailwindcss 3: the path to the tailwind config file (eg: `tailwind.config.js`)
      tailwindConfig: "tailwind.config.js"
    }
  }
});

Legacy config

 
// .eslintrc.json

{
  // enable all recommended rules
  "extends": [
    "plugin:better-tailwindcss/legacy-recommended"
  ],

  // if needed, override rules to configure them individually
  // "rules": {
  //   "better-tailwindcss/enforce-consistent-line-wrapping": ["warn", { "printWidth": 100 }]
  // },

  "settings": {
    "better-tailwindcss": {
      // tailwindcss 4: the path to the entry file of the css based tailwind config (eg: `src/global.css`)
      "entryPoint": "src/global.css",
      // tailwindcss 3: the path to the tailwind config file (eg: `tailwind.config.js`)
      "tailwindConfig": "tailwind.config.js"
    }
  }
}

Oxlint

More info about the Oxlint configuration format can be found in the Oxlint documentation.

To lint Tailwind CSS classes in JavaScript files, ensure that:

  • The plugin is added to the jsPlugins array.
  • The settings object contains the correct Tailwind CSS configuration paths.
  • All relevant rules are added to the rules object.

// oxlint.config.js

import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";
import { defineConfig } from "oxlint";

export default defineConfig({
  overrides: [{
    files: ["**/*.{js,cjs,mjs}"],
    jsPlugins: [
      "eslint-plugin-better-tailwindcss"
    ],
    rules: {
      // enable all recommended rules
      ...eslintPluginBetterTailwindcss.configs.recommended.rules,

      // if needed, override rules to configure them individually
      "better-tailwindcss/enforce-consistent-line-wrapping": ["warn", { printWidth: 100 }]
    }
  }],
  settings: {
    "better-tailwindcss": {
      entryPoint: "src/global.css"
    }
  }
});