[TIL] Tailwind CSS 장단점, 연습예제

💡 TIL 20230819 - Tailwind CSS 장단점, 연습예제

---

1. Tailwind CSS란

Tailwind CSS는 utility-first 컨셉을 가진 CSS 프레임워크이다.

• 부트스트랩과 비슷하게 m-1(.m-1 {margin: 0.25rem}), flex(.flex {display: flex})와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.
• tailwind는 제로 런타임으로 동작하며 빠르고, 유연하다.

 

1) 장점

• 프로그래밍 언어와 같은 추상화 수준을 제공해 스타일을 빠르게 적용할 수 있어 코드의 길이가 줄고, css 작업 시간이 절약된다.
• 컴포넌트 생성이 쉽고, 관리 및 유지보수가 편하다.
• 커스터마이징이 쉬워 원하는 대로 디자인을 바꾸기 쉽고, 반응형 디자인 구현도 편하다.

 

2) 단점

• 코드가 못생겼다(?) - 아래 코드 참고

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

 

• 러닝 커브 : 이미 클래스명이 정해져있기 때문에, 처음 써보는 사람들은 클래스명에 익숙해지는데 시간이 필요하다. 하지만 `Tailwind CSS IntelliSense`와 같은 VS code 익스텐션을 설치하면 자동완성이 되기 때문에 어느정도 커버가 가능하다. (개인적으로 이 확장 프로그램 없으면 tailwind css 못쓸듯)

 

 

---

2. 설치 및 사용

1) 설치

npm install tailwindcss
npm tailwindcss init // 설정파일 tailwind.config.ts 생성

 

또는 Next.js 프로젝트 세팅 시 아래와 같이 터미널에서 선택할 수 있기도 하다.

 

2) tailwind.config.ts

tailwind CSS Configuration

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

 

3) 사용 예시

연습 겸 예시로 만들어 본 결과물과 코드는 아래와 같다.

import profilePic from "@/assets/pic.jpg"
import chairPic from "@/assets/chair.webp"
import Image from "next/image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft, faStar, faHeart } from "@fortawesome/free-solid-svg-icons";

const Home = () => {
  return (
    <div className="w-11/12 max-w-xl mx-auto py-20 px-10 flex flex-col space-y-10">
      <div className="bg-white p-8 rounded-3xl shadow-xl">
        <span className="font-semibold text-3xl">Select Item</span>
        <div className="flex justify-between my-2">
          <span className="text-gray-500">Grey Chair</span>
          <span className="font-semibold">$19</span>
        </div>
        <div className="flex justify-between">
          <span className="text-gray-500">Tooly Table</span>
          <span className="font-semibold">$80</span>
        </div>
        <div className="flex justify-between mt-2 pt-2 border-t-2 border-dashed">
          <span className="font-semibold">Total</span>
          <span className="font-semibold">$99</span>
        </div>
        <div className="flex justify-center">
          <button className="w-40 py-3 mt-5 bg-red-400 text-white p-2 rounded-lg shadow-lg hover:bg-red-300 hover:-translate-y-1 transition ease-in-out duration-200 active:bg-red-400">
            Checkout
          </button>
        </div>
      </div>
      <div className="bg-white overflow-hidden rounded-2xl shadow-xl">
        <div className="bg-blue-500 p-6 pb-14">
          <span className="text-white text-2xl font-medium">Profile</span>
        </div>
        <div className="rounded-3xl p-6 bg-white relative -top-5">
          <div className="flex relative -top-16 items-end justify-between">
            <div className="flex flex-col items-center">
              <span className="text-sm text-gray-400 font-medium">Orders</span>
              <span className="font-semibold">340</span>
            </div>
            <Image src={profilePic} alt="profile" className="w-24 h-24 rounded-full" />
            <div className="flex flex-col items-center">
              <span className="text-sm text-gray-400 font-medium">Spent</span>
              <span className="font-semibold">$2,310</span>
            </div>
          </div>
          <div className="relative flex flex-col items-center -mt-10">
            <span className="text-lg font-semibold">
              Jane Doe
            </span>
            <span className="text-sm text-gray-500">
              New York, USA
            </span>
          </div>
        </div>
      </div>
      <div className="bg-white p-10 rounded-2xl shadow-xl">
        <div className="flex mb-5 justify-between">
          <button><FontAwesomeIcon icon={faArrowLeft} /></button>
          <div className="space-x-3 flex items-center">
            <span className="font-semibold">
              <FontAwesomeIcon icon={faStar} className="text-yellow-400 mr-1" />
              4.9
            </span>
            <button>
              <FontAwesomeIcon icon={faHeart} className="text-red-500 shadow-xl p-2 rounded-md" />
            </button>
          </div>
        </div>
        <Image src={chairPic} alt="chair" />
        <div className="flex flex-col">
          <span className="font-semibold text-xl tracking-tight">Swoon Lounge</span>
          <span className="text-sm text-gray-500">Chair</span>
          <div className="mt-1 mb-5 flex justify-between items-center">
            <div className="space-x-2 flex">
              <div className="w-6 h-6 rounded-full bg-stone-300" />
              <div className="w-6 h-6 rounded-full bg-orange-300" />
              <div className="w-6 h-6 rounded-full bg-indigo-400" />
            </div>
            <div className="flex items-center space-x-5">
              <button className="rounded-lg bg-stone-300 active:bg-stone-400 flex justify-center items-center aspect-square w-10 text-xl text-gray-500">
                -
              </button>
              <span className="text-xl">1</span>
              <button className="rounded-lg bg-stone-300 active:bg-stone-400 flex justify-center items-center aspect-square w-10 text-xl text-gray-500">
                +
              </button>
            </div>
          </div>
          <div className="mt-5 flex justify-between items-center">
            <span className="text-2xl font-semibold">$450</span>
            <button className="w-40 bg-stone-500 text-white p-3 rounded-lg shadow-xl hover:bg-stone-600 hover:-translate-y-1 transition ease-in-out duration-200">Add to Cart</button>
          </div>
        </div>
      </div>
      {/* <div className="bg-white p-10 rounded-2xl shadow-xl"></div> */}
    </div>
  );
};

export default Home;

---

3. 개인적인 소감

styled-components를 사용했을 때는, 이게 h1인지 div인지 form인지 HTML 태그들을 sematic하게 파악하기 어렵다고 느꼈었는데, tailwind css는 HTML 태그들을 한눈에 볼 수 있다는 점에서 가독성이 더 좋다고 느껴졌다.

 

하지만 tailwind를 처음 접했을 때 무한증식 하는 듯한 className들을 보고 '아니 이게 뭐야...?' 싶긴 했었다. 그런데 위의 예제 정도만 만들어보니 익숙해지면 금방 파악할 수 있고, 무엇보다 코드 작성할 때 시간이 단축된다는 것을 바로 체감할 수 있었다.

 

무엇보다도 공식 문서가 잘 되어있어 공식 문서를 읽어보면서 더 익숙해지면 잘 쓸 수 있을 것 같다.

 

 

---

참고 사이트

노마드 코더 - [풀스택] 캐럿마켓 클론코딩

Hello Tailwind CSS! | 장점, 단점, 사용법

tailwind css의 장단점과 사용법