Tailwind 사용기 (1)

요 며칠간 Tailwind 로 이것저것 만져보다가 소개하는 글을 써보려한다. 

지난 해커톤 참여 때 같은 프론트엔드 팀원분께서 css로는 이 tailwind를 쓰길 원했으나, 짧은 대회기간에서 내가 css를 새로 익히기는 무리가 있다고 판단해서 팀원분께서 양보해주셨다. 

언제든지 테일윈드를 쓰는 곳에선 테일윈드로 빠르게 적응하기 위해서 이번 기회에 써본다.

 

배우기 위해선 공식문서가 짱

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

공식문서의 메인문구 : 오직 HTML문서를 떠날 필요 없이(.css 문서까지 갈 필요 없이) 웹사이트 구축이 가능하다는 말

 

이를 위해서 미리 만들어놓은 css를 사용한다. 부트 스트랩 같은 형식인가? 싶다. (utility-first)

md 로 표시된 것이 반응형

 

1. 오직 HTML 문서만 보면 된다.

2. 클래스가 정해져 있기 때문에 클래스 이름을 고민할 필요도 없고, 컨벤션에 있어서도 편하다.

3. 반응형, 다크모드 등 설정이 편하다.

 

단점이 있다면 클래스 이름을 고민할 필요가 없는 만큼, 클래스 이름이 정해져 있고 그 정해진 것을 외워서 사용해야한다는 사실이다.

사용하다 보면 금방 익숙해져서, 사실 해커톤처럼 3일 안에 mvp를 만들어야 하고 이런 빠른 작업이 필요하지 않는 이상 괜찮을 듯.

 

그리고 상세한 css 작업을 못하는 게 아닌가? 싶었는데 더 찾아보니 전혀 아니었다. 커스텀도 자유롭게 가능하다. 

협업에 있어서 굉장히 편리한 css 프레임워크가 맞다..

 

자동완성이 안될땐??

VSC 익스텐션으로 HTML CSS Support를 설치하면 자동완성이 가능하다.

cdn으로 테스트 해보기. 

reset.css 를 넣지 않아도 자동으로 패딩 마진이 사라졌다.