TailwindCss: 재사용하는 색깔들 config 파일에 저장하기 (사용자 정의 색상)

테일윈드css는 

이런식으로 color palette를 제공해준다.

하지만 내가 따로 지정한 색상을 쓰고 싶다면,

tailwind를 설치하면서 생성되는 tailwind.config.js 파일에 색상들을 적어주면 된다.

 

  theme: {
    extend: {
      colors: {
        // 배경색깔
        'z-primary': '#AA8AD4',
        'z-secondary': '#6750A4',
        
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

이런식으로 colors: {} 안에 적어주면 

    <h1 class="text-3xl font-bold underline bg-z-primary">
      이거는 우리 프라이머리색깔임
    </h1>

이렇게 background에 적용되어 나타나는 것을 확인할 수 있다.

 

매번 색상코드 입력하지 말고 이렇게 나만의 키워드로 저장해서 사용해보자