tailwind 사용해 봤습니다

홍정민·2024년 8월 20일

지금은 FSD 아키텍처를 도입하느라 사용중이지 않지만 도입 전에는 사용해 봤으니 tailwind를 다시 쓰게 될 나의 미래를 위해 간단하게 작성 해 보자.

사용 후기

내가 사이드 프로젝트에서 사용하면서 실제로 장단점이 어떠한지 기술하도록 하겠다. 사실 지금의 프로젝트에서는 tailwind를 사용하지 않고 있다. FSD 아키텍처를 사용하면서, tailwind 대신 다른 방법으로 css를 사용하기로 결정했다.

FSD에서 테일윈드를 제거한 이유
FSD는 하나의 기능 단위로 컴포넌트를 구성하기 때문에 css를 각각의 컴포넌트 폴더 안에 관리할 수 있는 모듈 CSS를 사용하였다.

장점

내가 tailwind를 1개월간 사용해 보면서 장점은 다음과 같다.

사용법이 매우매우 간단하다.
html 태그의 클래스 이름을 생각하지 않아도 돼서 개발을 빨리빨리 진행할 수 있었다.
css를 작성하는 것 보다, 미리 정의되어 있는 키워드를 가져다 쓰기 때문에 더 빨리빨리 코드를 작성할 수 있었다.
특정 요소의 기본 값(a, li, ul, button 등) 디자인은 못생겼기 때문에 @tailwind base를 통해서 기본 값을 자동으로 깔끔한 디자인으로 바꿔줘서 시간이 절약됐다.
css파일이 없기 때문에 프로젝트 폴더구조가 깔끔해 보인다.

tailwind를 잘 다루는 개발자는 테마를 커스텀 해보고 다양한 플러그인들을 연결해서 사용해 봤을 것이다. 나는 사실 기본으로 제공되는 기능만 하여도 충분히 개발에 지장이 없었기 때문에 이 부분은 잘 모른다.

단점

사용성이 좋았지만 단점 역시 존재하였다.

JSX 코드가 매우 더러워짐
tailwind 공식문서를 옆에 달고 살아야 함 (※ 적응되면 문제없음)

사실 코드의 가독성을 떨어뜨리는 것 제외하고는 개인적으로는 사용성이 좋았다.

사용법

설치

라이브러리를 설치하고, tailwind를 초기화 하여 tailwind.config.js 파일을 생성한다.

npm i -D tailwind
npx tailwindcss init

설정 파일 경로 설정

설정한 경로에 있는 tailwind css 클래스를 찾아내어 스타일을 생성한다.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: ![](https://velog.velcdn.com/images/mzhong/post/2b8f13bb-a831-430c-a03b-40541722472a/image.png)
{},
  },
  plugins: [],
}

메인 css 파일에 tailwind layer 적용

최상위 메인 css 파일에만 tailwind 지시어를 설정한다.

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

html에서 tailwind 사용

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

테일윈드 layer

@tailwind base

CSS 초기화와 함께 기본적인 HTML 요소의 스타일을 설정한다.

body {
    font-family: 'Inter', sans-serif;
}

@tailwind component

재사용할 수 있는 tailwind 커스텀 클래스를 정의한다.

css

.card {
    @apply bg-white shadow-lg rounded-lg p-6;
    /* 추가적인 스타일링도 가능 */
    transition: background-color 0.3s;
    /* 필요에 따라 더 많은 스타일 추가 가능 */
    border: 1px solid #e5e7eb;
}

html

<div class="card">
  <h2>Title</h2>
  <p>This is a card component.</p>
</div>

@tailwind utilities

tailwind.config.js 파일에서 정의할 수 있으며, tailwind에 정의되지 않은 색상, 폰트 크기 등의 커스텀 클래스를 정의한다.

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1e40af',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      },
    },
  },
}