Tailwind CSS 정리

Tailwind CSS

• 유틸리티 퍼스트(Utility-First) 접근 방식을 기반으로 한 CSS 프레임워크
• HTML 태그에 직접 적용할 수 있는 미리 정의된 유틸리티 클래스를 제공하여, 별도의 복잡한 CSS 코드를 작성하지 않고도 빠르고 효율적으로 스타일링할 수 있도록 도움
• 전통적인 CSS 작성 방식과 달리, 클래스 기반의 스타일링을 통해 빠르게 UI를 구현할 수 있음

설치

# tailwindcss 설치
npm install -D tailwindcss

# tailwind.config.js 파일 생성
npx tailwindcss init

 

레이아웃 (Layout)

• Container : 반응형 컨테이너를 설정
• mx-auto : 수평 중앙 정렬
• flex : Flexbox 컨테이너 생성
• grid : 그리드 레이아웃 설정
• space-x-* : 자식 요소 간의 가로 간격 설정 (수평)
• space-y-* : 자식 요소 간의 세로 간격 설정 (수직)

 

정렬 (Layout)

• text-center : 텍스트 중앙 정렬
• items-center : Flexbox 또는 Grid에소 요소를 수직 중앙 정렬
• justify-center :  Flexbox 또는 Grid에소 요소를 수평 중앙 정렬

 

간격 (Spacing)

• p-* : 전체 패딩 적용
• px-* : 좌우 패딩 적용
• py-* : 상하 패딩 적용
• m-* : 전체 마진 적용
• mx-* : 좌우 마진 적용
• my-* : 상하 마진 적용

 

크기 (Sizing)

• w-* : 너비 설정
• h-* : 높이 설정
• max-w-* : 최대 너비 설정
• max-h-* : 최대 높이 설정
• min-w-* : 최소 너비 설정
• min-h-* : 최소 높이 설정

 

색상(Colors)

• bg-* : 배경 색상 설정
• text-* : 텍스트 색상 설정
• border-* : 테두리 색상 설정
• hover-* : 마우스 오버 시 스타일 변경

 

테두리(Border)

• border-* : 테두리 색상 설정
  • ex) border-blue-500
• border-* : 특정 방향의 테두리 설정
  • border-t
  • border-b
  • border-l
  • border-r 
• rounded-* : 테두리 반경 설정 (둥글게)
  • ex) rounded-lg

 

그림자(Shadows)

• shadow : 기본 그림자 효과
• shadow-md : 중간 크기 그림자
• shadow-lg : 큰 그림자

 

반응형 디자인(Breakpoints)

특정 화면 크기 이상에서만 스타일을 적용할 수 있음

Breakpoints	최소 화면 크기
sm	640px	작은 화면 (모바일)
md	768px	중간 화면 (태블릿)
lg	1024px	큰 화면
xl	1280px	매우 큰 화면
2xl	1536px	초대형 화면

<div class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  반응형 텍스트 크기
</div>

 

Typography

• text-* : 텍스트 크기 설정
• font-bold : 텍스트를 굵게 설정
• tracking-* : 문자 간격 설정
• leading-* : 줄 간격 설정

 

Display

• block : 블록 요소 설정
• inline-block : 인라인 불록 요소 설정
• hidden : 요소 숨기기
• flex : Flexbox 설정
• grid : Grid 레이아웃 설정

 

기타

• opacity-* : 불투명도 설정
• z-* : z-index 설정
• cursor-pointer : 마우스 커서를 포인터로 변경
• overflow-* : 요소의 넘침 처리 설정
  • overflow-hidden, overflow-auto

 

tailwind.config.js

• Tailwind CSS의 설정 파일로, 프로젝트에서 Tailwind CSS를 사용자 정의하기 위해 사용됨
• 이 파일을 이용하여 기본 설정을 확장하거나 수정할 수 있음
  • content : Tailwind가 스타일을 생성할 때 참조할 파일 경로를 지정
  • theme : Tailwind의 기본 테마를 확장하거나 재정의
  • pugins : Tailwind의 플러그인을 추가하거나 사용자 정의 유틸리를 정의
  • variants : 유틸리티 클래스에 대해 활성화할 상태를 설정 ex) hover, focus
  • extend : 기본 테마를 덮어쓰지 않고 추가적으로 확장할 때 사용

module.exports = {
  content: [
    './src/**/*.{html,js}', // Tailwind가 스타일을 생성할 파일 경로
  ],
  theme: {
    extend: {
      colors: {
        customBlue: '#1E40AF', // 사용자 정의 색상 추가
      },
    },
  },
  plugins: [],
};

 

vscode 확장 프로그램

Tailwind CSS vscode 확장 프로그램

 

참고

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.