공식사이트

클릭하시면 사이트로 이동합니다.

🌊 Tailwind CSS

Tailwind는 utility-first 특성을 가진 CSS 프레임워크다. 쉽게 말하면 자주 사용하는 CSS 속성들을 text-sm, flex, rounded 같은 이름의 유틸리티 클래스로 제공해주는 역할을 한다. 별도의 CSS 파일이나 styled component에 일일이 스타일을 작성하는 대신 html이나 JSX 태그의 클래스에서 바로 CSS 속성을 추가할 수 있는 것이다.

Tailwind에는 기본적으로 정말 많은 유틸리티 클래스가 있지만 사용하다보면 클래스로 지원되지 않는 값이 필요할 때가 있다. 이럴 때 쓸 수 있는 첫 번째 방법은 대괄호 안에 내가 사용하려는 값을 입력하는 것이다.

예를 들어, 나는 글자 크기를 15px로 지정하고 싶은데 기본으로 제공되는 건 text-sm (14px)과 text-base (16px)뿐이라고 하자. 이럴 땐 text-[15px]라고 작성하면 된다. 크기 단위뿐만 아니라 색상 등 다른 속성에도 bg-[#000000]와 같이 대괄호를 사용해 임의의 값을 입력할 수 있다.

Tailwind CSS IntelliSense

VSCode에서는 Tailwind CSS IntelliSense 익스텐션이 제공되는데, 자동완성, 오류 표시(Linting), CSS 프리뷰 등 편리한 기능들이 많다.

🎨 Customization

위에서 내게 필요한 특정 값을 Tailwind에서 제공하지 않는 경우 사용할 수 있는 첫 번째 방법으로 대괄호 []를 언급했었다. 한두 번 쓰고 말 거라면 이 방법도 나쁘지 않지만, 여러 번 반복된다면 상당히 번거로울 것이다.

그럴 땐 두 번째 방법인 커스터마이징을 활용하자! tailwind.config.js 파일에 들어가서 theme의 extend, color, fontFamily에 내가 자주 쓰는 속성과 값들을 추가해주면 된다.

예를 들어 아래와 같이 커스터마이징을 했다면

이런 식으로 사용할 수 있다

h-screen (height), shadow (boxShadow), font-sans (fontFamily)처럼 기존에 있던 클래스에 내가 원하는 값을 덮어씌워도 되고 rounded-4xl (borderRadius)처럼 새로운 클래스를 추가해도 된다. 색상의 경우 색상 이름과 함께 shade를 설정해서 bg-gray-100처럼 사용할 수도 있다.