[css] tailwind fontsize, color 커스텀 하는 법

tailwind fontsize, color 커스텀 하는 법

 

tailwind 에서

fontsize, color 커스텀 하는 방법입니다.

 

• ailwind.config.js 파일에서 아래와 같이 color 추가하면 됩니다. 
• postcss.config.js가 아니라 tailwind.config.js 이니 주의 하세요.
• 여기서 주의할 점: extend: { .. }  extend 객체로 fontsize와 color를 한번 더 감싸줘야 기존 tailwind에서 제공하는 기본 style을 유지하면서 추가할 수 있다. 

 

tailwind.config.js 코드

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontSize: {
        xs: ['12px', {
          lineHeight: '18px',
        }],
        sm: ['14px', {
          lineHeight: '22px',
        }],
        base: ['16px', {
          lineHeight: '22px',
        }],
        lg: ['18px', {
          lineHeight: '24px',
        }],
        xl: ['28px', {
          lineHeight: '40px',
        }],
      },
      colors: {
        primary_120: '#8e5b25',
        primary_110: '#be7a31',
        primary_100: '#ed983d',
      },
    },
  },
  plugins: [],
}

 

component, tailwind 적용 코드

 <p className='font-extrabold text-primary_120 text-xl'>안녕하세요.</p>

 

tailwind font size, color custom 적용 후

 

관련 자료는 아래 공식 문서를 이용하세요.

https://tailwindcss.com/docs/text-color

Text Color - Tailwind CSS