TailwindCSS를 이용한 여러 색상 theme 설정 방법

TailwindCSS 에서 CSS 변수 사용

TailwindCSS 공식 문서는 dark/light theme을 설정하는 방법은 적혀있지만 여러 가지 색상 테마를 적용하는 방법은 나와있지 않다.

하지만 방법은 어렵지 않다.

TailwindCSS는 tailwind.config.js 파일에서 CSS 변수를 아래와 같이 사용할 수 있다.

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--primary-color))',
      },
    },
  },
};

여러 색상 테마 설정

CSS 변수를 사용하는 법을 알았기 때문에 이제 여러 색상 테마를 설정하는 방법은 쉽다.

아래와 같이 테마를 적용할 클래스와 CSS 변수들을 선언한 뒤 tailwind.config.js 파일에 적용해주면 끝.

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

.theme-purple {
  --color-primary-50: 250 245 255;
  --color-primary-100: 243 232 255;
  --color-primary-200: 233 213 255;
  --color-primary-300: 216 180 254;
  --color-primary-400: 192 132 252;
  --color-primary-500: 168 85 247;
  --color-primary-600: 147 51 234;
  --color-primary-700: 126 34 206;
  --color-primary-800: 107 33 168;
  --color-primary-900: 88 28 135;
  --color-primary-950: 59 7 100;
}

.theme-indigo {
  --color-primary-50: 238 242 255;
  --color-primary-100: 224 231 255;
  --color-primary-200: 199 210 254;
  --color-primary-300: 165 180 252;
  --color-primary-400: 129 140 248;
  --color-primary-500: 99 102 241;
  --color-primary-600: 79 70 229;
  --color-primary-700: 67 56 202;
  --color-primary-800: 55 48 163;
  --color-primary-900: 49 46 129;
  --color-primary-950: 30 27 75;
}

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {
      colors: {
        primary: {
          '50': 'rgb(var(--color-primary-50))',
          '100': 'rgb(var(--color-primary-100))',
          '200': 'rgb(var(--color-primary-200))',
          '300': 'rgb(var(--color-primary-300))',
          '400': 'rgb(var(--color-primary-400))',
          '500': 'rgb(var(--color-primary-500))',
          '600': 'rgb(var(--color-primary-600))',
          '700': 'rgb(var(--color-primary-700))',
          '800': 'rgb(var(--color-primary-800))',
          '900': 'rgb(var(--color-primary-900))',
          '950': 'rgb(var(--color-primary-950))',
        }
      },
    },
  },
};

<div class="bg-primary-500 text-primary-50">
  색상 테마 변경
</div>

이렇게 하면 <body> 태그 등에 .theme-purple, .theme-indigo 와 같은 클래스를 적용할 때 문서 내의 색상 테마가 변경된다.

CSS 변수 사용 시 주의 사항

TailwindCSS 공식 문서 tailwind.config.fs 에서 사용할 CSS 변수에
Color space function이나 Opacity modifier를 사용하지 말라고 한다.

그래서 위와 같은 r g b 순서로 나열된 숫자만 변수로 선언해준다.

CSS 변수는 rgb 뿐만 아니라 hsl 형식으로 작성될 수도 있다.

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

:root {
  --color-primary: 333deg 100% 73%;
}

의문점

한 가지 의문점은, TailwindCSS 공식 문서는 CSS 파일에서 @layer base 내에 CSS 변수를 선언하라고 돼있다.

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

@layer base {
  :root {
    --color-primary: 333deg 100% 73%;
  }
}

그런데 위와 같은 방법으로 할 경우 :root 에 대해서는 테마가 적용되지만, 클래스 별 CSS 변수를 선언해도 클래스 변경에 따른 테마는 적용되지 않았다.

왜 그런지는 의문 .. 🤔

여튼 TailwindCSS 를 이용한 색상 테마 적용 끝!