TailwindCSS dynamic styling

[pparkssang93]

문제 상황 👿

• main 태그에 click event가 발생하면, x: e.clientX, y: e.clientY obj state를 설정.
• state를 사용하여 레이아웃 스타일링 적용할 생각이었다.

하지만 px값은 제대로 바뀌는데, 마우스 포인터에 위치한 곳에 element가 생성되지 않았다.

before:

<div className={`${state ? `block absolute bottom-[${state.y}px] left-[${state.x}px]` : "hidden"}`}>

TailwindCSS

The way Tailwind scans your source code for classes is intentionally very simple. 실제로 코드를 파싱하거나 실행하지 않고, 정규 표현식을 사용하여 클래스 이름이 될 수 있는 모든 문자열을 추출합니다.

We don’t just limit our search to class="~" attributes because you could be using classes anywhere, like in some JavaScript for toggling a menu:

<script>
  menuButton.addEventListener('click', function () {
    let classList = document.getElementById('nav').classList
    classList.toggle('hidden')
    classList.toggle('block')
  })
</script>

이 매우 간단한 접근 방식을 사용함으로써, Tailwind는 JSX와 같은 어떤 프로그래밍 언어와도 매우 신뢰성 있게 작동합니다.

const sizes = {
  md: 'px-4 py-2 rounded-md text-base',
  lg: 'px-5 py-3 rounded-lg text-lg',
}

const colors = {
  indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
  cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}

export default function Button({ color, size, children }) {
  let colorClasses = colors[color]
  let sizeClasses = sizes[size]

  return (
    <button type="button" className={`font-bold ${sizeClasses} ${colorClasses}`}>
      {children}
    </button>
  )
}

Dynamic class names

The most important implication of how Tailwind extracts class names is 소스 파일에서 완전하고 unbroken strings로 존재하는 클래스만 찾는다는 것입니다.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

❌ Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.

Instead, make sure any class names you’re using exist in full:

🔵 Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

React나 Vue와 같은 컴포넌트 라이브러리를 사용하는 경우, 이는 props를 사용하여 동적으로 클래스를 구성해서는 안 된다는 의미입니다.

❌ Don’t use props to build class names dynamically

function Button({ color, children }) {
  return (
    <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>
      {children}
    </button>
  )
}

Instead, map props to complete class names that are statically detectable at build-time:

🔵 Always map props to static class names

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}

하지만, 원하는 위치에 요소를 위치시키고 싶으면, 값을 동적으로 관리해야한다.

[pparkssang93]

해결 ⭐️

style 속성을 사용하여 인라인 스타일을 적용.