Tailwind CSS v3에서 v4로 업그레이드 되면서 커스텀 색상을 추가하는 방법이 변경되었습니다. tailwind.config.js로 색상을 추가하지 않는 방법이죠.
처음 Tailwind CSS를 사용해보는건데, 색상 추가하는 과정만으로도 삽질을 꽤나 오래했네요😂 저처럼 처음 tailwind css를 사용하시는 분들이면 과거 자료들을 보고 헤매실 수도 있을 것 같아서 제목에 tailwind.confing.js not working 추가했습니다😃
항상 버전 확인을 하고 블로그 글 대신에 꼭 공식문서를 먼저 챙겨보기...!
이 글에서는 변경된 사용 방식부터 v3에서 v4로 마이그레이션 하는 방법을 함께 정리했습니다.
먼저 변경된 사용 방식부터 살펴보겠습니다.
변경된 방식 (v4 부터)
v5는 또 어떻게 변경될지 모르겠지만, 일단 v4 버전 기준으로 설명드릴게요!
v4에서는 자바스크립트 구성 파일(ex. tailwind.config.js) 대신 CSS에서 커스텀하고 확장할 수 있도록 변경되었습니다.
더 자세한 내용은 공식 블로그에 정리된 이 글을 참고해주세요.
그래서, 색상을 추가하고 싶다면 global.css에 @theme로 색상을 추가해주면 됩니다.
@import "tailwindcss";
@theme {
--color-midnight: #121063;
--color-tahiti: #3ab7bf;
--color-bermuda: #78dcca;
}
이렇게 하면 bg-midnight, text-tahiti 등으로 사용할 수 있어요. 아래처럼요 :)
<aside className="bg-midnight w-3xs px-4 py-7 shadow-[4px_0_8px_-4px_rgba(0,0,0,0.1)]">
<div className="mb-10">
...
</div>
</aside>
저는 색상을 추가하는 내용만 간단히 설명했지만,
색상 덮어씌우기나 disable 상태로 만드는 방법에 대한 내용은 공식문서(링크)를 확인해주세요!
v3 이하 사용하는 방식
v4를 사용하고 있는 분들은 아래 방법으로 설정하지 않으셔도 되고, v3 이하 사용자분들은 아래 방법으로 색상을 추가하시면 됩니다.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
colors: {
brown: {
50: '#fdf8f6',
100: '#f2e8e5',
200: '#eaddd7',
300: '#e0cec7',
400: '#d2bab0',
500: '#bfa094',
600: '#a18072',
700: '#977669',
800: '#846358',
900: '#43302b',
},
}
},
},
}
v3 이하 사용자가 v4로 업그레이드 했을 때, 커스텀 색상 코드 변환 방법
v3에서 v4로 마이그레이션할 때, toolbox space(링크)에서 제공하는 변환기를 사용하면 tailwind.config.js에 추가로 설정한 색상 값을 @theme로 쉽게 변환할 수 있습니다.
아! 사용시 주의 사항이 있습니다. colors에 추가한 색상 이름에 꼭 작은 따옴표를 추가해줘야 @theme로 변환됩니다!
colors: {
brown: { /* ❌ brown에 작은 따옴표가 없으면 @theme로 변환이 안됩니다 */
400: '#0d0d0d'
}
}
colors: {
'brown': { /* ✅ brown에 작은 따옴표를 꼭 추가해줘야 @theme로 변환됩니다 */
400: '#0d0d0d'
}
}
끝으로
v4에서 tailwind.config.js로 색상을 추가한 경우에 값을 불러오는 방법을 찾지 못했습니다. 저는 tailwind.config.js에 theme.extand.colors로 추가한 색상을 계속 사용해보려고 이런 저런 방법을 다 써봤는데 색상이 적용되지 않더라구요.
특히 reddit에 @config를 사용해서 불러올 수 있다는 글을 봐서, global.css에 @config "../..tailwind.config.js"; 를 추가해서 아래와 같이 2가지 방법으로 불러오려고 했으나 페이지 전체에 css 적용이 되지 않더라구요.
나중에라도 방법을 찾게 되면 업데이트 하겠습니다!
// 시도한 방법 1
@layer theme {
:root {
--color-dark-bg: theme(colors.brown.900);
}
}
// 시도한 방법 2
@theme {
--color-dark-bg: theme(colors.brown.900);
}
참고 링크
잘못된 내용이나 궁금하신 점이 있다면 언제든 댓글 남겨주세요! 확인 후 답변 남기겠습니다 :)
읽어주셔서 감사합니다!☺️