Best practices for adding your own custom styles to Tailwind.

• framework를 사용할때 마주하게 되는 가장 큰 문제중 하나는 만약 프레임워크가 내가 필요한 것을 제공하지 않을때 어떻게 해결해야할지를 고민하는 것이다. (공감이 된다)
• Tailwind는 밑바닥부터(from ground up) 확장성있고 커스텀가능하도록 설계되었기 때문에, 개발자가 무엇을 만드려고 하든 프레임워크와 싸우고 있다는 느낌을 주지 않을 것이라고 한다.
• 이 가이드는 design token을 커스텀하는 법, 필요한 경우 제약에서 벗어나는(break out of) 법, custom CSS를 추가하는 법, 그리고 plugin을 통해 프레임워크를 확장하는 방법을 다룬다.

Customizing your theme

• color palette, spacing scale, typography scale, breakpoints 등을 변경하고 싶다면, tailwind.config.js 파일의 theme 섹션에 customization을 추가하면 된다. 아래처럼 말이다.

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    theme: {
      screens: {
        sm: '480px',
        md: '768px',
        lg: '976px',
        xl: '1440px',
      },
      colors: {
        'blue': '#1fb6ff',
        'pink': '#ff49db',
        'orange': '#ff7849',
        'green': '#13ce66',
        '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',
        }
      }
    }
  }
  

  • 예를들어 sm breakpoint의 default size는 640px 부터인데, 480px로 덮어쓰고 있는 모습이다.

• Learn more about customizing your theme in the Theme configuration documentation.

Using arbitrary values

• 대부분의 스타일링 작업은 테일윈드가 제공하는 constrained set of design tokens로 쳐낼 수 있겠지만, 가끔씩 pixel-perfect한 작업을 위해 그런 제약constraint들을 벗어날 필요가 있을 수 있다.

• 예를들어 background image를 딱 정확한 위치에 위치시키기 위해서 ‘top: 117px’ 같은게 꼭 필요한 상황에서는, Tailwind의 square bracket notation([])을 사용하여 그때그때(on the fly) arbitrary value를 가진 클래스를 생성할 수 있다:

  <div class="top-[117px]">
    <!-- ... -->
  </div>
  

  • 이런 방식은 inline styles와 비슷하지만, Tailwind 에서는 여기에 더해 ‘hover’나 ‘lg’같은 modifier와 함께 조합하여 사용할 수 있다는 이점이 있다.

    <div class="top-[117px] lg:top-[344px]">
      <!-- ... -->
    </div>
    

• 프레임워크가 제공하는 모든 기능들(background colors, font sizes, pseudo-element content 등 포함)에 이런 arbitrary value를 적용할 수 있다.

  <div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
    <!-- ... -->
  </div>
  

• 심지어는 theme function을 사용하여 tailwind.config.js 파일 안에 있는 design token을 참조할 수도 있다.

  <div class="grid grid-cols-[fit-content(theme(spacing.32))]">
    <!-- ... -->
  </div>
  

  참고: https://tailwindcss.com/docs/functions-and-directives#theme (노트정리: Functions & Directives)

• 만약 CSS variable을 arbitrary value로 사용하는 경우, var(…)로 감쌀 필요 없이 그대로 사용하면 된다고 한다:

  <div class="bg-[--my-color]">
    <!-- ... -->
  </div>
  

Arbitrary properties

• If you ever need to use a CSS property that Tailwind doesn’t include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS:

  <div class="[mask-type:luminance]"><!-- ... -->
  </div>
  

  • 그러니까 mask-type은 실제로 CSS에 있는 프로퍼티인데, Tailwind에서 따로 utility class로 제공하지는 않는다는 것이다. 이런 프로퍼티를 사용해야 할때는 위처럼 []로 감싸서 사용하면 된다는 것.

• This is really like inline styles, but again with the benefit that you can use modifiers:

  <div class="[mask-type:luminance] hover:[mask-type:alpha]"><!-- ... -->
  </div>
  

• This can be useful for things like CSS variables as well, especially when they need to change under different conditions:

  <div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]"><!-- ... -->
  </div>