[TailwindCSS] 사용자 정의 스타일

- 내장된 유틸리티 클래스 외에도 사용자가 직접 커스텀 유틸리티 클래스를 만들어 사용할 수 있음

 

테마 사용자 정의

  - 색상, 크기 등의 항목을 재정의하거나 새로 생성할 수 있음

  - tailwind.config.js

  - https://tailwindcss.com/docs/theme

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

  - 홈페이지 내에서 자주 쓰이는 key color들을 정의해두면 나중에 변경할 때도 용이할 듯

 

 

---

임의의 값 사용

<div class="text-[22px]">...</div>

<div class="text-[#bada55]">...</div>

# CSS 변수 사용

<!-- var(...)를 생략하고 변수 이름만 작성하면 됨 -->
<div class="bg-[--my-color]">
  <!-- ... -->
</div>

# 공백이 필요한 경우 밑줄('_')을 사용하면 빌드 시 자동으로 공백으로 변환함

<div class="grid grid-cols-[1fr_500px_2fr]">
  <!-- ... -->
</div>

  - 공백이 유효하지 않은 상황이라면 변환하지 않고 그대로 유지함

<div class="bg-[url('/what_a_rush.png')]">
  <!-- ... -->
</div>

  - 밑줄을 사용해야 하지만 공백도 유효하여 모호한 경우 이스케이프 문자를 추가

<div class="before:content-['hello\_world']">
  <!-- ... -->
</div>