Tailwind 추가설정

테일윈드

테일윈드 : https://tailwindcss.com/docs/guides/vite → 설치를 따른다

 

Main.tsx 최상위에 inde.css를 추가

• 테일윈드 인텔리젼스 작동을 안한다면 코드 추가
  • .vscode의 setting.json에 아래 코드를 추가

  { 
      "tailwindCSS.includeLanguages": { 
          "javascript": "javascript", 
          "html": "HTML" 
      }, 
     "editor.quickSuggestions": { 
         "strings": true 
      } 
  }

   
• 테일윈드 전체 색상 관여하기
  • 디자인 컴포넌트 만들때 유용하다. 

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-black;
}

테일윈드 index.css에서 @layer componets에 input을 추가하여 디자인컴포넌트 만드는 방법 
@layer components {
  .input {
    @apply rounded-full border border-stone-200 px-4 py-2 text-sm transition-all duration-300 placeholder:text-stone-400 focus:outline-none focus:ring focus:ring-yellow-400 md:px-6 md:py-3;
  }}

 

 

테일윈드 : prettier-plugin-tailwindcss" 설치

• .prettierrc 파일생성

{
  "plugins": ["prettier-plugin-tailwindcss"]
}