Tailwind 디자인 시스템 구축 전략, 정보 정리

horiz.d·2023년 8월 11일

다크테마 color 관리 전략

https://stackoverflow.com/questions/72117668/tailwind-colors-based-on-dark-mode (좋아보임)

My chat ref: https://chat.openai.com/share/15aa9da5-e0f6-427d-9fd0-b409a90616e9

STRATEGY 1.

You can define your colors in your CSS file like this :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  :root {
    --color-primary: 247 147 34;
    --color-text: 33 33 33;
    --color-success: 0 200 81;
    --color-info: 51 181 229;
    --color-warn: 255 187 51;
    --color-error: 254 78 78;
  }

  :root[class~="dark"] {
    --color-primary: 247 147 34;
    --color-text: 33 33 33;
    --color-success: 0 200 81;
    --color-info: 51 181 229;
    --color-warn: 255 187 51;
    --color-error: 254 78 78;
  }
}

and then use this config in your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  theme: {
    colors: {
      primary: "rgb(var(--color-primary) / <alpha-value>)",
      text: "rgb(var(--color-text) / <alpha-value>)",
      success: "rgb(var(--color-success) / <alpha-value>)",
      info: "rgb(var(--color-info) / <alpha-value>)",
      warn: "rgb(var(--color-warn) / <alpha-value>)",
      error: "rgb(var(--color-error) / <alpha-value>)",
      transparent: "transparent",
      current: "currentColor",
    },
}

now if you set the dark class on your document root colors changed automatically

위의 전략을 따르면, 아래와 같이 사용할 수 있을 것으로 기대한다

<!-- HTML 태그에 dark 클래스를 추가하여 dark mode 활성화 -->
<html class="dark">
...
<div class="bg-primary text-text">
  This div will now use the dark mode colors for primary and text.
</div>
...
</html>

즉, 상기의 설정에서 추가한 palette에 따라, bg-${color}, text-${color}, border-${color} 등 다른 Tailwind 유틸리티와의 조합을 자동으로 적용할 수 있도록 해준다는 것.

그리고 dark는 자동으로 부모의 dark mode 설정에 따라 자동으로 toggle 될 것이다.

STRATEGY 2.(더 나을 수 있음)

아래의 전략을 사용하면, palette에 다크모드 전환을 쉽게 유지하며 계층적으로 색상을 지정-관리할 수 있을 것으로 기대함. - mui의 palette가 계층적으로 관리되며, mui 컴포넌트에 필요한 스타일을 넣어주는 것처럼 디자인 시스템을 설계할 수 있을 것으로 생각

Here is a tailwind plugin (tw-colors) that does exactly what you need.

   const { createThemes } = require('tw-colors');

   module.exports = {
      // ...your tailwind config
      plugins: [
         createThemes({
            'light': { 
               'red': {
                  '100': '#880808',
                  '200': '...',
               }
            },
            'dark': { 
               'red': {
                  '100': 'red',
                  '200': '...',
               }
            },
         })
      ],
   };

Apply the theme on a parent element

<div class={someCondition ? 'theme-light' : 'theme-dark'}>  
  ...
</div>

You can use your colors as usual.

<button class='bg-red-100'>...</div>

If theme-light is applied on a parent element, the background-color will be #880808, if theme-dark is applied it will be red

다크테마 color 관리 전략 - palette 관리 전략

이번 web3해커톤에서 mui를 커스텀해서 팀 디자인시스템을 구축해본 경험을 바탕으로, tailwind로 디자인시스템을 구축할 때 mui 디자인시스템에서 palette를 구성하기 위해 사용되는 몇가지 유용한 개념을 차용 및 구현하고싶다.

변형 색상 (light, main, dark):

MUI는 주 색상(main)을 기준으로 light와 dark 버전을 자동으로 생성하는 기능을 제공한다.
Tailwind에 이를 적용하려면 주요 색상을 기반으로 다양한 밝기의 변형을 수동으로 만들어 줘야 하는데, MUI의 시스템을 차용할 방법이 있다면 유용할것.

ContrastText:

MUI는 텍스트의 가독성을 높이기 위해 배경색과 대비를 이루는 색상을 자동으로 선택한다.
Tailwind CSS는 이러한 기능을 기본적으로 제공하지 않는 것으로 확인해서, JS를 이용해 직접 구현해봐야 할 것이다.

Tonal Offset:

이는 주 색상에서 파생된 light 및 dark 색상의 밝기를 조절하는 값이다. Tailwind에서는 이를 구현하기 위해 주 색상의 밝기를 수동으로 조절해야 한다.

@layer - base, components, or utilities

Any custom styles you add to the base, components, or utilities layers will only be included in your compiled CSS if those styles are actually used in your HTML.
https://tailwindcss.com/docs/adding-custom-styles