인프런 커뮤니티 질문&답변
작성한 질문수
TailWind css 린트
작성
·
51
1
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
eslint-plugin-tailwindcss 설치가 원인으로 보입니다.
elint-plugin-tailwindcss 를 tailwindcss v4 에 설치하려면 @beta를 설치해야 하구요.
npm i -D eslint-plugin-tailwindcss@betatailwindcss 린트 룰 중에 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',
},저는 그냥 안쓰는게 나을 것 같습니다.
TailwindCSS 의 eslint-plugin-tailwindcss는 현재 Tailwind 버전 4와 맞지 않는 것 같아요. 설치해도 베타로 설치해야 하고.. 그냥 제거했습니다.
0
혹시 shadcn/ui의 설치 과정에서 index.css 파일에 아래와 같은 기본적인 CSS Variables(변수)가 설정되지 않았는지도 확인해보셔야 할 것 같아요 ..! eslint.config.js의 경우 테스트 해 보았는데 큰 문제는 없는걸로 보입니다.
0
안녕하세요 likelion13님 이정환입니다.
음!? 이상하네요 정확한 문제 원인 파악을 위해 프로젝트 전체 코드를 GitHub나 Google Drive를 통해 올려주시면 주말 이후 살펴보도록 하겠습니다!
이게 원인이었어요!
강의 내용을 기존 프로젝트에 적용 중인데, 이전에 설치한 eslint-plugin-tailwindcss가 문제였습니다.
그때도 하다가 포기헀었는데 어렵네요...
감사합니다!