[CSS] Tailwindcss 사용하기 기초

이번 프로젝트의 css는 모두 Tailwindcss를 사용하기로 했다. 처음이라 모든 속성을 홈페이지에서 검색해서 써야하는 번거로움이 있었지만, 적응되니 생각보다 쓸만했다.!

 

오늘은 아주 기초적인 사용법을 정리해보려고 한다.

 

1. Arbitrary value 적용하기

먼저 기본적으로 height를 적당히 적용하려면 홈페이지에서 height를 검색해서 주어진대로 사용해도 된다.

하지만 주어진 값 외엔 제대로 적용되지 않는 불편함이 있다. 이때 해당 페이지를 맨 아래로 내리면 arbitrary value를 사용할 수 있는 방법을 알려준다.

 

이렇게 크기를 임의로 입력하는 방법은 대체로 다 적용된다. Padding도 margin도 다 가능하다. 즉 `width: 30px; height; 80px;` 짜리 div를 만드려면 아래와 같이 쓸 수 있다.

<div className="w-[30px] h-20">
  ...
</div>

 

2. border를 원하는 방향에만 적용하기

border-bottom만 적용하고 싶다면 tailwindcss에서 알려준대로 `border-b`를 사용하면 된다. 그런데 아무런 변화가 없는 것을 확인할 수 있을 것이다. `border-b`와 함께 border style도 같이 적용해야 보인다. 즉 border style을 적용하지 않으면 `border: none`과 같은 상태라고 생각하면 된다. Soild 스타일을 적용할 것이므로 `border-b border-solid` 를 적용하면 기본적으로 까만색 border를 만들어 준다. 그런데 여기서 한 가지 이상한 점이 있다면 `border-b`를 적용했는데, 아래처럼 모든 방향의 border가 다 보인다는 것이다. 

<div className="p-1 border-b-[3px] border-solid">
  <Link to={to} className="m-auto">
    {children}
  </Link>
</div>

이때 나머지 border를 없애기 위해 `border-0`을 추가해주면 아래쪽 border만 남게 된다.

<div className="p-1 border-b-[3px] border-solid border-0">
  <Link to={to} className="m-auto">
    {children}
  </Link>
</div>

 

3. CSS3처럼 사용하기

처음 사용하다보면 굉장히 불편하다고 생각할 것이다. 하나하나 전부 찾아보고, 뜻대로 안되는 부분이 많기 때문이다. 이럴 때 초보자에게 익숙한 방법을 사용하려면 `@layer components`에 추가하면 된다.

 

즉 `class='square'`인 div가 있을 때 아래와 같이 작성하면 된다.

// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .square {
    width: 100px;
    height: 100px;
  }
}

 

tailwindcss를 그대로 사용하려면 `@apply`를 사용하면 된다.

// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .square {
    width: 100px;
    height: 100px;
  }
  
  .square2 {
    @apply w-[100px] h-[100px];
  }
}

 

 

이정도만 알아도 아마 기본적인 css는 할 수 있을 것 같다. 필요한 기본적인 기능은 Tailwindcss 홈페이지에서 친절하게 알려주고 있으므로 홈페이지가 가장 정확하고 예시도 많다!

추후에는 커스텀 스타일을 추가하는 것을 공부하고 정리해봐야겠다.

 

Adding Custom Styles - Tailwind CSS