문제 상황

프로젝트를 진행하다보면 임의의 색상을 추출해서 사용할 때가 있다.
그런데 Tailwind는 미리 정의된 색상 외에는 빠르게 사용할 수가 없다.
3.1.7버전에서는 arbitrary values에 변수를 넣어서 사용하는 방법 또한 없다.(최소 필자가 알기로는 그렇다)
그러면 어떻게 사용자가 원하는 그 색상을 Tailwind 문법으로 사용할 수 있을까?

해결 방법

사용자 정의 색상을 추가하면 된다.
Tailwind를 프로젝트에 설치할 때, tailwind.config.js라는 파일을 만들었을 것이다.

// tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  // calc를 사용할 수 있게 만들어준다.
  mode: "jit",
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

필자의 경우 여기까지를 기본 형태로 생각한다.
이제 사용자 정의 색상을 추가할 것이다.
추가하고 싶은 색상은 아래와 같다.

england: "#3C185C",
spain: "#0C519C",
germany: "#D10614",
italy: "#024394",

이들을 theme -> extend -> colors에 담아주면 된다.

// tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  // calc를 사용할 수 있게 만들어준다.
  mode: "jit",
  theme: {
    extend: {
      colors: {
        england: "#3C185C",
        spain: "#0C519C",
        germany: "#D10614",
        italy: "#024394",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

이제 Tailwind 문법에 본인이 설정한 key값으로 색상을 불러서 쓸 수 있다.

// text 색상이 england로 바뀐다.
<div className="text-england">
  <h1 className="font-bold">{leagueData?.name}</h1>
  <p>{leagueData?.country}</p>
</div>

주의할 점

colors 객체를 만들 때, theme 바로 아래에 넣게되면
원래 Tailwind에서 쓸 수 있던 색들이 전부 막힌다. 본인이 설정한 색깔만 사용할 수 있게되버린다.
따라서 theme -> extend -> colors 구조를 꼭 맞춰주자!

참고 자료

참고 자료 1
Tailwind 공식 문서