Tailwindcss / Customizing-colors

Tailwindcss customizing-colors 기능에 대한 정리

• Tailwindcss customizing-colors 기능 이란?
  
  
• 사용한 이유
  
  
• 사용 방법
  
  
• 좋은점

 

 

 

 

 

Tailwindcss customizing-colors 기능 이란?

 

tailwind에서 색상이름을 원하는 대로 지정해서 사용 할 수 있게 해 주는 기능이다.

 

사용한 이유

 

portfolio 프로젝트를 하며 atomic 패턴을 적용하여 폴더구조를 짜고 button, input ... 과 같은 atoms의 경우 여러 프로젝트에서 가져다 쓸수 있도록 만들어 두었다.
그 경우 다른 Style부분에서는 문제가 될 것이 없었지만 색상과 같은 경우에는 프로젝트마다 다 다르게 될 것인데 각 컴포넌트에서 색상을 다 찾아내서 일일이 바꾼다는것이 너무 불편하게 느껴졌고 한꺼번에 바꿔서 가져다 쓸 수 있게 만들기 위해 사용하게 되었다.

사용 방법

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: [],
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
        secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
        tertiay: 'rgb(var(--color-tertiay) / <alpha-value>)',
      },
    },
  },
  plugins: [],
};

좋은점

 

다른프로젝트에서 만들어둔 atom 컴포넌트들을 가져다 쓸 때에도 tailwind.config.cjs폴더에서 색상 코드만 변경 해 주면 될 뿐만 아니라 프로젝트를 만들어가는 도중에 전체 스타일 색상을 바꾸고자 할때에도 하나하나 찾아들어가서 바꾸지 않고 색상코드를 바꿔주는 방법으로 한꺼번에 관리가 되어서 좋았다.

---

참조: https://tailwindcss.com/docs/customizing-colors#naming-your-colors

Customizing Colors - Tailwind CSS