목차
반응형 디자인
미디어 쿼리
반응형 유틸리티 베리언트(variants)를 사용해 반응형 컴포넌트를 구현할 수 있다. Tailwind CSS의 모든 유틸리티는 중단점(breakpoints)을 지원해서 조건에 따라 복잡한 인터페이스를 구현할 수 있다.
기본적으로 Tailwind CSS는 모바일 퍼스트 중단점을 사용하며, 중단점 접두사별 최소 너비와 미디어 쿼리는 아래와 같다.
| 중단점 접두사 | 최소 너비 | 미디어 쿼리 |
| sm | 640px | @media (width >= 40rem) { ... } |
| md | 768px | @media (width >= 48rem) { ... } |
| lg | 1024px | @media (width >= 64rem) { ... } |
| xl | 1280px | @media (width >= 80rem) { ... } |
| 2xl | 1536px | @media (width >= 96rem) { ... } |
<!-- 중단점마다 배경 색상 변경 -->
<body class="bg-amber-300 sm:bg-violet-300 md:bg-green-300 lg:bg-blue-300 xl:bg-orange-300">
</body>
중단점의 범위를 지정하려면 max-* 베리언트를 함께 사용한다.
<!-- 640px 이상, 1024px 이하 구간 배경 색상 변경 -->
<body class="bg-amber-300 sm:max-lg:bg-violet-300">
</body>
컨테이너 쿼리
컨테이너 요소에 @container 유틸리티 클래스를 지정하고, 내부 자식 요소에 @sm:, @md: 등의 접두사를 지정하고 원하는 유틸리트 클래스를 사용할 수 있다.
<!-- 부모의 컨테이너 크기에 반응하는 레이아웃 -->
<div class="@container">
<div class="flex flex-col @md:flex-row">
<!-- ... -->
</div>
</div>
여러 중첩 컨테이너를 사용하는 복잡한 설계를 사용할 때는 @container/{name}을 사용해서 컨테이너의 이름을 지정하고, @sm/{name}, @md/{name} 등과 같은 접두사를 사용하여 특정 컨테이너를 대상으로 스타일을 적용할 수 있다.
사용자 정의 스타일
테마 변수를 정의할 수도 있지만, 대괄호 표기법을 사용하여 임의의 값을 지정할 수도 있다.
<div class="top-[117px]">
<!-- ... -->
</div>
대괄호 표기법으로 값을 지정할 때 임의의 값에 공백이 포함되어야 하는 경우에는 공백 대신 언더바(_)를 사용하면 Tailwind가 빌드할 때 자동으로 공백으로 변환한다.
<div class="grid grid-cols-[1fr_500px_2fr]">
<!-- ... -->
</div>
커스텀 프로퍼티를 사용할 때 모호한 경우에는 접두사를 사용하여 명시한다.
<!-- font-size 유틸리티에 적용 -->
<div class="text-(length:--my-var)">...</div>
<!-- color 유틸리티에 적용 -->
<div class="text-(color:--my-var)">...</div>
사용자 정의 스타일을 컴포넌트로도 구성할 수 있다. components 레이어 안에 스타일을 정의한다. 레이어 밖에서 정의하면 레이어 규칙 때문에 이후 유틸리티로 재정의할 수 없다.
@layer components {
.card {
background-color: var(--color-white);
border-radius: var(--rounded-lg);
padding: var(--spacing-6);
box-shadow: var(--shadow-xl);
}
}
함수 및 디렉티브(Directives)
디렉티브는 CSS에서 사용할 수 있는 Tailwind 전용 사용자 지정 규칙으로, Tailwind CSS 프로젝트에 대한 특수 기능을 제공한다.
- @import: CSS 파일을 인라인으로 불러온다.
- @theme: 글꼴, 색상, 여백, 중단점과 같은 프로젝트의 사용자 정의 디자인 토큰을 정의할 수 있다.
- @source: TailwindCSS의 자동 콘텐츠 감지에서 선택되지 않는 소스 파일을 명시적으로 지정할 수 있다.
- @utility: 사용자 정의 유틸리티 스타일을 구성할 수 있다.
- @variant: 베리언트(변형)의 스타일을 구성할 수 있다.
- @custom-variant: 사용자 정의 베리언트를 추가할 수 있다.
- @apply: HTML 요소 class 속성에 부여한 수많은 유틸리티를 CSS 파일에서 통합할 수 있다. HTML 마크업에서 스타일 유틸리티 클래스 이름을 분리하여 관리할 수 있다.
- @reference: 프레임워크 환경에서 구성 요소 블록이나 CSS 모듈 내에서 @apply를 사용하려면 빌드할 때 코드가 중복되지 않도록 실제 스타일을 포함하지 않고 참조용으로 가져올 수 있다.
/* @apply 디렉티브 */
@layer components {
.like {
@apply border-4 border-red-500 p-4 my-4 bg-amber-400;
}
}<!-- @apply 디렉티브 -->
<div class="like">
<!-- ... -->
</div>
Git rebase
다른 브랜치의 변경사항을 현재 작업 중인 브랜치에 적용하거나, commit 히스토리를 정리하고 깔끔하게 유지하고자 할 때 유용한 명령어다. merge와 비슷하지만 베이스를 조정한다는 게 다르다.
git rebase를 실행하면, 현재 브랜치의 commit들이 다른 브랜치의 가장 최신 commit 위에 순차적으로 재배치된다.
이미 공유된(push) 커밋을 rebase하면서 기존 커밋의 히스토리를 변경하는 것은 위험할 수 있어서 주의해야 한다.
다른 브랜치에서 먼저 rebase를 해서 충돌을 해결한 후에 main으로 돌아와서 merge하는 것을 추천.
git rebase main
오늘 하루를 돌아보며
슬비쌤과의 수업 마지막 날이었다. Git으로 버전관리하는 법을 배우고, HTML과 CSS를 배우고, TailwindCSS 사용하는 것도 배우고... 짧은 시간에 정말 많은 것을 배웠다. 한 번에 이해할 수는 없지만, 계속 사용해 보면서 익숙해지면 "아, 그때 그게 이런 얘기였구나!" 할 것 같다.
오늘은 테일윈드로 UI 실습을 진행했다. 실습을 해보니까 확실히 css 파일에서 직접 클래스 불러서 하나씩 스타일링하는 것보다 마크업에서 보면서 직접 스타일링하니까 훨씬 편했다. CSS를 배우고, 어떻게 동작하는지 알아서 더 쉽게 느껴지는 것 같다. 처음부터 테일윈드를 배웠다면 더 어려웠을 것 같다.
이제 다음주부터 시작하는 UI 프로젝트를 위해 내일부터 주말까지 전체적으로 다시 살펴보면서 복습도 하고, 이것저것 실습해 보면서 구조 짜는 것, 스타일링하는 것, 테일윈드 사용하는 것 천천히 손에 익혀야겠다.
