다크 모드에서 스타일을 지정해보자.

요새 어지간한 웹사이트들은 이제 다크 모드를 지원한다. 내 블로그인 2rang25도 물론 다크 모드를 적용했다.

이처럼 다크 모드를 디자인하는 것이 일반화 되었는데 tailwindcss에서 이런 다크 모드에 반응하도록 디자인을 해보자.

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

class를 보다보면 dark : 로 시작 하는걸 볼 수 있다.

dark : bg-slate-800
dark : text-white

이거처럼 다크 모드에서 따로 적용하고 싶은 스타일이 있으면 dark 접두사를 사용해보자!

사용자 정의 스타일을 추가하기.

프레임워크를 사용할 때 가장 큰 과제는 프레임워크에서 처리하지 못하는 작업이 있을 때 어떻게 해야 할지 파악하는 것이다.

Tailwind는 처음부터 확장 가능하고 사용자 정의가 가능하도록 설계되었으므로 무엇을 만들든 프레임워크와 충돌되지 않는 느낌을 준다.

이 항목에서는 디자인 토큰을 사용자 정의하는 방법, 필요한 경우 제약을 벗어나는 방법, 사용자 정의 CSS를 추가하는 방법, 플러그인을 사용하여 프레임워크를 확장하는 방법 등의 주제를 다뤄보겠다.

사용자 테마 정의
색상 팔레트, 간격 크기, 타이포그래피 크기, 중단점 등과 같은 항목을 변경하려면 'tailwind.config.js'에서 theme 항목에 내용을 추가하면 된다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

요렇게 작성하면 된다. 물론 내용은 본인의 목적에 맞게 바꿔서 작성하자.

보다 자세한 내용은 공식 문서를 참고하도록 하자!

임의의 값 사용하기
일반적으로 제한된 일련의 디자인 토큰을 사용하여 잘 만들어진 디자인의 대부분을 구축할 수 있지만, 가끔은 이러한 제약에서 벗어나 픽셀 단위까지 완벽한 디자인을 만들어야 할 때가 있다. tailwind의 대괄호 표기법을 사용하여 임의의 값으로 class를 즉시 생성할 수 있다.
```
<div class="top-[117px]">
  
</div>
```
theme() 함수를 사용하면 'tailwind.config.js' 파일에서 참조하는 것도 가능하다.
```
<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
  
</div>
```
css 변수를 임의의 값으로 사용할 때는 변수를 var(...)로 감쌀 필요가 없다. 실제 변수 이름만 작성하면 된다.
```
<div class="bg-[--my-color]">
  
</div>
```
만약 tailwind에 기본적으로 포함되어있지 않는 속성을 사용해야 할 경우에는 아래처럼 작성해보자.
```
<div class="[mask-type:luminance]">
  
</div>
```
```
<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  
</div>
```
```
<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
  
</div>
```
이러한 속성값을 추가하는데 중간에 공백이 들어갈 경우에는 아래처럼 '_'를 대신 넣어주면 된다.
```
<div class="grid grid-cols-[1fr_500px_2fr]">
  
</div>
```
```
<div class="bg-[url('/what_a_rush.png')]">
  
</div>
```
만약 JSX 같은 걸 사용하게 될 경우에는 String.raw()를 사용하면 백슬래시가 JS 이스케이프 문자로 처리되는걸 방지 할 수 있다.
```
<div className={String.raw`before:content-['hello\_world']`}>
  
</div>
```
근데 만약 더 많은 기능을 원하면 '@layer' 지시문을 사용하여 tailwind의 'base', 'components', 'utilities' 레이어에 스타일을 추가할 수도 있다.
```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .my-custom-style {
    /* ... */
  }
}
```
tailwind가 스타일을 레이어로 그룹화 하는 이유???
CSS에서 스타일시트의 규칙 순서는 두 선택자가 동일한 특이성을 가질 때 어떤 선언이 우선되는지 결정한다.
```
.btn {
  background: blue;
  /* ... */
}

.bg-black {
  background: black;
}
```
여기서 두 버튼은 모두 CSS에서 .bg-black 다음에 나오므로 검은색이 된다.
```
<button class="btn bg-black">...</button>
<button class="bg-black btn">...</button>
```
이를 관리하기 위해 Tailwind는 생성하는 스타일을 세 가지 다른 레이어로 구성합니다. 이 개념은 ITCSS에서 대중화되었습니다 .
- base 레이어는 일반 HTML 요소에 적용되는 재설정 규칙이나 기본 스타일과 같은 기능을 설정하는 곳이다.
- components레이어는 유틸리티를 사용하여 재정의할 수 있는 클래스 기반 스타일을 위한 곳이다.
- utilities레이어는 작고 단일 목적의 클래스를 위한 것으로, 다른 스타일보다 항상 우선해야 한다.
이를 명확하게 하면 여러 스타일이 어떻게 상호 작용하는지 더 쉽게 이해할 수 있으며, @layer 지시어를 사용하면 원하는 대로 실제 코드를 구성하는 동시에 최종 선언 순서를 제어할 수 있다.
이제 기본 스타일만 추가해보자.
페이지의 일부 기본값(예: 텍스트 색상, 배경 색상 또는 글꼴 패밀리)만 설정하려는 경우 가장 쉬운 방법은 요소에 일부 클래스를 추가하는 것이다.
```
<!doctype html>
<html lang="en" class="text-gray-900 bg-gray-100 font-serif">
  
</html>
```
이렇게 하면 다른 모든 스타일과 함께 기본 스타일 결정 사항을 마크업에 보관할 수 있으므로 별도의 파일에 스타일 결정을 숨기지 않아도 된다.
특정 HTML 요소에 대한 기본 스타일을 추가하려면 @layer다음 지시문을 사용하여 해당 스타일을 Tailwind의 base레이어에 하면 된다.
```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  /* ... */
}
```
Theme에 정의된 값을 참조하려면 사용자 정의 기본 스타일을 추가할때 theme함수나 @apply를 사용해보자.
마지막으 우리 입맛대로 유틸리티 클래스를 추가해보자.
```
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}
```
매우 쉽게 추가가 가능하다.
오늘은 여기까지!
사실 여기까지만 알아도 충분하다고 생각한다. tailwindcss같은 프레임워크는 쓰면 쓸수록 편해지기때문에....
뭐 아무튼 좋은 꿀팁같은거 모아서 다시 오도록 하겠다.

TailwindCSS에 대해 또 알아보자

다크 모드에서 스타일을 지정해보자.

사용자 정의 스타일을 추가하기.

추천 글