I'm having trouble putting the tailwind css plugin for eslint to work... I'm using sveltekit, not sure if that is relevant
I've tried everything I know and could find online...
the eslint.config.js contains a console log just to show that the tailwind css object is being properly added to the settings object
here is the eslint.config.js:
import eslint from '@eslint/js';import prettier from 'eslint-config-prettier';import svelte from 'eslint-plugin-svelte';import globals from 'globals';import tseslint from 'typescript-eslint';import tailwindcss from 'eslint-plugin-tailwindcss';const test = tseslint.config( eslint.configs.recommended, ...tseslint.configs.recommended, ...svelte.configs['flat/recommended'], ...tailwindcss.configs['flat/recommended'], prettier, ...svelte.configs['flat/prettier'], { languageOptions: { globals: { ...globals.browser, ...globals.node } } }, { files: ['**/*.svelte', '**/*.js', '**/*.ts'], languageOptions: { parserOptions: { parser: tseslint.parser } } }, { ignores: ['build/', '.svelte-kit/', 'dist/'] },);console.log(test);export default test;
here is the package.json if it's needed:
{"name": "sveltekit-ssg-demo-app","version": "0.0.1","private": true,"scripts": {"dev": "vite dev","build": "vite build","preview": "vite preview","check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint": "prettier --write ./src && eslint ./src --fix","format": "prettier --write ." },"devDependencies": {"@sveltejs/adapter-static": "^3.0.5","@sveltejs/kit": "^2.7.1","@sveltejs/vite-plugin-svelte": "^3.1.2","@types/eslint": "^9.6.1","autoprefixer": "^10.4.20","eslint": "^9.12.0","eslint-config-prettier": "^9.1.0","eslint-plugin-svelte": "^2.44.1","eslint-plugin-tailwindcss": "^3.17.5","@eslint/js": "^9.12.0","globals": "^15.11.0","postcss": "^8.4.47","prettier": "^3.3.3","prettier-plugin-svelte": "^3.2.7","prettier-plugin-tailwindcss": "^0.6.8","svelte": "^4.2.19","svelte-check": "^4.0.5","tailwindcss": "^3.4.14","typescript": "^5.6.3","typescript-eslint": "^8.9.0","vite": "^5.4.9" },"type": "module"}
I have the file src/routes/+page.svelte
<div class="flex grid"><p>test</p></div>
it should trigger the no-contradicting-classname
rule from eslint-plugin-tailwindcss
because of this <div class="flex grid">
but nothing happens
I've ran the eslint ./src
command with the --debug
flag (eslint ./src --debug
) and verified that the file in question is being checked and that both eslint-plugin-svelte
configs are mentioned in the logs (lines 11 and 14 of the eslint.config.js
file ...svelte.configs['flat/recommended']
, ...svelte.configs['flat/prettier']
) but the ...tailwindcss.configs['flat/recommended']
never appears
here are the eslint-plugin-svelte
configs I mentioned appear in the logs when running esling with the --bebug
flag:
eslint:linter Apply the processor: { meta: { name: 'eslint-plugin-svelte', version: '2.44.1' }, supportsAutofix: true, preprocess: [Function: preprocess], postprocess: [Function: postprocess] } +0ms eslint:linter Apply the processor: { meta: { name: 'eslint-plugin-svelte', version: '2.44.1' }, supportsAutofix: true, preprocess: [Function: preprocess], postprocess: [Function: postprocess] } +0ms
tailwind is never mentioned in the logs, but it is on the config object (confirmed by the console log) does anyone have any idea why this is happening?
Thank you!
I've tried to add the eslint-plugin-tailwindcss
config object to the eslint.config.js in multiple ways