tailwind css의 장단점과 사용법

tailwind css

  • tailwind CSS는 HTML 파일, JavaScript 컴포넌트와 클래스네임을 위한 다른 템플릿 모두를 스캐닝해서 대응하는 스타일을 생성하고 그것들을 정적인 CSS 파일에 입력하며 동작한다.
  • tailwind는 제로 런타임으로 동작하며 빠르고, 유연하며 믿을 수 있다.

tailwind를 사용할 때의 장단점은 다음과 같다.

장점

  • CSS를 작성할 때 시간을 많이 절약할 수 있음
  • 컴포넌트 생성과 관리가 쉬우며, 유지보수하기 편함
  • 프로그래밍 언어와 같은 추상화 수준을 제공해 스타일을 빠르게 적용할 수 있어 코드의 길이가 줄고, 개발 시간이 절약됨
  • 커스터마이징이 쉬워 원하는대로 디자인을 변경할 수 있음
  • 반응형 디자인 구현도 쉬워짐

단점

  • 새로운 스타일을 사용하면 CSS 클래스를 생성하게 되어 CSS 파일 크기가 커지고 페이지 로드 시간도 늘어날 수 있음
  • 다른 개발자들과 협업할 경우 CSS파일에 충돌이 생겨 해결해야 함
  • 의존성을 가져 더 많은 코드가 필요하게 됨
  • tailwind를 사용할 수 없는 스타일인 경우에 별도의 css 파일을 생성해야 하기 때문에 일관성 있는 스타일링이 어려울 수 있음

설치

tailwind CLI

  • Tailwind CSS를 처음부터 시작하는 가장 간단하고 빠른 방법은 Tailwind CLI로 시작하는 것이다. Tailwind CLI는 Node.js 설치 없이 사용하는 것도 가능하다.
  • 그 외에 PostCSS를 사용해 설치하는 방법도 있다.
  • Tailwind CSS 설치하기

    npm install -D tailwindcss
    npm tailwindcss init
  • 템플릿 경로 설정하기

    • tailwind.config.js 파일 안에 있는 모든 템플릿 파일에 경로를 추가하기
    • tailwind.config.js 파일에서는 커스텀 클래스와 색상, 폰트 등의 속성을 추가할 수 있음
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./src/**/*.{html,js}"],
      theme: {
        extend: {},
      },
      plugins: [],
    }
  • CSS에 Tailwind directive 추가하기

    • 메인 CSS 파일(src/input.css)의 Tailwind의 모든 layer에 @tailwind directive를 추가하라
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  • Tailwind CLI 빌드 프로세스 시작하기

    // terminal
    npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
  • HTML에서 Tailwind 사용 시작하기

    • 컴파일된 CSS 파일을 <head> 에 추가하고 스타일링을 위해 Tailwind의 유틸리티 클래스를 사용하라
    // src/index.html
    <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="/dist/output.css" rel="stylesheet">
    </head>
    <body>
      <h1 class="text-3xl font-bold underline">
        Hello world!
      </h1>
    </body>
    </html>

사용

  • 별도의 css를 작성할 필요없이 클래스네임에 정의된 클래스네임을 추가하는 것만으로 스타일링이 가능함
  • marin-top은 mt-x , width는 w-x, background-color는 bg-xxx 등 약자 형태의 prefix를 가진 클래스네임을 추가해 사용 가능하다.

    <div className="flex items-center">
    	<p className="mt-8 w-full bg-white rounded-8">
    		hi
    	</p>
    </div>

후기

새로 시작하는 프로젝트에서 tailwind를 사용하게 되었는데 별도의 css를 작성할 필요없이 클래스네임을 추가하는 것만으로 스타일링이 가능해서 편했다. 정의된 스타일도 꽤 직관적이라 이해하고 사용하기에 용이했다.

하지만 협업 시에 output.css 파일에서 충돌이 나는 것과 tailwind로 스타일링할 수 없는 경우에는 별도의 css 파일을 생성해야하는 것과 디자인시스템을 함께 사용할 때는 추가로 처리해줘야 하는 점 등이 번거로웠다.

이 부분은 좀 더 사용하고 개선해봐야할 것 같다.


Written by@jaeeun
I explain with words and code. I explain with words and code. I explain with words and code.