[ 살펴보기 ] Tailwind

Tailwind가 default로 제공하는 theme 뿐만 아니라 원하는 style을 추가해서 theme을 확장할 수 있다. 또는 프로젝트에 적용하려는 design system이 있다면 Tailwind에서 사용하는 default theme을 override할 수도 있다.

Project root 경로에 존재하는 tailwind.config.ts 파일을 통해 원하는 theme을 customizing할 수 있다. 우선 color theme을 customizing 하는 법을 살펴보자.

Colors

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    colors: {
      red: {
        DEFAULT: "#674636",
        100: "#624E88",
        200: "#CB80AB",
        300: "#D2E0FB",
        400: "#FF885B",
      },
      blue: {
        DEFAULT: "#674636",
        100: "#624E88",
        200: "#CB80AB",
        300: "#D2E0FB",
        400: "#FF885B",
      },
    }
  }
};
export default config;

만약 tailwind가 제공하는 default color theme이 아닌 custom color를 처음부터 새로 작성하여 적용하고 싶다면 위의 예제처럼 theme.colors property를 원하는 color로 채워준다.

위 처럼 custom color를 적용하면 실제로 사용할 때 위에서 설정한 color 값이 적용되는 것을 확인할 수 있다.

<h3 className="text-blue-100">Test Color</h3>

color에 특정 shade 숫자 값이 없이 적용하면 DEFAULT로 설정했던 color가 적용된다.

<div className="bg-blue">Test Bg Color</div>

위의 예제에서는 기존 color theme을 custom color theme으로 완전히 override한 것이므로 기존 tailwind color를 사용할 수 없음에 주의하자.

만약 기존 tailwind가 제공하는 default theme을 그대로 사용하되 원하는 color를 추가하고 싶으면 theme.colors property가 아닌 theme.extend property를 사용한다.

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    extend: {
      colors: {
        mycolor: {
          DEFAULT: "#674636",
          100: "#624E88",
          200: "#CB80AB",
          300: "#D2E0FB",
          400: "#FF885B",
        },
      },
    },
  }
};
export default config;

실제 사용은 기존 tailwind class utility를 사용하듯 사용할 수 있다.

<h3 className="text-mycolor">Test Color</h3>

<div className="bg-mycolor-100">Test Bg Color</div>

만약에 default로 제공되는 tailwind color중 일부만 내가 원하는 color로 변경하고 싶으면 다음과 같이 변경할 수 있다.

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    extend: {
      colors: {
        blue: {
          500: "#674636",
        },
      },
    },
  }
};
export default config;

위와 같이 extend를 통해 기존의 color를 변경하면 blue-500에 해당 하는 color만 위에 설정한 color로 변경된다.

Design system 적용으로 인해 처음부터 color theme을 구성해야 할 때 color palette의 일부는 custom color를 적용하되 일부는 기존 tailwind가 제공하는 default를 사용해도 무방할 때도 있을 것이다. 그럴 때는 다음과 같이 tailwind의 default color의 일부를 그대로 적용할 수 있다.

import type { Config } from "tailwindcss";
import colors from "tailwindcss/colors";

const config: Config = {
  ...
  theme: {
    colors: {
      blue: colors.blue,
      green: colors.green,
      mycolor: {
        DEFAULT: "#674636",
        100: "#624E88",
        200: "#CB80AB",
        300: "#D2E0FB",
        400: "#FF885B",
      },
    },
  },
};
export default config;

위에 예제에선 blue와 green color는 tailwind default color로 그대로 사용하되 mycolor라는 새로운 color를 선언하여 color theme을 구성하고 있다.

Screens

Responsive design을 위해 Tailwind에서 제공하는 default breakpoint는 다음과 같다.

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
};
export default config;

Tailwind default screen value를 기준으로 다음과 같이 responsive design이 적용되어 있다고 가정해보자

