[nextjs+ts]( 번외) TailwindCSS 지원 Class를 제외한 값 커스텀하기

[nextjs+ts]( 번외) TailwindCSS 지원 Class를 제외한 값 커스텀하기

 

TailwindCSS는 정말 다양한 custom한 정보를 제공해주지만, 프로젝트를 진행하다보면 그 외에 값을 적용해야할 때가 있다. 감사하게도 Tailwind는 [] 기능을 통하여 손쉽게 해당 커스텀 기능을 제공해준다.

 

#기존 클래스 - 다음과 같이 클래스를 지정하여 이용한다.

<h1 className="text-xl text-red-100" >Test</h1>

#커스텀으로 적용하기

<h1 className="text-[500px] text-[#00ff23]" >Test</h1>

 

다음과 같이 []를 통하여 커스텀 적용이 가능하다.

 

#nextjs #ts #TailwindCSS  #css #js #react