# Theme

## Theme란?

> 소프트웨어에서 사용되는 UI의 외관 및 동작에 관한 세부 정보를 포함하는 집합
>
> 웹 애플리케이션 내의 빈번하게 사용되는 스타일 값을 한 곳에서 정의하고 관리하여 일관성과 유지보수성을 높힘
>
> 즉, 디자인 시스템에 정의된 폰트, 색상, 간격 등의 디자인 요소들을 전역으로 선언하여 사용하는것을 말한다.

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

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

### Theme Property

* `colors`: 색상 값을 정의하는 객체
* `fontFamily`: 글꼴 패밀리 값을 정의하는 객체
* `fontSize`: 글꼴 크기 값을 정의하는 객체
* `fontWeight`: 글꼴 두께 값을 정의하는 객체
* `lineHeight`: 줄 간격 값을 정의하는 객체
* `borderRadius`: 모서리 둥글기 값을 정의하는 객체
* `boxShadow`: 그림자 값을 정의하는 객체
* `extend`: 유틸리티 클래스를 덮어쓰거이 확장하는 객체
* 이 외에도 대부분의 CSS 속성들 모두 커스텀이 가능하다.

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

### screens

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

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

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

#### default theme

* sm →  640px
* md →  768px
* lg →  1024px
* xl →  1280px
* 2xl →  1536px

#### Custom

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

#### Usage

```markup
<!-- [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&#x20;

> 사용자 폰트 클래스를 설정

#### Custom

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

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

#### Usage

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

## 임의의 값 사용하기

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

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

### Usage

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

###