Tailwind CSS

Tailwind CSS의 필요성

기존의 CSS-in-JS 라이브러리인 Styled-Components는 편리하지만, 성능 이슈와 클래스 네임 충돌 문제가 발생할 수 있음. Tailwind CSS는 이러한 복잡성을 줄이고, 보다 유연하고 직관적인 스타일링을 제공

 

Tailwind CSS의 주요 특징

전통적인 CSS 프레임워크와 비교할 때, Tailwind CSS는 유연성과 커스터마이징의 용이성에서 큰 강점을 가지고 있음

• 유틸리티 퍼스트
  • 다양한 유틸리티 클래스를 제공하여, HTML 요소에 직접 클래스를 추가하는 방식으로 스타일링을 할 수 있음.
  • 유틸리티 클래스는 특정 스타일 속성을 나타내는 짧고 간단한 **CSS 클래스**로, HTML 요소에 직접 적용하여 빠르고 쉽게 스타일링을 할 수 있음.Tailwind CSS는 이러한 유틸리티 클래스를 대량으로 제공하여, 별도의 CSS 작성 없이도 다양한 스타일을 구현할 수 있음. 예를 들어, **bg-blue-500**은 배경색을 파란색으로, **p-4**는 패딩을 설정하는 유틸리티 클래스.
  • 별도의 CSS 파일을 작성할 필요 없이, HTML 파일만으로도 충분히 스타일링이 가능.
• 성능
  • Tailwind CSS는 불필요한 스타일을 제거하고, 필요한 부분만 스타일을 적용하는 방식으로 성능 최적화가 잘 되어 있음.
  • 사용하지 않는 CSS를 제거하여, 최종 빌드 파일 크기를 최소화할 수 있음.
  • Purging CSS는 사용하지 않는 CSS를 제거하여 최종 빌드 파일 크기를 줄이는 과정을 의미. Tailwind CSS는 이를 자동으로 처리해줌.
  • CSS 파일의 크기를 줄이고, 애플리케이션 로딩 속도를 개선 가능.
• React와의 통합
  • React와 완벽하게 통합되어, Tailwind CSS의 유틸리티 클래스를 쉽게 사용 가능.
  • Tailwind CSS는 React의 JSX 문법과 함께 사용할 수 있어, 스타일링이 매우 간편.
  • 예시 코드 <div className="bg-blue-500 text-white p-4"> Hello, Tailwind CSS! </div>
  • 클래스 네임 충돌 없이, 독립적인 컴포넌트 스타일링이 가능.
• 커스터마이징
  • Tailwind CSS는 기본 설정을 쉽게 커스터마이징할 수 있어, 프로젝트에 맞는 디자인 시스템을 구축 가능.
  • Tailwind 설정 파일(tailwind.config.js)을 통해 색상, 폰트, 스페이싱 등 다양한 설정을 커스터마이징 가능.
  • module.exports = { theme: { extend: { colors: { primary: '#1DA1F2', }, }, }, };
  • 다양한 설정 옵션을 제공하여, 프로젝트의 요구사항에 맞는 스타일링을 손쉽게 적용할 수 있음.

 

Tailwind CSS 설치

• yarn add tailwindcss postcss autoprefixer
• npx tailwindcss init -p

tailwind.config.js 변경

/** @type {import('tailwindcss').Config} */

export default {

  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

};

 

index.css 추가

@tailwind base;

@tailwind components;

@tailwind utilities;

 

적용 방법

tailwindcss 사이트에서 원하는 정보 검색 후 사용하면 됨.

적용전

    <header

      style={{

        display: "flex",

        justifyContent: "space-between",

        alignItems: "center",

        padding: "0 20px",

        backgroundColor: "lightgray",

      }}

    >

적용후

<header className="flex justify-between items-center px-20 bg-gray-300">

 

• Tailwind CSS: 유틸리티 클래스를 사용하여 간편하게 스타일링을 적용함.
• Styled-Components: JavaScript 파일 내에서 스타일을 정의하고, 컴포넌트에 직접 스타일을 적용함.

장단점 비교(정리)

• Tailwind CSS
  • 장점: 유틸리티 클래스 기반으로 간편한 사용, 성능 최적화, 커스터마이징 용이
  • 단점: 클래스 네임이 길어질 수 있음, 프로젝트 초기 설정 필요
• Styled-Components
  • 장점: JavaScript 파일 내에서 스타일링 가능, 동적 스타일링 지원, 컴포넌트 기반 설계
  • 단점: 초기 설정 및 학습 곡선, 스타일링 시 성능 이슈 발생 가능