Tailwind

새롭게 알아두면 좋을 것 같은 클래스 이름들

1. h-screen : viewport 100% 크기

2. -mb-1 : 음수 마진, 즉 간격이 안으로 들어옴

3. size-1 : w + h

4. scale-1 : 배율

5. ring : CSS box-shadow 속성을 사용하여 요소 주위에 반투명한 외곽선(링)을 추가
1. 요소 내부
2. 주로 포커스 링, 강조 효과에 사용
3. 모서리 border-radius를 따름
4. 크기, 색상, 불투명도, 오프셋(외곽선과 요소 사이 gap) 등 다양한 옵션 제공
1. 오프셋에도 값을 줄 수 있음(색 등)
2. transition-shadow 속성으로 ring이 나타날 때 효과를 줄 수 있음

6. outline : CSS outline 속성을 사용하여 요소 주위에 경계
1. 요소 외부
2. 단순한 외곽선
3. 직사각형
4. 간단한 스타일만 설정 가능

7. placeholder

8. modifier : ⇒ 특정 조건:참일때 값
1. dark: ⇒ 컴퓨터 시스템이 다크모드면 적용됨
2. hover:, focus:, active:
3. invalid: : 가상요소. 해당 요소가 invalid하다면 작동. (ex. input태그의 type과 맞지 않는 값을 넣으면 작동)
4. required: : 필수 요소라면
5. peer: ⇒ 형제 요소의 상태에 따라 본인 스타일이 달라지는 경우
1. “위에 있는” 형제 요소 중 주시할 형제를 peer 클래스로 표시
2. peer- 로 본인 요소의 스타일을 지정 (ex. peer-invalid:text-red-500 ⇒ peer가 invalid하다면 해당 스타일이 적용)
6. *: : 모든 자식요소에 해당 값이 적용
7. has-[조건]: : 특정 조건을 만족하는 자식에게 값이 적용
1. 조건ex) 클래스이름(.), id(#), modifier(:~)
8. odd: / even: : 본인이 홀수/짝수 자식이라면
1. 자식 본인에게 적용해야 함 주의
9. first: / last: : 본인이 첫번째/마지막 자식이라면
10. empty: : 자식요소가 자식요소나 텍스트가 없는 빈 껍데기일 때
11. group: : 부모의 상태에 따라 자식을 변경
1. 부모 요소에 group 클래스 추가
2. 자식 요소에 group-hover: , group-focus: 등을 modifier로 추가해 부모의 상태에 따라 활성화
1. group-focus-within: : 부모 or 그 부모의 자식 중 하나 상태에 따라
12. 두개 이상의 modifier를 중첩할 수도 있음(ex. invalid:focus:ring-red-500) ⇒ and 조건

9. animate
1. animate-spin : 빙글
2. animate-ping : 번지듯이 커짐
3. animate-pulse : 불투명도 조정(깜빡깜빡)
4. animate-bounce : 위아래로 떠다님

JIT(Just In Time) 모드

• (이전 Tailwind 방식 : 모든 가능한 유틸리티 클래스를 미리 생성하여 거대한 CSS 파일을 만듦)

• 지금은 컴파일러가 즉시 css로 컴파일. 빌드 시간과 파일 크기를 대폭 줄이고, 개발 중에도 즉각적인 피드백을 제공

• 때문에 동적 클래스 이름도 지원 : 클래스 목록을 미리 생성해 두는 방식이 아니기 때문
• ex) text-[22px]

• 상태 조합 가능

• tailwind.config.ts에서 사용자 지정 스타일 가능

  theme: {
    extend: {
      backgroundColor: {
        "cute-lemon" : "#ffffe2"
      }
    }
  },

<a className="flex bg-cute-lemon .. />

 

• tailwind.config.ts에 css로 컴파일할 파일 위치, 즉 tailwind를 쓰는 위치를 지정

export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],

Directives

1. @tailwind • Tailwind의 기본 스타일(base), 컴포넌트(components), 유틸리티(utilities)를 CSS에 삽입

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

• @tailwind base: Tailwind의 기본 스타일(예: Reset 스타일)을 추가
• @tailwind components: 재사용 가능한 컴포넌트 스타일을 추가(여러 스타일을 그룹화, ex. 파란버튼)
• @tailwind utilities: 유틸리티 클래스(예: bg-red-500, text-center)를 추가 (ex. 걍 클래스)

2. @apply : Tailwind 유틸리티 클래스를 사용자 정의 CSS 클래스에 적용
• 이거 안쓰면 css 속성 지정하듯이 해줘야 함

.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

여러 유틸리티 클래스를 하나의 사용자 정의 클래스에 결합하여 재사용성 높임

3. @layer : 사용자 정의 스타일을 특정 “레이어”(base, components, utilities)에 그룹화

@layer base {
	a {
		@apply text-blue-500;
	}
}
// 기본 스타일에 추가. 모든 link의 텍스트가 파란색이 됨

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  .filter-none {
    filter: none;
  }
}

• utilities에 추가하는 것은 tailwind.config.ts에 사용자 지정 스타일로 추가할 수 있기 때문에 굳이 여기서 안해도 됨
• Tailwind의 레이어 시스템(base, components, utilities)에 맞게 스타일을 정리, 충돌을 방지
• 해당 레이어에 포함된 스타일은 HTML에서 실제로 사용된 경우에만 최종 빌드에 포함

Plugins

• 외부 플러그인 추가해서 여러 만들어진 스타일들을 쓸 수 있다(특히 컴포넌트) ex. daisyUI

• 라이브러리 설치 후, config의 plugins 배열에 require(~)형태로 추가해주면 됨

• @tailwindcss/forms 라이브러리: form 태그를 reset

• tailwind 스타일 중에는 값이 변수(var)인 경우도 있다. 이 말은 즉슨, 변수를 지정하는 클래스도 존재