tailwind custom color 설정, 테일윈드 커스텀 컬러 지정

테일윈드 커스텀 컬러 지정은 공식문서에 친절히 나와있지만.

나같은 입문자는 공식문서를 봐도 끝없이 헤맨다 .. 

사용자 지정 컬러 테마를 만들어 보자. 

 

tailwind.config.js

 
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors:{
        header_black: {
          black: "#30363A",
          white:"#fff",
        },
     },
      fontFamily: {
        sans: ['Roboto'],
        
      },
     
    },
  },
  plugins: [],
}

custom color설정할때 주의점은

꼭 theme: { extend: { colors 로 써야한다는 것이다.

extend 괄호 안에 들어가도록 유의하자.

그리고 color가 아니라 colors다

 

사용은 이렇게 한다.

 

 

 

className=' ' 안에 속성을 써주면 된다

background-color 속성은 bg로

font-color는 text로 .. 

 

header.tsx

import Link from 'next/link';

export const Header = () => {
  return(
    <div
    className=' flex justify-center bg-header_black-black text-header_black-white'
    >
      <div>logo</div>
      <Link href="/">PRODUCTS</Link>
      <Link href="/">NEWS</Link>
      <Link href="/">PUBLICATIONS</Link>
    </div>
  )

검은 바탕에 흰 글씨가 잘 나온다.