테일윈드 CSS는


미리 여러 유티리티 HTML 클래스를 만들어놓고


이 유틸리티 클래스들을 조합해서 디자인을 하는 방식으로 작동함


예를들어 


<span class="text-xl text-red-400"> 


이렇게 클래스를 주면 큰 크기의 빨간색 글자가 됨


여기서 text-xl, text-red-400 이 클래스들이 테일윈드 CSS에서 제공해주는 유틸리티 클래스들임






이게 언제 좋냐면 다음과 같은 시나리오에서 좋음





아마추어가 프론트 디자인을 할때


일단 대충 만들어놓고 


코드 조금씩 바꿔가면서


맘에 들때까지 디자인을 조금씩 수정해나가는 식으로 만들어가는 사람들이 많을 것임


아마추어는 한번에 멋진 디자인을 만들기 힘든 경우가 많으니까..






근데 이런 디자인 프로세스에서


내 마음속에 생긴 디자인 욕구를


CSS로 번역하기가 쉽지가 않음





예를들어 어떤 컴포넌트의 글자가 너무 크다고 느껴질때


내 마음속의 디자인 욕구는 이거임


"이 컴포넌트의 글자 크기가 작아졌으면 좋겠다"


근데 이걸 CSS로 번역하는 과정에서


나는 어버버하게됨.. class를 생성해야하나? style을 수정해야하나? 글자 크기 단위는 픽셀로 해야하나? 글자 크기는 정확히 몇으로 해야하지?


결정해야할것과 거쳐가야할 것들이 아마추어 입장에서 상당히 많음. 전문가라면 바로 올바른 결정을 하겠지만 아마추어에게는 어려움..





여기서 테일윈드 CSS를 쓰면


마음속의 디자인 욕구를


아마추어도 유창하게 코드로 번역할수있게됨


위 예시에서는 그냥 무지성으로 class에 text-sm을 주면 글자 크기가 적절히 작아지게됨


그래도 좀 큰거같으면 이번엔 text-xs를 주면 됨






테일윈드CSS를 사용하면


프론트엔드 아마추어라 할지라도


마치 홈그라운드에서 모국어를 쓰는것처럼


유창하게 디자인과 대화해가면서


즐겁게 문제를 해결해나갈수있는것임..