Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

eslint-plugin-tailwindcss configuration not working

$
0
0

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


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>