포트폴리오에서 쓰일 전역 폰트를 tailwind를 사용해서 설정하기로 했다. tailwind 공식문서를 참고했다.
global.css
tailwind를 사용한다고 해도 tailwind.config.js에서 설정을 한 것은 아니다. 물론 나중에 편의를 위해서 적용할수도 있겠지만 지금은 아님 ㅇㅇ.
global.css 를 수정했다.
그냥 custom CSS코드 추가하기
@tailwind base;
@tailwind components;
@tailwind utilities;처음 tailwind를 설치했을 때 global.css 에 다음과 같은 코드를 작성했다. 이제 사실 뜻도 잘 몰랐던 base, components, utilities를 사용해보자. 공식문서에는 다음과 같이 적혀있다.
When you need to add truly custom CSS rules to a Tailwind project, the easiest approach is to just add the custom CSS to your stylesheet
-만약 당신이 커스텀 CSS룰을 테일윈드 프로젝트에 추가해야할 때, 가장 쉬운 방법은 커스텀 CSS코드를 스타일 시트에 추가하는 것이다.-
예를 들어, 다음과 같은 방식으로 추가할 수 있다.
@tailwind base;
@tailwind components;
@tailwind utilities;
.my-custom-style {
background-color: red;
}하지만 이 방식은 커스텀 CSS코드가 많아지면 가독성이 너무 떨어지고 유지보수가 힘들다.
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn {
background: blue;
/* ... */
}
.bg-black {
background: black;
}이렇게 작성했을 경우
<button class="btn bg-black">...</button>
<button class="bg-black btn">...</button>두개의 버튼 모두 검은 배경을 가진다. 왜냐하면.bg-black코드가 .btn 뒤에 왔기 때문이다.
이러한 문제점을 해결하기 위해서 다음의 방식을 사용할 수 있다.
@layer 사용하기
For more power, you can also use the
@layerdirective to add styles to Tailwind’sbase,components, andutilitieslayers
-더 강력한 방법으로(문맥상 이럴듯..?), 테일윈드의base,components,utilities레이어들에 스타일을 추가하기 위해@layer지시자를 사용할 수 있습니다. -
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.my-custom-style {
/* ... */
}
}테일윈드는 custom CSS를 그냥 사용했을 때의 문제점을 해결하기 위해서, 스타일을 세개의 다른 layer로 구성한다. 컨셉은 ITCSS.에서 따왔다.
-
baselayer: 룰을 초기화하거나 HTML 자체에 적용될 디폴트 스타일을 위한 레이어 -
componentslayer: 유틸리티로 재정의 할 수 있는 클래스-기반 스타일을 위한 레이어 -
utilitieslayer: 다른 어떤 스타일들보다 먼저 적용되야할 작고, 하나의 목적을 가진 클래스를 위한 레이어
base 스타일 추가하기
만약 텍스트 컬러나 배경색, 폰트에 대해 디폴트를 설정하고 싶다면 body나 html태그에 클래스들을 추가하는게 가장 쉬운 방법이다.
<!doctype html>
<html lang="en" class="text-gray-900 bg-gray-100 font-serif">
<!-- ... -->
</html>특정 HTML요소에 대해 기본 스타일을 적용하고 싶다면, base 레이어에 그 스타일들을 추가하기 위해서 @layer지시자를 사용한다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
/* ... */
}여기서 내 tailwind.config.js에 정의된 theme를 사용하고 싶으면 theme()나 @apply를 사용한다.
theme()테일윈드 설정의 값들을 닷 노테이션으로 사용하고 싶으면
theme()를 사용한다..content-area { height: calc(100vh - theme(spacing.12)); }
@apply사용자 커스텀 CSS에 유틸리티 클래스를 일렬로 추가하고 싶으면
@apply를 사용한다..select2-dropdown { @apply rounded-b-lg shadow-md; } .select2-search { @apply border border-gray-300 rounded; } .select2-results__group { @apply text-lg font-bold text-gray-900; }
component 스타일 추가하기
사용자가 유틸리티 클래스로 재정의 하고 싶어하는 프로젝트에 추가하고 싶은 더 복잡한 클래스들을 위해서는 components레이어를 사용한다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
background-color: theme('colors.white');
border-radius: theme('borderRadius.lg');
padding: theme('spacing.6');
box-shadow: theme('boxShadow.xl');
}
/* ... */
}components 레이어에 컴포넌트를 정의함으로써, 유틸리티 클래스를 이용해 덮어쓰기가 가능하다.
<!-- Will look like a card, but with square corners -->
<div class="card rounded-none">
<!-- ... -->
</div>또한 써드파티 라이브러리를 위한 커스텀 스타일을 작성하기에 좋은 장소이기도 하다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply border border-gray-300 rounded;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
/* ... */
}여기서 내 tailwind.config.js에 정의된 theme를 사용하고 싶으면 theme()나 @apply를 사용한다.
utilities 스타일 추가하기
커스텀 유틸리티 클래스를 utilities 레이어에 추가한다. 이는 테일윈드가 사전에 가지고 있지 않던 CSS 를 사용하고자 할 때 편리하다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.content-auto {
content-visibility: auto;
}
}사용하지 않는 custom CSS는 삭제하기
레이어를 사용해 정의한 CSS코드는 실제로 사용되어야만 컴파일된다. 따라서 만약 어떤 커스텀 CSS가 반드시 컴파일 되기를 원한다면, @layer를 사용하지 말것.
@tailwind base;
@tailwind components;
/* This will always be included in your compiled CSS */
.card {
/* ... */
}
@tailwind utilities;위의 예시에서는 .card클래스를 @tailwind utilities전에 작성했다. 따라서 utilities에서 .card를 덮어쓸수 있다.
내 global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/all.min.css');
@layer base {
html {
font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
font-size: 16px;
font-weight: 700;
color: #1d1d1f;
}
}일단은 폰트만 적용시키기 위해서 위와 같이 작성했다. 사실 무조건 적용되어야 하니까 밖에다 써도 되었겠지만, 가독성을 높이고, 나중에 유지보수를 조금 쉽게 하기 위해 base에 작성했다. 당연하지만, 위의 내용은 언제든지 수정될 수 있다.
(참고: https://tailwindcss.com/docs/functions-and-directives#apply, https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles, https://tailwindcss.com/docs/theme#colors)
