공식문서 공부(v3)

소개문구:

Rapidly build modern websites without ever leaving your HTML.

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Core Concepts

Utility-First Fundamentals

Hover, Focus, and Other States (Tailwind modifier)

Responsive Design

Dark Mode

Reusing Styles

Adding Custom Styles

Functions & Directives

Customization

Configuration

Theme

Plugins

Dynamic class names

• Don’t construct class names dynamically (참고: https://tailwindcss.com/docs/content-configuration#dynamic-class-names)

  • 예를들어 자바스크립트 템플릿 리터럴을 활용하여 class name에 변수를 통해 수치를 삽입한다던가 이러면 안된다는 것이다. styled-component는 이런게 가능하지만, tailwind를 사용할 때는 이렇게 하면 안된다.

  • Tailwind는 source files에서 complete unbroken strings만 추출해서 사용하기 때문이라고 한다.

  • 아래처럼 사용하는 것은 가능하고, 필요시 권장되는 듯 하다.

    function Button({ color, children }) {
      const colorVariants = {
        blue: 'bg-blue-600 hover:bg-blue-500 text-white',
        red: 'bg-red-500 hover:bg-red-400 text-white',
        yellow: 'bg-yellow-300 hover:bg-yellow-400 text-black',
      }
    
      return (
        <button className={`${colorVariants[color]} ...`}>
          {children}
        </button>
      )
    }
    

  • 실제로 와글 프로젝트 당시 이 부분을 모르고 코드 작성했다가 문제를 겪었었다. 같은 문제 질문 참고: https://github.com/tailwindlabs/tailwindcss/discussions/10114

Sizing