TailWind css 린트

bg-muted, muted-foreground를 린트가 인식하지 못하는 것 같아요.
Tailwind CSS IntelliSense 설치했구요, 추가로 PostCSS Language Support 확장 프로그램까지 설치한 상태입니다.

현재 제 eslint.config.js파일입니다.

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';
import { defineConfig, globalIgnores } from 'eslint/config';
import tailwind from 'eslint-plugin-tailwindcss';

export default defineConfig([
  globalIgnores(['dist']),
  js.configs.recommended, // ESLint 기본 권장
  ...tailwind.configs['flat/recommended'], // Tailwind 플러그인 권장(배열)
  ...tseslint.configs.recommended, // TypeScript 권장(배열)
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      reactHooks.configs['recommended-latest'], // React Hooks 권장
      reactRefresh.configs.vite, // Vite 환경에서 React Refresh
    ],
    rules: {
      'tailwindcss/classnames-order': 'off', // 정렬은 Prettier가 담당하므로 충돌 방지
       "@typescript-eslint/no-unused-vars": 'warn',  // 사용되지 않은 변수가 있다면 경고
       "@typescript-eslint/no-explicit-any": 'warn' // 명시적으로 any를 사용하면 경고 
    },
    languageOptions: {
      globals: globals.browser,
    },
  },
]);

답변 3

2

Codingbear

2025-10-28T08:58:12.649Z

eslint-plugin-tailwindcss 설치가 원인으로 보입니다.

elint-plugin-tailwindcss 를 tailwindcss v4 에 설치하려면 @beta를 설치해야 하구요.

 npm i -D eslint-plugin-tailwindcss@beta

tailwindcss 린트 룰 중에 tailwindcss/no-custom-classname 을 끄지 않으면 위와 같이 hover:bg-muted를 custom-classname 으로 체크하니 eslint.config.js파일에 룰 해제해주세요.

   rules: {
      /*  템플릿 코드에 추가된 부분 */
      '@typescript-eslint/no-unused-vars': 'off',
      '@typescript-eslint/no-explicity-any': 'off',
      'tailwindcss/no-custom-classname': 'off',
    },

저는 그냥 안쓰는게 나을 것 같습니다.

 

1

likelion13

2025-10-28T10:56:12.683Z

이게 원인이었어요!

강의 내용을 기존 프로젝트에 적용 중인데, 이전에 설치한 eslint-plugin-tailwindcss가 문제였습니다.

그때도 하다가 포기헀었는데 어렵네요...

감사합니다!

1

Codingbear

2025-10-28T12:59:32.136Z

TailwindCSS 의 eslint-plugin-tailwindcss는 현재 Tailwind 버전 4와 맞지 않는 것 같아요. 설치해도 베타로 설치해야 하고.. 그냥 제거했습니다.

0

이정환 Winterlood

2025-10-26T09:16:34.513Z

혹시 shadcn/ui의 설치 과정에서 index.css 파일에 아래와 같은 기본적인 CSS Variables(변수)가 설정되지 않았는지도 확인해보셔야 할 것 같아요 ..! eslint.config.js의 경우 테스트 해 보았는데 큰 문제는 없는걸로 보입니다.

 

0

이정환 Winterlood

2025-10-26T08:44:15.177Z

안녕하세요 likelion13님 이정환입니다.

음!? 이상하네요 정확한 문제 원인 파악을 위해 프로젝트 전체 코드를 GitHub나 Google Drive를 통해 올려주시면 주말 이후 살펴보도록 하겠습니다!