Tailwind CSS 설치

Install Tailwind CSS with Vite - Tailwind CSS

.vscode/settings.json

• "css.lint.unknownAtRules": "ignore"

  Tailwind CSS나 Sass 같은 사용자 정의 @규칙을 사용하는 환경에서 불필요한 경고 제거.

• "vite.config.*": "…, postcss.config.js, tailwind.config.js"

  설정 관련 파일들이 한 그룹에 모여, 파일 구조가 깔끔하게 정리되고 쉽게 찾을 수 있습니다.

  {
    "explorer.fileNesting.enabled": true,
    "explorer.fileNesting.patterns": {
      "tsconfig.json": "tsconfig.*.json, env.d.ts",
      **"vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*, postcss.config.js, tailwind.config.js",**
      "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig"
    },
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit"
    },
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    **"css.lint.unknownAtRules": "ignore"**
  }
  

VSCode 확장 프로그램

• Tailwind CSS IntelliSense

  Tailwind CSS IntelliSense는 VSCode에서 Tailwind CSS 사용을 편리하게 만들어주는 확장 프로그램입니다. 자동 완성, 클래스 이름 오류 검사, CSS 미리보기 기능 등을 제공하여 Tailwind CSS로 스타일링할 때 매우 유용합니다.

.vscode/extensions.json

• extensions.json에 Tailwind CSS IntelliSense 확장 프로그램을 추가하면, 팀원이 프로젝트를 열 때 VSCode가 확장 프로그램 설치를 권장하게 됩니다. 이를 통해 팀원들이 동일한 개발 환경에서 작업할 수 있어 코드 스타일과 작업 흐름의 일관성을 유지할 수 있습니다.

  {
    "recommendations": [
      "Vue.volar",
      "dbaeumer.vscode-eslint",
      "EditorConfig.EditorConfig",
      "esbenp.prettier-vscode",
      **"bradlc.vscode-tailwindcss" // 식별자 추가**
    ]
  }
  

미사용 코드 제거

참고

TailwindCSS 완전 정복: 포트폴리오부터 어드민까지! | 강의소개