Tailwind CSS

테일윈드란?

https://tailwindcss.com/

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

공식 홈페이지 참고

 

테일윈드 CSS는 Styled-Components와 거의 양대산맥처럼 많이 사용되는 스타일링 라이브러리이다.

테일윈드에서 미리 클래스명으로 만들어 놓은 스타일을, className만 수정하면 바로 인라인에서 적용시킬 수 있기 때문에 편리해서 많이 사용된다.

일반 CSS나 스타일드 컴포넌트처럼 자유도는 떨어질 수 있지만, 커스텀도 가능하기도 하고 미리 만들어 놓은 CSS를 사용하기 때문에 프로젝트 협업을 하면서 팀원들끼리 약간의 스타일 차이가 생기는 오류도 방지할 수 있다.

 

그러나 인라인 속성이 지저분해져서 마크업 문서를 알아보기 힘들 수 있어 이런 인라인 방식 스타일링에서는 호불호가 많이 갈리기도 한다.

 

편리한 것은 모두가 인정하나, 사용방식에 있어서의 호불호가 갈리는 편.

 

넥스트.js에서는 기본적으로 프로젝트 셋업 시 세팅을 도와주기 떄문에 굉장히 편리하게 사용이 가능하다.

리액트 프로젝트에서는 여러 파일을 돌아 다니며 세팅을 해주어야 하는 번거로움이 있는 라이브러리이기도 했다.

기본 사용방법

공식 홈페이지에서 필요한 스타일링 속성을 검색하면서 사용하면 된다. 끝.

시각적으로 나타내주기 때문에 더 편리하다. className만 그대로 가져오면 된다.

 

마진 뿐만 아니라, text 등에서 붙는 숫자는 일반적으로 크기를 의미하는데, 테일윈드에서의 1은 0.25rem이다. 1rem이 16px이니, 테일윈드에서의 1은 4px과도 같다.

 

기본 단위 설정은 tailwind.config.ts 파일에서 설정할 수 있다.

커스텀 컬러 설정하기

tailwind.config.ts 파일에서 아래와 같이 설정한다.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#1da1f2',
        secondary: '#14171a',
        accent: '#1c9cf0',
        muted: '#657786',
        customColor: '#ff4500',
      },
    },
  },
  plugins: [],
};

 

colors 객체의 key가 컬러의 이름이 된다.

그리고 클래스 네임에 이런 식으로 붙여서 바로 사용 가능하다.

<div className="text-primary bg-muted">장원영</div>

자주 사용하는 속성

1. 레이아웃

 

• container: 레이아웃을 중앙에 맞추고 일정한 너비를 설정

• flex, inline-flex: 플렉스박스 레이아웃을 설정

• grid: 그리드 레이아웃을 설정

• block, inline-block, inline: 요소의 디스플레이 속성을 설정

• hidden: 요소를 숨김

• w-{size}: 너비를 설정 (w-1/2, w-full, w-screen 등).

• h-{size}: 높이를 설정 (h-1/2, h-full, h-screen 등).

 

2. 박스 모델

 

• p-{size}: 패딩을 설정 (p-4, py-2, px-4 등).

• m-{size}: 마진을 설정 (m-4, my-2, mx-4 등).

• space-{x/y}-{size}: 플렉스박스 자식 간 간격을 설정 (space-x-4, space-y-2 등).

 

3. 배경색

 

• bg-{color}: 배경색을 설정 (bg-blue-500, bg-gray-200 등).

 

4. 테두리

 

• border: 기본 테두리를 설정

• border-{size}: 테두리 두께를 설정 (border-2, border-4 등).

• border-{color}: 테두리 색상을 설정 (border-red-500, border-green-200 등).

• rounded-{size}: 테두리 반경을 설정하여 둥근 모서리를 만듦 (rounded, rounded-lg, rounded-full 등).

 

5. 타이포그래피

 

• text-{size}: 글자 크기를 설정 (text-sm, text-lg, text-xl 등).

• text-{color}: 글자 색상을 설정 (text-red-500, text-blue-700 등).

• font-{weight}: 글자 두께를 설정 (font-light, font-bold, font-semibold 등).

• leading-{size}: 줄 간격을 설정 (leading-tight, leading-loose 등).

• tracking-{size}: 글자 간격을 설정 (tracking-tight, tracking-wide 등).

 

6. 위치와 디스플레이

 

• absolute, relative, fixed, sticky: 위치를 설정

• top-{size}, right-{size}, bottom-{size}, left-{size}: 위치를 설정 (top-0, left-1/2 등).

• z-{index}: z-index를 설정 (z-0, z-10, z-50 등).

 

7. 컬러

 

• text-{color}: 텍스트 색상 설정 (text-gray-800, text-indigo-600 등)

• bg-{color}: 배경 색상 설정 (bg-blue-500, bg-red-200 등)

• border-{color}: 테두리 색상 설정 (border-green-500, border-yellow-200 등)

 

8. 기타 유용한 클래스

 

• shadow-{size}: 박스 쉐도우를 설정 (shadow-sm, shadow-lg 등).

• opacity-{value}: 투명도를 설정 (opacity-0, opacity-50, opacity-100 등).

• transition, duration-{time}, ease-{timing}: 전환 효과를 설정 (transition-all, duration-300, ease-in-out 등).