Tailwind Css 기능 및 지시어

 

 

@tailwind base;

- Tailwind css에서 기본 스타일을 주입하는 부분으로, 기본 스타일 및 글로벌 스타일을 정의하는 부분

- ex) 기본태그들의 초기화 or 프로젝트 전체적으로 사용될 css등(font 등)

 

@tailwind components;

- Tailwind css에서 컴포넌트 클래스를 주입하는 부분으로, 컴포넌트 단위의 스타일을 정하는 역할

- ex) 버튼,모달,카드 등의 UI컴포넌트 관련

 

@tailwind utilities;

- Tailwind css의 다양한 유틸리스 클래스를 사용하기 위한 역할

- ex) 레이아웃, 텍스트, 색상, 간격 등

 

@tailwind variants;

- Tailwind css의 가상클래스를 쓰기 위한 역할

 

우선순위는 utilities > components > base 순서이다.

 

@layer

해당 지시어 같은경우에는 제일 이해가 가지않았다. 사용하지 않아도 문제가 되지않는데 왜 사용해야할까?

찾아보니 코드의 구조를 조직화하고 유지보수성을 향상시키기 위함이라고한다. 어떤 예시가있을까?

협업을 하다보면 하나의 기능중 CSS속성을 변경하려면 해당 클래스를  css파일에서 찾아야한다.(HTML에 직접작성한것 제외)

이경우 간단하게 검색을 통해서 찾을수도 있겠지만 각 역할에 맞는 레이어 정의 해놓는다면 다른 팀원이 더보기 좋지않을까?

- @Layer base에서 전역설정관련 css를 설정

- @Layer components에서 컴포넌트 단위 클래스를 정의

- @Layer utilities에서 사용자정의 클래스를 정의

(Tailwind에서 없는 속성을 정의 or 컴포넌트 기반이 아닌 css속성등)

 

해당처럼 영역을 정의하는것으로 이해하면 

 

@apply

- HTML에 직접작성 하는것이아닌, CSS파일에 Tailwind 클래스 문법을 작성할때 사용된다.

- 재사용성이 있는 클래스를 작성할때 사용된다.

 

tailwind.config

import type { Config } from 'tailwindcss'

const config: Config = {
  // Tailwind 클래스 이름이 포함된 파일을 인식하기위한 파일경로들
  content: [ // 참고: https://tailwindcss.com/docs/content-configuration
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],

  // 색상, 글꼴, 글자크기, 테두리크기, 시각적 디자인과 관련
  theme: { //참고: https://tailwindcss.com/docs/theme

    // 프로젝트의 전체 색상
    colors:{ // https://tailwindcss.com/docs/customizing-colors
      transparent: "transparent",
      current: 'currentColor'
    },

    // 프로젝트 전체 글꼴
    fontFamily:{
    },

    // 반응형 스크린
    screens: { // https://tailwindcss.com/docs/screens
    },

     // 프로젝트의 전역 간격과 크기조정
     spacing:{ // https://tailwindcss.com/docs/customizing-spacing
      // sans:['Graphik', 'sans-serif'],
      // serif: ['Merriweather', 'serif'],
    },

    // 프로젝트 전역 테두리
    borderRadius:{
      // '4xl': '2rem',
    },

    // 기본옵션을 유지하면서 새값을 추가하려 할때.(상속)
    extend: {
    }
  },
  plugins: [],
}
export default config

 

위와 같이 사용하면된다. 문제는 Tailwind의 유틸리스 클래스를 적응하는게 먼저다. 공식홈가서 class를 하나씩 보는것도 생각보다 시간이 많이 들어간다. 그러다가 찾은게 Tailwind CSS inteliSense 인데 css처럼 자동완성 기능이다.  나는 vs코드를 사용해서 플러그인을 바로 설치하였고 이후에 vs코드 설정파일인 settings.json에서 설정을 추가 해주었다.

  // By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:
  "editor.quickSuggestions": { 
   "strings": "on"
  }, 
  // Use the files.associations setting to tell VS Code to always open .css files in Tailwind CSS mode:
  "files.associations": {
    "*.css": "tailwindcss"
  },

 

첫번째 설정을 해주어야 tailwind class를 자동완성해주고, 두번째는 Tailwind css로 파일이 열리도록 설정하는거다.

(주위! 색상은 표시가 되지않으므로 아직 찾아보는중이다.)

 

Tailwind CSS IntelliSense - Visual Studio Marketplace