[Tailwind]More about Tailwind

TailwindCSS는 html/xml 국면에서 style를 일괄적으로 트래킹할수 있게 하고, 보다 간편한 반응형 제작, 프리셋 제공 등 여러 이점이 있지만, 프로젝트의 복잡도가 증가하면서 프레임워크에 대한 여러 의문 또는 한계를 만날 수 있다. 본문에서는 필자가 프로젝트를 진행하며 공부한 몇 가지 Tailwind 상식과 주의점을 공유하고자 한다.

동적 className

• Tailwind className 일부를 치환하면 작동하지 않는다.

const len = 10;
<div className='w-screen h-screen relative'> //Container
    <div className={`w-10 h-${len}`}></div> //box
</div>
//not working

공식문서에 따르면, 동적 클래스명은 완전한 클래스 이름으로 설정해야 한다.

-> className 전체를 치환하는 것이 권장된다.

const height = 'h-10';
<div className='w-screen h-screen relative'> //Container
    <div className={`w-10 ${height}`}></div> //box
</div>

-> template literal를 이용해 생성한 동적 클래스명은 arbitrary value의 특정 경우를 제외하고는 작동한다.

• Preset value 테스트

const color = 'white';
const colorCN0 = `bg-white`;
const colorCN1 = 'bg-'+color; //string concatenation
const colorCN2 = `bg-${color}`; //template literal

<div className=" ... ">   
   <div className={`w-10 h-10 bg-${color} absolute top-10 `}></div>
   //working
   <div className={`w-10 h-10 bg-${color} absolute top-20 `}></div>
   //working
   <div className={`w-10 h-10 ${colorCN0} absolute top-30 `}></div>
   //working
   <div className={`w-10 h-10 ${colorCN1} absolute top-40 `}></div>
   //not working
   <div className={`w-10 h-10 ${colorCN2} absolute top-50 `}></div>
   //working
</div>

• Arbitrary value 테스트

const color = '#888888';
const colorCN0 = `bg-[#888888]`;
const colorCN1 = `bg-[${color}]`;
const colorCN2 = `bg-${`[${color}]`}`;

<div className=" ...">
   <div className={`w-10 h-10 bg-[${color}] absolute top-10 `}></div>
    //working
   <div className={`w-10 h-10 bg-${`[${color}]`} absolute top-20 `}></div>
    //working
   <div className={`w-10 h-10 ${colorCN0} absolute top-30 `}></div>
    //working
   <div className={`w-10 h-10 ${colorCN1} absolute top-40 `}></div>
    //not working
   <div className={`w-10 h-10 ${colorCN2} absolute top-50 `}></div>
    //working
</div>

결론

하나의 클래스명을 string concatenation으로 만들 수 없음을 주의하자.

---

className concatenation

• 서로 다른 성격의 클래스명은 따로 선언해 모듈화하면 용이하다.

const size = 'w-10 h-10 ';
const color = 'bg-white ';
const position = 'absolute top-10 left-10';

<div className={`${size+color+position}`}></div>

주의) 각 string마다 마지막에 꼭 white space를 남겨두어야 각각의 className을 인식한다.

---

CSS module + Tailwind

TailwindCSS가 간편한 것은 사실이지만, 애니메이션, 컴포넌트 간 상호작용 등에서는 기존 CSS보다 번거롭고 구현이 어려워지는 경우가 있다. 이런 경우 기존 사용하던 CSS module과 혼용이 가능하다.

import styles from './a.module.css';

<div className={`${styles.glow} w-10 h-10 absolute top-12 left-12 bg-white`}></div>

/* a.module.css */
.glow{
    animation: glow_kf 1s ease-in-out infinite;
}

@keyframes glow_kf{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

---

주석 처리

Tailwind는 기존 CSS와 달리 줄바꿈이 없어서 attribute별로 주석처리 하기가 어렵다.

그럴 땐 컴파일러는 쪼개진 className을 인식하지 못하므로 중간에 space 한개를 넣어주면 된다.

const ThumbNail = ({item}:{item: albumProps}) =>{
    const {thumbnail,len,url} = item;
    return <>

    <Image src={thumbnail[0]} alt='pic' className='object-fill rounded-md relative z-11' />
    {len >=2 && <Image src={thumbnail[1]} alt='anotherpic' 
    className="object-fill r ounded-md a bsolute left-0 top-0 z-10 rotate-6"/>}
    </> // rounded_md와 absolute를 주석한 상태
}

---

컴포넌트 이름

Tailwind는 클래스명에 컴포넌트의 명시적인 이름을 적지 않아서 어떤 역할인지 알기 어려울 때가 있다.

인식이 되지 않는 클래스명은 컴파일 과정에서 지워지기 때문에, 본인만의 규칙을 정해 클래스명 내 이름 또는 간단한 메모를 첨부하는 방법이 있다.

<div className="(outer container) w-10 ...">
   <div className="(inner container) w-full ...">
      <div className="(block) w-full ...">
          <p className="(content) ..."></p>
      </div>
  </div>
</div>

잘못된 정보는 제보바랍니다.

edited by 정정환