TailwindCSS 설정

커스텀 색상 추가하기

색상 추가하기

//tailwind.config.ts
const config: Config = {
  theme: {
    extend: {
      colors: {
        black: '#171717',
        gray70: '#333236',
        gray60: '#4B4B4B',
        gray50: '#787486',
        gray40: '#9fa6b2',
        gray30: '#d9d9d9',
        gray20: 'eeeeee',
        gray10: '#fafafa',
        white: '#ffffff',
        violet: '#5534da',
        violet8: '#f1effd',
        red: '#d6173a',
        green: '#7ac555',
        purple: '#760dde',
        orange: '#ffa500',
        blue: '#76a5ea',
        pink: '#e876ea',
      },
    },
  },
}

참고 링크

주의사항

• extends 안에 넣기. 그렇지 않으면 모든 기본 색상을 커스텀 색상이 덮어 써 기본 색상 사용이 불가하다.
• 변수를 사용해서 속성값을 넣을때는 속성명-속성값 함께 묶어서 사용하기.

반응형 구현하기

breakpoints 설정하기

//tailwind.config.ts
const config: Config = {
  theme: {
    screens: {
      mobile: { min: '375px', max: '743px' },
      tablet: { min: '744px', max: '1023px' },
      desktop: '1024px',
    },
  },
}

참고링크

주의사항

• 'tablet': '744px'이런 식으로 적으면 min-width가 설정된다. 이렇게 max-width를 설정하지 않을 경우, 작은 화면 한정 설정을 하려면 큰 화면에서 해당 설정을 해제해주는 과정이 필요하다.

//min만 설정할 경우
<div className="flex tablet:flex-col"/> (X)
<div className="flex flex-row tablet:flex-col"/> (O)

//min, max 모두 설정할 경우
<div className="flex tablet:flex-col"/> (O)

새로운 단위 설정하기 - 'pxr'

겪은문제

• 사이즈를 설정하는 것에 너무 많은 시간이 들어갔다. 이 문제를 해결하기 위해 px값을 입력하면 rem으로 자동 변환해주는 pxr 단위를 도입했다.
  • tailwind CSS의 기본적인 클래스명을 사용하기 위해 계속 공식문서를 확인하며 작성해야 했다. ex. text-base = text-[1rem]
  • 기본 사이즈 외 특수한 사이즈는 rem 값을 계산하여 입력해줘야했다.

새로운 단위 설정

참고링크

주의사항

• 기존 단위들(ex. text-base)의 사용이 불가하다.