Tailwindcss에 원하는 color 추가하기

 

 

Tailwindcss 사용 2일차 응애인 나는 아직도 적응하는데 넘 오래걸림,,

 

팀 프로젝트 진행중에 피그마에서 같이 정한 색이

Tailwindcss의 기본색으로 대체할 수가 없어서

색을 추가할 수가 있는지

이것저것 검색해보고 있었음

 

근데 웬걸 방법 레전드로 쉽다!

 

tailwind.config.js파일 안에

 

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        customPurple: '#D9B8FF',
        customBlue: '#80CAFF',
        bgDev: '#FFFFF0'
      }
    }
  },

 

 

theme 객체 안에 extend 객체 안에 colors 객체 안에 원하는 색상 이름을 정해주고 옆에 색 코드를 적어주면 된다!!

처음에 theme 객체 안에 넣어줬더니 기본 설정 color가 싹 다 날아가서 어찌나 당황했는지..

아무튼 넣어주기만 하면 바로 적용이 가능함!!