1. Tailwind CSS란?

우동이·2022년 3월 7일
Tailwind CSS
4

Taildwind-css

목록 보기
1/4
post-thumbnail
  • Utility-First를 지향하는 CSS 프레임워크입니다.
    • Utility-First: 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링
  • CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 사용할 수 있게 됩니다.
    • 스타일링에 필요한 대부분의 속성들이 클래스 형태로 사전에 정의되어 있고 사용자는 클래스들을 조합해요 사용하면 됩니다.
  • 예시 - Tailwind 적용 전 ( 공식문서 기준 )
<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>
  • 예시 - Tailwind 적용 후 ( 공식문서 기준 )
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>
  • 장점
    • 클래스의 이름을 고민하지 않아도 됩니다.
    • 쉽게 반응형 페이지를 구현할 수 있도록 지원합니다.
      • 기본적으로 제공하는 BreakPoint가 존재하기 때문에 복잡한 반응형 디자인도 쉽게 구현할 수 있습니다.
    • 따로 커스터마이징이 가능합니다.
      • 기본 정의된 테마를 확장할 수도 있고 새로운 속성을 추가할 수 있습니다.
    • 반복되는 스타일은 컴포넌트 추상화, 클래스 추상화를 통해서 재사용 가능합니다.
    • 공식문서가 매우 친절하고 학습 난이도가 낮습니다.
    • 다크 모드 지원
      • dark: 프리픽스 방식으로 지원 ( 스타일을 직접 추가 하는 방식 )
      • 조금 불편한 방법일 수도 있지만 모듈화가 잘 이루어지면 나중에 dark 클래스 추가만으로도 손쉽게 다크모드를 적용할 수 있습니다.
    • Tailwind CSS 공식 커뮤니티가 존재하며 컴포넌트 또는 완성된 페이지들도 제공합니다.
  • 단점
    • 코드의 직관성은 좋으나 가시성은 떨어집니다.
      • <div class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
      • Headwind와 같은 플러그인( 정렬 기능 )을 활용해 가독성을 높일 수 있습니다.
    • 미리 정의된 스타일 시트( CSS 파일 )의 용량이 매우 커집니다.
      • 클래스명을 재사용하기 때문에 컴포넌트가 많아져도 CSS 파일 용량이 상대적으로 늘어나지 않는 장점은 있습니다.
      • 개발모드
        • 2.1 버전부터 JIT(Just-In-Time Mode)모드를 지원하면서 변경된 소스파일을 탐지하여 해당 클래스만 스타일시트에 추가
      • 배포모드
        • 사용하지 않는 유틸리티 스타일 시트( CSS 파일 ) 제거하는 purge 옵션 제공
    • CSS 속성들의 우선순위 문제
      • Tailwind CSS는 클래스가 출현한 빈도 / 출현한 순서에 상관없이 정의한 순서에 따라 스타일을 구성합니다.
      • twin.macro를 통해 class에 선언된 여러 클래스 중 뒤에 위치한 클래스가 최종적으로 적용시킬 수 있습니다.
      • v3에서 아직 twin.macro 이슈가 존재합니다. ( 불안정 )
    • 특정 프리픽스는 모든 CSS 속성을 지원하지 않습니다.
      • hover: / focus: 등 특정 프리픽스는 일부 속성만 사용 가능합니다.
      • 모든 속성을 지원하기 위해서는 커스터마이징을 통해 추가 설정을 넣어주면 됩니다.
      • Variantrs 제공
    • 다른 CSS 프레임워크 처럼 완성된 스타일 / 컴포넌트를 손쉽게 제공하여 사용할 수는 없습니다.
      • 하지만 본인이 필요한 것들만 사용하고 불필요한 부분을 제거하며 직접 구현의 의존도가 높을 경우 더 높은 효율성을 보장합니다.
    • 분기처리를 하기위한 동적 스타일링을 하기위한 자바스크립트 변수 값 활용이 불가능 합니다.
      • 특정 라이브러리를 사용하면 CSS-in-JS 형태로도 활용이 가능합니다.
      • twin.macro
  • 팁
    • VS Code를 사용할 경우Tailwind CSS IntelliSense 플러그인 추천
      • 자동완성 기능
      • 잠재적인 오류나 버그 발견
  • 참고 및 출저

설치 및 셋팅

  • Tailwind CLI 사용
    • tailwind.config.js 파일 자동 생성
npm install -D tailwindcss
npx tailwindcss init
  • tailwind.config.js
    • 적용할 모든 템플릿 파일 경로 추가
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  • src/app.css 파일에 Tailwind 지시문 추가
/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  • Tailwind Build
npx tailwindcss -i ./src/app.css -o ./dist/output.css --watch
  • src/index.html 파일에 <head>로 빌드된 Tailwind CSS를 추가
    • CSS를 따로 설정하지 않아도 클래스 이름만 가지고 Hello world를 꾸밀 수 있게 됩니다!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/dist/output.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>
profile
우동이
아직 나는 취해있을 수 없다...
다음 포스트

2. Tailwind CSS 활용

0개의 댓글