css 자동추천 활성화

위처럼 div 태그 안에서 className="grid gri"까지만 입력 시
완성 부분까지 자동으로 추천되도록 Tailwind라는 프레임워크 사용한다.

1, vscode 확장자 'Tailwind CSS IntelliSense' 추가

2, 플젝 루트에서 tailwind.config.js파일이 생성되도록,
터미널에서 아래 명령어를 실행

npx tailwindcss init

3, tailwind.config.js파일 content에 아래처럼 내용을 추가

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

4, settings.json파일 내 {} 안에는 아래를 추가

  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.classRegex": [
    "className\\s*=\\s*[\"']([^\"']*)[\"']",
    "class:\\s*[\"']([^\"']*)[\"']"
  ]

필요 시 vscode 종료했다 재시작하면 적용 확인 가능하다.

그럼 코드에서 className의 grid를 아래처럼 작성하면

return (
    <div className="grid grid-cols-5 gap-3 p-3">
      {randomPhotos.map((item, index) => (
        <div key={index}>{item.id}</div>
      ))}
    </div>
  );

화면에서 아래와 같은 grid 구성이 보인다.

gap: grid 또는 flex 컨테이너 안의 항목 간 간격
p: 요소의 전체 패딩

---

directory:

현재 기준 settings.json파일 전체:

{
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.inlineSuggest.enabled": true,

  "editor.formatOnSave": true,

  "typescript.updateImportsOnFileMove.enabled": "always",

  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html"
  },

  "emmet.triggerExpansionOnTab": true,

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "javascript.updateImportsOnFileMove.enabled": "always",

  "eslint.alwaysShowStatus": true,

  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "editor.suggestSelection": "first",

  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

  "editor.wordWrapColumn": 100,
  "security.workspace.trust.untrustedFiles": "open",
  "workbench.startupEditor": "none",

  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.classRegex": [
    "className\\s*=\\s*[\"']([^\"']*)[\"']",
    "class:\\s*[\"']([^\"']*)[\"']"
  ]
}