TailWind css 에서 사용자 정의색상 만들기.

TailWind 에서 tailwind.config.js 파일을 연뒤에,

exports 안에 theme 안에 colors 객체를 만든뒤 아래와 같이 리터럴로 작성한다.

/* tailwind.config.js */

module.exports = {

    theme: {

        colors: {

            'myOwnColor' : 'black',
            'myAnotherColor' : 'white'

        },

    }

}

그러면 html 에서

<div className='bg-myOwnColor text-myAnotherColor'> Hello </div>

와 같이 사용할수있다.

이런 점이 TailWind 에서 너무 편한것이다.

색만 정의해놓으면 css 파일열고 backgroundColor 니 color border-color 이딴거 신경쓸 필요없이

바로 조합해서 사용할수있게된다. 심지어 inline style 도 아니며 jit 컴파일된다.

 

수정) theme 다음 colors 속성으로 바로 생성하면 TailWind 가 제공하는 색들은 사용할수가없게 되어서,

theme -> extend -> colors 순으로 작성해야 기존의 색들을 유지하면서 나의 색을 추가할수있게된다.

 

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'myNewColor': '#243c5a',
      }
    }
  }
}