tailwind를 사용해 보면서 중요한 요소 위주로 정리해 봤습니다. 모든 것은 테일윈드 공식 홈페이지의 document 섹션에 있습니다. 필요할 때 검색해서 사용하면 됩니다.

vscode를 사용하신다면 공식 인텔리센스를 설치해서 사용하세요.

max-width

화면의 최대 크기를 정합니다. 양 옆으로 auto margin을 주기위해서는 mx-auto를 사용하면 됩니다. 예를 들어 화면의 최대 크기를 768px로 주고 양 옆의 마진을 auto로 주려면 다음과 같이 하면 됩니다.

className="max-w-3xl mx-auto"

참고 : max-w-3xl = max-width: 48rem; /* 768px */

이런 식으로 양 옆의 여백을 준 컨테이너가 생기게 됩니다.

padding, margin

가장 많이 사용하는 패딩과 마진입니다.

padding이나 margin을 주기위해서 p-x, m-x 와 같이 패딩을 지정해 주면 됩니다.

예를 들어 padding을 0.75rem을 주기위해서는 p-3를 주면 됩니다.

p-1 padding: 0.25rem; /* 4px */
p-2 padding: 0.5rem; /* 8px */
p-3 padding: 0.75rem; /* 12px */
p-4 padding: 1rem; /* 16px */

className="p-3"

저는 p-3를 가장 많이 사용할것 같군요.

만약 윗부분에 주려면 pt-3 아래 부분만 패딩을 주려면 pb-3 수평축에만 주려면 px-3 와 같은 방식으로 패딩을 주면 됩니다.

가장 많이 쓰게 될 기능입니다.

Heading

테일윈드에서는 h1, h2 태그에 크기가 기본적으로 지정되어 있지 않습니다. 그래서 텍스트 크기를 일일이 지정을 해주거나 기본 스타일을 설정할 수 있습니다. 하나씩 지정하는건 힘드니 기본 스타일을 지정해 봅시다.

tailwind.config.js 에 다음과 같이 지정을 해줍니다.

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        'h1': { fontSize: theme('fontSize.2xl') },
        'h2': { fontSize: theme('fontSize.xl') },
        'h3': { fontSize: theme('fontSize.lg') },
      })
    })
  ]
}

flex

css의 꽃인 flex 입니다. flex만 알면 대부분의 레이아웃을 쉽게 만들 수 있습니다. 플렉스는 부모 컨테이너에 맞춰 알맞게 늘어나거나 줄어드는 기능입니다. flex를 선언하면 그 안의 요소가 한 줄로 들어옵니다. 이렇게 한 줄로 들어온 요소들을 정렬하면 됩니다.

<div className="flex bg-slate-100 mt-3">
  <div className="bg-red-50">나는 플렉스이다.</div>
  <div className="bg-yellow-300">나는 플렉스 2이다.</div>
</div>

이걸 좌우 끝으로 정렬해보겠습니다. 이럴 때는 justify-between을 주면 됩니다.

<div className="flex justify-between bg-slate-100 mt-3">
  <div className="bg-red-50">나는 플렉스이다.</div>
  <div className="bg-yellow-300">나는 플렉스 2이다.</div>
</div>

flex의 방향을 column을 주지 않는 이상 보통 justify는 가로 축을 의미합니다.

이번에는 세로 방향을 정렬을 해볼까요?

이때는 items-center를 이용해서 정렬하면 됩니다. items-center 는 align-items: center 라는 css의 테일 윈드 표기법입니다.

<div className="flex justify-between items-center h-10 bg-slate-100 mt-3">
  <div className="bg-red-50">나는 플렉스이다.</div>
  <div className="bg-yellow-300">나는 플렉스 2이다.</div>
</div>

이것만 알아도 정말 왠만한 css 레이아웃은 쉽게 다룰 수 있습니다.

인텔리센스 팁

vscode에서 인텔리센스가 잘 안 먹힐 때 있는데 제안 추천 단축키는 맥에서는 command + i 이다. 윈도우에서는 ctrl + space 입니다.

반응형 디자인

특정 디바이스 사이즈일 때만 해당 속성이 나타날 수 있게 할 수 있습니다.

<img
  className="w-16 md:w-32 lg:w-48"
src="https://tailwindcss.com/_next/static/media/tailwindcss-mark.79614a5f61617ba49a0891494521226b.svg"
/>

예를 들어 보통 w-16의 너비이다가 md 사이즈에서는 w-32, lg 사이즈에서는 w-48이 되게 만들 수 있습니다.

그 밖에 많이 쓰이는 기능들

텍스트 크기

<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>

텍스트 색

<p class="text-blue-600">The quick brown fox...</p>
<p class="text-gray-600">The quick brown fox...</p>

배경 색깔

<button class="bg-cyan-500 hover:bg-cyan-600 ...">Subscribe</button>

Border Radius

rounded	: border-radius: 0.25rem; /* 4px */
rounded-md : border-radius: 0.375rem; /* 6px */

이 밖에도 다양한 기능들이 있기 때문에 홈페이지에서 검색해서 사용하세요.
https://tailwindcss.com/docs/installation

시간이 있다면 디자인 시스템이나 UI 컴포넌트들을 만드는 재미가 있겠지만 프론트, 백엔드 다해야 한다거나 다른 개발자와 협업을 해야할 때 요긴하게 사용할 수 있을것 같습니다.

물론 css 공부 차원에서 직접 구현해 보는게 가장 좋지만 이런 디자인 시스템을 접해보고 필요한 것을 만드는 식으로 해도 좋지 않을까요?