<h3 className="text-green-500 
               sm:text-blue-500 
               md:text-orange-500 
               lg:text-purple-500">
  Test Color
</h3>

tailwind는 default로 responsive design으로 mobile-first 방식을 취하므로 media query는 min-width로 적용된다. 즉 default로 text-green-500이 적용되고viewport가 sm 사이즈 이상일 때는 text-blue-500, md 사이즈 이상일 때는 text-orange-500 그리고 lg 이상일 때 text-purple-500이 적용된다.

Default breakpoint를 변경하는 방법은 color와 유사하다. 만약 default screen property를 쓰지 않고 custom breakpoint를 사용하고 싶다면 아래와 같이 적용한다.

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    screens: {
      'sm': '600px',
      // => @media (min-width: 600px) { ... }

      'md': '1024px',
      // => @media (min-width: 1024px) { ... }

      'lg': '1200px',
      // => @media (min-width: 1200px) { ... }
    },
  }
};
export default config;

만약 default screen 중 특정 breakpoint 수치만 변경하고 싶다면 extends property를 통해 변경한다.

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    extend: {
      screens: {
        'lg': '1200px',
        // => @media (min-width: 1200px) { ... }
      },
    },
  },
};
export default config;

위의 예제처럼 수정하면 나머지 screen 값을 그대로 유지하되 lg breakpoint 수치만 1200px으로 변경된다.

기존 default screen은 그대로 사용하되 custom breakpoint를 추가하고 싶다면 새로운 이름을 가진 screen을 extend property를 통해 추가해준다.

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    extend: {
      screens: {
        'wide': '1600px',
      },
    },
  },
};
export default config;

실제 적용은 기존 tailwind utility와 동일하다.

<h3 className="text-green-500 
               sm:text-blue-500 
               md:text-orange-500 
               wide:text-purple-500">
  Test Color
</h3>

color와 마찬가지로 screen 역시 custom screen을 구성할 때 일부만 변경하고 나머지는 tailwind default screen을 사용할 수 있다.

import type { Config } from "tailwindcss";
import defaultTheme from 'tailwindcss/defaultTheme'

const config: Config = {
  ...
  theme: {
    screens: {
      ...defaultTheme.screens,
      'sm': '475px',
      'md': '620px',
    },
  },
};
export default config;

만약 min ~ max와 같이 range를 가진 screen theme이 필요하다면 다음과 같이 추가할 수 있다.

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    extend: {
      screens: {
        tablet: { min: "640px", max: "1024px" },
      },
    },
  },
};
export default config;

위와 같이 설정하면 tablet screen modifer가 적용된 style은 min:640px ~ max:1024px에서만 적용된다. 아래는 custome으로 추가한 table screen 범위에서만 color를 적용하는 예제다.

<h3 className="tablet:text-purple-500">Test Color</h3>

Spacing

Tailwind에서 default로 적용되는 spacing 기본 단위는 4px이다. 즉 mt1은 margin-top의 값을 4px로 주겠다는 말이며 mt2는 margin-top의 값을 8px( 4x2 )주겠다는 뜻이다. 물론 default로 제공하는 spacing 수치는 정해져 있으므로 default로 제공되는 수치는 다음 documentation을 참고하자. ( Default spacing scale )

만약 적용하려고 하는 design system의 spacing 기준이 tailwind default 값과 다르다면 다음과 같이 spacing 값을 override할 수 있다.

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
};
export default config;

위 처럼 설정하면 spacing-1이 8px이 되고 spacing-2는 12px이 된다. spacing의 수치를 반드시 배수로 할 필요는 없고 원하는 수치를 적용할 수 있다.

물론 spacing도 tailwind가 제공하는 default를 그대로 쓰면서 extend를 통해 필요한 unit만 추가할 수 있다.

import type { Config } from "tailwindcss";

const config: Config = {
  ...
  theme: {
    extend: {
      spacing: {
        '100': '400px',
        '101': '404px',
      }
    }
  }
};
export default config;