[TIL] 내배캠4기-NextJs-95일차

Tailwind CSS

JIT 컴파일러

Tailwind가 업데이트되면서 새로운 JIT 컴파일러가 나왔다.
대표적인 기능 개선으로

• Generate arbitrary styles without writing custom CSS.
  테일윈드 프레임워크에 없는 값을 넣고 싶다면??
  📌 대괄호 안에 써주기

<span className="font-medium text-[800px]">$460</span>

• Every variant is enabled out of the box
  * css 속성 stack 가능
  sm:hover:active:disabled:opacity-75

테일윈드가 직관적인 이유가
font-medium text-[800px] 라고 써주기만 했는데 자동으로 클래스명을 컴파일해줘서 웹 개발자도구에서는 이렇게 보인다.

.text-\[800px\] {
    font-size: 800px;
}

bg-[url('/vercel.svg')]

.bg-\[url\(\'\/vercel\.svg\'\)\] {
    background-image: url(/vercel.svg);
}