[Tailwind CSS] 커스텀 색상 추가할 때 주의할 점

tailwind에서는 tailwind.config.js를 통해 원하는 색상, 폰트, 변수 등을 추가할 수 있다.

 

그런데 

1. 기존에 tailwind에서 제공하는 색상을 사용하면서, 추가로 내가 지정한 색상을 변수로 추가하는 경우와

2. 내가 원하는 색상만 추가하여 사용하는 경우가 다르다.

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
	  //여기에 추가하면 기존 색상은 사용하지 않고, 여기에 추가한 colors만 사용할 수 있다.
    },
    extend: {
      colors: {
		//여기에 추가하면 기존 + 추가로(extend) 사용할 수 있다.
      }
    },
  },
}

이름을 잘 보면 기능을 유추할 수 있다.

- theme에 추가 : 새로운 color theme을 추가하는 경우 -> 여기에 정의된 색상만 사용할 수 있음

- extend에 추가 : 추가로 확장에서 사용 -> 기존에 정의된 색상도 사용할 수 있음

 

공식문서를 제대로 안읽고 theme에 추가했다가 기존 색상들을 사용할 수 없어서 한참 찾아 해맸다.(공식문서를 꼼꼼히 보자!)

 

공식문서에서는 이 페이지를 참고하면 된다!

Customizing Colors - Tailwind CSS