$$config title: TailWind CSS 알아보기 keywords: - IT - ... $$ # TailWind CSS 알아보기 현재 프론트엔드에는 정말 많은 CSS 프레임워크가 있죠. 그런데 Tailwind CSS를 썼을 때는 그런 부분에 대한 아쉬움이 전혀 없었습니다. 정말 편했죠. 다만 한글 자료가 살짝 부족하다는 느낌이 들었고, 그래서 Tailwind CSS의 기초적인 사용에 대해서 정리해보고자 합니다. # 소개 기존의 CSS 프레임워크들은 대부분 미리 정해진 디자인의 component들이 있고, 그 컴포넌트들을 가져다 사용하는 방식이었습니다. 정해진 디자인을 구성할 때는 빠르고 효율적입니다. 하지만 개발자가 원하는 형태의 디자인을 적용할 때는 많은 애로사항이 꽃피게 됩니다. Tailwind는 컴포넌트 위주의 디자인 대신 HTML 문서에 저수준의 유틸리티 클래스를 정의하는 것으로 디자인을 구성할 수 있습니다. 물론 부트스트랩같이 기존 디자인을 빠르게 가져와서 구성할 수는 없겠지만, 커스터마이징이 아주 편하고, 직관적이기 때문에 CSS를 직접 다루는 것을 선호하는 개발자에게 좋은 선택지로 생각됩니다. ### 실제로는 어떻게 사용되나요? Tailwind 공식 문서의 예시를 하나 가져와보겠습니다. ```css

ChitChat

You have a new message!

```` 위 코드는 프레임워크를 사용하지 않았을 때의 전형적인 CSS 코드입니다. 각각의 div에 class 속성을 넣고, 클래스 선택자를 통해 스타일을 부여하고 있죠. 그렇다면 같은 결과물을 Tailwind를 이용해서 구현하면 어떻게 될까요? ```css

ChitChat

You have a new message!

``` 코드의 양이 확 줄어든 것 외에도 상당히 직관적으로 변했습니다. Tailwind 프레임워크에서 미리 정의해 둔 유틸리티 클래스들을 이용해서 스타일을 부여하고 있죠. 결국 보면 아시겠지만, Tailwind는 사전에 만들어진 디자인의 컴포넌트나 기능을 빠르게 가져와서 사용할 수 있도록 만들어진 프레임워크가 아닙니다. 그 대신에, CSS의 각 속성들을 직관적이고 효과적으로 사용할 수 있도록 만들어져 있습니다. 그렇다면 직접 CSS를 다루는 방법과 Tailwind를 사용하는 방법, 두 방법 사이에 그렇게 큰 차이가 있는 걸까요? # Tailwind를 사용하면 좋은 점 ### 학습 난이도가 낮다. 정확하게는, Tailwind는 CSS만 알고 있다면 누구나 빠르게 사용할 수 있습니다. 대부분의 클래스들이 단순히 각 스타일 속성의 축약형이나 다름없기 때문에, 클래스의 이름만 봐도 무슨 역할을 하는지 한눈에 알 수 있죠. 각 클래스마다 대부분 1~2개, 많아봐야 3~4개의 스타일 속성만을 가지고 있어 매우 단순하다는 점도 한몫합니다. ### 재사용성이 높다. 대부분의 스타일 속성, 수치들이 클래스로 정의되어 있기 때문에, 중복되는 스타일 속성들을 일일히 적어줄 필요 없이 계속 클래스로 재사용이 가능합니다. ### 따라서 유지보수가 편리하다. 기존에는, CSS 디자인을 유지보수하려면 해당 HTML 태그의 스타일이 어떤 CSS 코드에서 왔는지를 먼저 찾아봐야 했습니다. 복잡한 프레임워크 테마의 경우에는 파일 여러개를 찾아보면서 수정하는 경우도 적지는 않았죠. Tailwind는 직관적인 클래스가 HTML 태그에 인라인으로 박혀 있기 때문에 개별 수정이 용이합니다. 또 스타일을 변경할 때 다른 태그의 스타일에 대해서 전혀 걱정할 필요가 없다는 것도 큰 장점입니다. ### 반응형 디자인도 어렵지 않다. Tailwind에서 반응형 디자인은 클래스명 앞에 md:, lg: 등의 미디어 쿼리를 대체하는 접두사를 붙임으로써 구성할 수 있습니다. 간단하죠? 클래스 이름을 고민할 필요가 없다. 그 외에... Tailwind는 정말 많은 스타일 속성과 수치들을 클래스로 제공합니다. 심지어 :hover, first-child 와 같은 가상 선택자까지 클래스로 지원합니다. 이렇게 많은 클래스들이 존재하니, CSS 파일의 크기가 엄청 클 것 같다고요? 맞습니다. 공식 문서에서 제공하는 Tailwind CSS 파일의 크기는 783.5kb 입니다. CSS 프레임워크 치고는 상당히 큰 크기인데, 그래서 공식 문서에서는 PurgeCSS를 이용해서 사용되지 않는 CSS 코드를 빌드 단계에서 제거하는 것을 권장하고 있습니다. 거기에 minify까지 하면 파일 크기 문제는 확실히 해결되기에, Tailwind와 PurgeCSS를 같이 사용하는 내용을 나중의 글에서 다뤄보겠습니다. 그리고 Tailwind Components 에서 다양한 개발자들이 등록해 둔 완성도 높은 Components 들을 바로 가지고 올 수도 있습니다.