Tailwind

Tailwind

특징

• 테일윈드 CSS는 런타임 중 클라이언트의 어떤 영향(변수, 조건문 등)도 받지 않으므로, 빌드 타임에서 추론이 가능한 클래스명을 정적으로 지정해야 한다

Tailwind를 사용하는 이유

• 이미 제작된 유틸리티 클래스. 직접 만들 필요 없음
• 동적 클래스의 JIT 컴파일, 반응형 디자인 등 유용한 기능을 제공한다.
• 해당 프레임워크를 쉽게 커스터마이징 할 수 있다.

Zero 러닝커브

• Tailwind를 사용하기로 결정해도 따로 시간을 들여 무언가를 배울 필요는 없다. npm 혹은 yarn을 통해 패키지만 설치해주고, 원하는 html 요소에 class만 부여해주면 된다. 필요한 효과들은 그때마다 documentation에 검색해서 쓰면 되고, 몇번 사용하면 자주 사용하는 class들은 외워질 것이다.

반응형

• 반응형 할 때는 모바일 먼저 작업하는 것이 좋다.
  • sm: 640px 이상의 화면
  • md: 768px 이상의 화면
  • lg: 1024px 이상의 화면
  • xl: 1280px 이상의 화면
  • 2xl: 1536px 이상의 화면

Tailwind CSS의 작동 방식

• Tailwind CSS는 정규표현식을 통해 HTML 상에서 class일 수 있는 모든 단어들을 가져온 뒤 해당 단어가 Tailwind CSS에서 인식되면 그것을 CSS로 변환하는 방법으로 작동한다. 즉, class에 작성된 내용을 코드적으로 분석하거나 파싱하여 작동하는 것이 아니고, 단어의 있는 그대로 이해하고 적용된다는 의미이다.

<div class={`text-${error ? "red" : "green"}-600`}></div>

이 코드는 조건문에 따라 'text-red-600' 혹은 ‘text-green-600’으로 변동하지만, Tailwind CSS는 이를 인식하지 못하고 건너뛰어버리고 만다.

<div class={`${error ? "text-red-600" : "text-green-600"}`}></div>

이 코드와 같이 작성해줘야 완전한 단어를 인식하여 CSS로 변환해준다.

동적 스타일링 작성 방법 (in React)

• HTML의 className 속성 안에서 조건문 활용하기

<div
  className={`${isImportant ? "text-red-600 text-lg font-bold" : "text-black"}`}
></div>

• JavaScript를 사용하여 className 추가하거나 설정하기

// Script
if (isImporant) {
  document.querySelector(".title").className =
    "title text-red-600 text-lg font-bold";
} else {
  document.querySelector(".title").className = "title text-black";
}

// HTML
<h1 className="title">This is Title</h1>;

• 변수 및 함수 활용하기

// Script
const colors = {
  red: "text-red-600",
  black: "text-black",
};

const textSizes = {
  sm: "text-sm",
  md: "text-md",
  lg: "text-lg",
};

const coloredText = (color, size) => {
  return `${colors[color]} ${textSizes[size]}`;
};

//HTML
<h1 className={isImpotant ? coloredText(red, lg) : coloredText(black, sm)}>
  This is Title
</h1>;

• 컴포넌트화 하여 사용하기

// Script
const colors = {
  red: "text-red-600",
  black: "text-black",
};

const textSizes = {
  sm: "text-sm",
  md: "text-md",
  lg: "text-lg",
};

const Button = ({ color, size, children }) => {
  let textColor = colors[color];
  let textSize = textSizes[size];

  return <button className={`${textColor} ${textSize}`}>{children}</button>;
};
export default Button;

JIT 모드

• JIT 모드는 Just-In-Time 이라고 해서 스타일 변경사항을 즉시 렌더링 뷰에 적용하는 모드가 아니라 원하는 테일윈드 CSS 스타일명을 직접 생성할 수 있도록 해주는 모드다.
• JIT 모드는 필요한 CSS만 동적으로 생성하고, 빌드 시간을 줄이며, 결과 CSS 파일 크기를 작게 유지하는 역할을 한다. JIT 컴파일러를 사용하면 개발 과정에서 모든 가능한 클래스를 미리 생성하지 않고, 실제로 HTML에서 사용된 클래스만 생성하므로, 빌드 성능을 향상시키고 결과 CSS 파일의 크기를 줄일 수 있다.
• JIT 없이 커스텀 색상을 활용하려면 tailwind.config.js 파일의 theme 프로퍼티에 사용할 색상을 미리 정의해줘야 한다.
• JIT 모드를 사용하면 기존에 존재하지 않던 옵션을 직접 정의할 수 있다는 장점뿐만 아니라, 기본적으로는 테일윈드에서 지원하지 않는 before: invalid: required: 등의 선택자를 지원하는 등 여러 실험적인 기능의 지원을 받을 수 있다는 장점이 있다.

const { PALETTE } = require("./src/constants/palette")

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        customBlue: PALETTE.skyblue
      }
    }
  }
}

function App() {
  return (
	// 사전에 정의해둔 커스텀 색상을 활용합니다.
    <figure className="md:flex bg-customBlue rounded-xl p-8 md:p-0">
      ...
    </figure>
  );
}

export default App;

이렇게 하는 방법도 유용하지만 JIT 모드를 활용하면 훨씬 빠른 설정이 가능하다.

JIT 모드 설정하기

• JIT 모드 설정을 위해서는 tailwind.config.js에 mode: "jit" 이라는 속성을 직접 정의한 후 purge 설정에는 테일윈드를 적용할 모든 경로 및 파일을 지정해야 한다.(만약 JIT 모드 사용 시 purge를 빈 배열로 설정하면 tailwind css의 적용이 불가능하다.)

module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  mode: "jit"
}

function App() {
  return (
	// 속성명-[커스텀할 값] 으로 테일윈드 클래스명을 직접 커스텀할 수 있습니다.
    <figure className="md:flex bg-[#bae4f5] rounded-xl p-8 md:p-0">
      ...
    </figure>
  );
}

export default App;

참고 공식문서: https://v2.tailwindcss.com/docs/just-in-time-mode#overview

• 단점
  • JIT 모드를 적용해도 클래스명을 런타임 단계에서는 정의할 수 없다

@layer

• base 레이어는 리셋 규칙이나 HTML 요소 기본 스타일을 위한 레이어이다.

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  h1 {
    @apply text-red-950;
  }
 
  h2 {
    color: red;
  }
}

• components 레이어는 유틸리티로 재정의할 수 있는 클래스 기반 스타일을 위한 레이어다.

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer components {
  .select2-dropdown {
    @apply rounded-b-lg shadow-md;
  }
  .select2-search {
    @apply rounded border border-gray-300;
  }
  .select2-results__group {
    @apply text-lg font-bold text-gray-900;
  }
  /* ... */
}

• utilities 레이어는 다른 스타일보다 우선으로 하는 소규모 단일 목적 클래스를 위한 레이어다.

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}