[ Nuxt, Tailwind ] custom color 적용 안 되는 이슈

[ Nuxt, Tailwind ] custom color 적용

이전 글의 방법이 되지 않을 경우에는,,, 공식 문서의 방법으로 회귀하는 방법이 있습니다. 

 

저한테 왜굴애요?

 

참고로 다른 프로젝트이기 때문에 환경에 따라 사용에 차이가 생긴 것 같다.

근데 사실 원인은 잘 모르겠다...

 

// ❌ 이렇게 쓰지 마세여

export default {
  // ...
  content: [
    './*/**/*.{js,vue,ts}',
    // other paths
  ],
}

우선 공식문서가 하지말라는 코드는 빼고 보자.

 

// ⭕ 주소를 보다 구체적으로 적어 주기

export default {
  content: [
    './pages/**/*.{js,vue,ts}',
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.{js,vue,ts}',
    './app.vue',
    // other paths
  ],
  ...
}

 

 

아 아무튼 color는요 공식 문서가 처음 시키는 대로 회귀합니다

바로바로 tailwind.config.mjs 파일에 직접 적어주는 것이죠

export default {
  // ...
  content: [
    './pages/**/*.{js,vue,ts}',
    './components/**/*.{js,vue,ts}',
    // other paths
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff7ff',
	      ...
        },
      },
    },
  },
};

직접 넣어주는 것으로 해결은 했지만, 왜,,, main.css에 정의해 놓은 색상을 못 읽어왔을까

이 부분은 좀 더 고민 후에 추가하도록 하겠습니다