[TIL] 6/26 :: Tailwind CSS

* Tailwind CSS

🔗공식문서

: Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크이다.
다양한 속성을 조합하여 스타일링을 쉽게 할 수 있다.

✔️ 초기 세팅

• Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• tailwind.config.js 변경

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• Add the Tailwind directives to your CSS
  Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

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

• Start your build process

npm run dev

---

✔️ 전역으로 구글 폰트적용

🌟유의해야 할 점
: @import 구문이 Tailwind CSS 디렉티브보다 먼저 와야 한다.

---

✔️ Unknown at rule @tailwind, @apply

• 기본 셋팅후에 경고가 나타났다.

🌟vscode에서는 확장프로그램인 PostCSS Language Support 를 설치하면 더 이상 경고 문구가 보이지 않는다.

---

* 속성

✔️ 화면크기 (반응형)

• sm: 640px 이상의 화면
• md: 768px 이상의 화면
• lg: 1024px 이상의 화면
• xl: 1280px 이상의 화면
• 2xl: 1536px 이상의 화면

반응형 할땐 모바일 먼저 작업하는 것이 좋음!!

✔️ 레이아웃

• container: 중앙 정렬 및 패딩을 적용하는 클래스
• flex: 플렉스 박스를 활성화
• grid: 그리드 레이아웃을 활성화
• flex-col: 컬럼 방향으로 플렉스 아이템 정렬
• flex-row: 기본 방향으로 플렉스 아이템 정렬
• items-center: 플렉스 컨테이너 내 아이템을 수직으로 중앙 정렬
• justify-center: 플렉스 컨테이너 내 아이템을 수평으로 중앙 정렬
• space-x-4: 수평 간격을 적용
• space-y-4: 수직 간격을 적용
• gap-4: 그리드 아이템 간의 간격

✔️ 크기

• w-full: 너비를 100%로 설정
• h-full: 높이를 100%로 설정
• w-1/2: 너비를 50%로 설정
• h-1/2: 높이를 50%로 설정
• max-w-md: 최대 너비 설정
• min-h-screen: 최소 높이를 화면 높이로 설정
• p-4: 모든 방향에 패딩 1rem 적용
• m-4: 모든 방향에 마진 1rem 적용

✔️ 배경색 및 테두리

• bg-blue-500: 배경색을 파란색으로 설정
• bg-gray-100: 배경색을 연한 회색으로 설정
• border: 기본 테두리 설정
• border-gray-300: 테두리 색상을 회색으로 설정
• rounded: 기본 둥근 테두리
• rounded-full: 완전한 원형 테두리
• shadow-lg: 큰 그림자 효과 적용

✔️ 텍스트

• text-lg: 큰 텍스트 크기
• text-sm: 작은 텍스트 크기
• font-bold: 굵은 폰트
• font-medium: 중간 굵기 폰트
• text-center: 텍스트 중앙 정렬
• text-left: 텍스트 왼쪽 정렬
• text-right: 텍스트 오른쪽 정렬
• text-gray-700: 텍스트 색상을 회색으로 설정

✔️ 간격

• p-4: 모든 방향에 패딩 1rem
• pt-4: 상단에 패딩 1rem
• pr-4: 오른쪽에 패딩 1rem
• pb-4: 하단에 패딩 1rem
• pl-4: 왼쪽에 패딩 1rem
• m-4: 모든 방향에 마진 1rem
• mt-4: 상단에 마진 1rem
• mr-4: 오른쪽에 마진 1rem
• mb-4: 하단에 마진 1rem
• ml-4: 왼쪽에 마진 1rem

✔️ 기타

• cursor-pointer: 커서를 포인터로 변경
• transition: 트랜지션 효과 적용
• duration-300: 트랜지션 지속 시간 설정 (0.3초)
• ease-in-out: 트랜지션 이징 함수 설정

---

✔️ Tailwind vs Styled-Components

• Tailwind CSS
  • 장점: 유틸리티 클래스 기반으로 간편한 사용, 성능 최적화, 커스터마이징 용이
  • 단점: 클래스 네임이 길어질 수 있음, 프로젝트 초기 설정 필요
• Styled-Components
  • 장점: JavaScript 파일 내에서 스타일링 가능, 동적 스타일링 지원, 컴포넌트 기반 설계
  • 단점: 초기 설정 및 학습 곡선, 스타일링 시 성능 이슈 발생 가능

기존의 CSS-in-JS 라이브러리인 Styled-Components는 편리하지만, 성능 이슈와 클래스 네임 충돌 문제가 발생할 수 있다.
그동안 사용하면서 컴포넌트명을 지을때 꽤나 고민을 많이 하곤 했는데, 테일윈드를 사용해보니 훨씬 직관적인 점이 좋았다. 아직 속성들이 익숙하지 않아서 공식문서에 자주 검색해보면서 익혀야겠다!