Tailwind 설치 방법 사용법 장단점 CSS와 비교

Tailwind 란?

Tailwind는 CSS를 HTML 코드에서 class이름으로 이용하여 스타일을 생성하고 작성합니다

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  클릭하세요
</button>

 

장점

생산성 최적화

HTML과 CSS 파일을 두 개를 열어놓고 작업하지 않아도 돼서 작업 속도가 빠르고,

다양한 에디터에서 자동완성 기능을 제공합니다.

 

또 CSS 파일 크기가 감소하여, 로딩 속도 향상에도 도움을 줍니다.

 

CSS 파일을 만들게 되면, 스타일을 주기 위해 클래스 이름을 뭐로 할까 고민을 하게 되는데,

그런 시간도 줄일 수 있습니다.

 

단점

예쁘지 않은 코드

스타일 많게 되면, 코드가 길어지게 되고, 예쁘지 않게 되고 이해하기 어렵습니다.

<div class="bg-white p-10 m-10 border-2 border-gray-200 rounded-lg shadow-lg">
  <h2 class="text-2xl text-black font-bold leading-7">타이틀</h2>
  <p class="mt-3 text-base text-gray-500">내용</p>
  <button class="mt-6 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">확인</button>
</div>

클래스명 학습 런닝 커브

처음 사용하게 되면, 클래스명을 외워서 사용해야 하는데, 조금 공부가 필요합니다

초반에는 공식문서를 보면서 작업을 해야 합니다.

 

Next.js 에서 설치 방법

tailwind 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

app/page.js

import React from 'react';

function HomePage() {
  return (
    <div className="bg-blue-100 p-5">
      <h1 className="text-3xl text-blue-600">Hello Tailwind CSS!</h1>
    </div>
  );
}

export default HomePage;

 

개발자 커뮤니티에서는 Tailwind와 기존 CSS로 스타일 작업하는 방식에 대해서 논쟁이 많습니다.

CSS를 잘 모르고 Tailwind를 사용한다 등등...

코드를 더럽게 만든다 등등

 

하지만 Tailwind에 간편함과 장점도 많이 있으니 한번 사용해 보시는 것도 좋을 듯합니다.