To use ESLint with CSS files containing Tailwind CSS @apply directives, first install the @eslint/css plugin and the tailwind-csstree custom syntax.
npm i -D @eslint/css tailwind-csstreeTo lint Tailwind CSS classes in CSS files, ensure that:
- The
@eslint/cssplugin is installed and configured. - The
tailwind-csstreecustom syntax is installed and configured. - The plugin is added to your configuration.
- The
settingsobject contains the correct Tailwind CSS configuration paths.
Read more about the ESLint flat config format
// eslint.config.js
import css from "@eslint/css";
import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";
import { defineConfig } from "eslint/config";
import { tailwind4 } from "tailwind-csstree";
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"
}
},
files: ["**/*.css"],
language: "css/css",
languageOptions: {
customSyntax: tailwind4,
tolerant: true
},
plugins: {
css
}
});Note: Legacy config is not supported for CSS files as the
@eslint/cssplugin requires the ESLint flat config format.
Oxlint currently does not support CSS parser integration for this use case.
Because Oxlint currently only supports JavaScript-like files, eslint-plugin-better-tailwindcss cannot currently lint CSS @apply directives through Oxlint.
You can continue using ESLint for CSS files until broader parser support is available in Oxlint.