Theme

Theme란?

소프트웨어에서 사용되는 UI의 외관 및 동작에 관한 세부 정보를 포함하는 집합

웹 애플리케이션 내의 빈번하게 사용되는 스타일 값을 한 곳에서 정의하고 관리하여 일관성과 유지보수성을 높힘

즉, 디자인 시스템에 정의된 폰트, 색상, 간격 등의 디자인 요소들을 전역으로 선언하여 사용하는것을 말한다.

디자인 시스템(Design System)이란 애플리케이션 내에서 사용되는 디자인 요소를 일관성 있게 유지하고 관리하는 프레임워크

tailwind.config.js theme 속성으로 여러가지 전역 스타일을 정의할 수 있다.

Theme Property

• colors: 색상 값을 정의하는 객체

• fontFamily: 글꼴 패밀리 값을 정의하는 객체

• fontSize: 글꼴 크기 값을 정의하는 객체

• fontWeight: 글꼴 두께 값을 정의하는 객체

• lineHeight: 줄 간격 값을 정의하는 객체

• borderRadius: 모서리 둥글기 값을 정의하는 객체

• boxShadow: 그림자 값을 정의하는 객체

• extend: 유틸리티 클래스를 덮어쓰거이 확장하는 객체

• 이 외에도 대부분의 CSS 속성들 모두 커스텀이 가능하다.

module.exports = {
  theme: {
    extend: {},
    screens: {
      md: '768px',
      lg: '1040px',
    },
    fontFamily: {
      rubik: ['Rubik Pixels', 'cursive'],
    },
  },
};

screens

미디어 쿼리에 따른 반응형(브레이크 포인트) 클래스를 설정

기본적으로 min-width 형식으로 적용된다.

@media (min-width: **px) {}

default theme

• sm → 640px

• md → 768px

• lg → 1024px

• xl → 1280px

• 2xl → 1536px

Custom

module.export = {
  theme: {
    screens: {
      md: '768px',
      lg: '1098px',
    },
  }
}

Usage

<!-- [mobile] blue , green, yellow, red [desktop] -->
<button class="bg-blue-500 sm:bg-green-500 md:bg-yellow-500 lg:bg-red-500">button</button>

fontFamily

사용자 폰트 클래스를 설정

Custom

배열 순서대로 폰트를 찾아 렌더링하게 됨

module.exports = {
  theme: {
    fontFamily: {
      'myFont': ['Rubik Pixels', 'cursive']
    }
  }
}

Usage

<button class="font-myFont">button</button>

임의의 값 사용하기

이미 정의된 클래스를 사용하는 것이 아닌 사용자가 직접 값을 지정하는 방법

[] 를 사용하여 대괄호 안에 임의의 값을 적용하여 사용한다.

Usage

<button class="bg-[#0066ff] w-[30px]">button</button>