React : tailwind.css

Tailwind CSS

등장배경

CSS 프레임워크의 중요성

CSS 프레임워크는 웹 애플리케이션 개발에서 매우 중요

애플리케이션이 커질수록 CSS 관리가 점점 더 복잡

Tailwind CSS의 필요성

기존의 CSS-in-JS 라이브러리인 Styled-Components는 편리 but 성능 이슈와 클래스 네임 충돌 문제가 발생 가능성

=> Tailwind CSS는 이러한 복잡성을 줄이고, 보다 유연하고 직관적인 스타일링을 제공

유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 빠르고 쉽게 스타일링을 적용할 수 있는 클래스를 제공

Tailwind는 디자인 시스템을 직접 만들 수 있도록 도와주는 매우 가볍고, 사용하기 쉬운 CSS 프레임워크

Tailwind CSS의 주요 개념

Tailwind CSS의 주요 특징

유틸리티 클래스 : 특정 스타일 속성을 나타내는 짧고 간단한 CSS 클래스로, HTML 요소에 직접 적용하여 빠르고 쉽게 스타일링

Tailwind CSS는 이러한 유틸리티 클래스를 대량으로 제공하여, 별도의 CSS 작성 없이도 다양한 스타일을 구현
ex.) bg-blue-500은 배경색을 파란색으로, p-4는 패딩을 설정하는 유틸리티 클래스

• 유틸리티 퍼스트
  다양한 유틸리티 클래스를 제공하여, HTML 요소에 직접 클래스를 추가하는 방식으로 스타일링
  별도의 CSS 파일을 작성할 필요 없이, HTML 파일만으로도 충분히 스타일링이 가능
  
  
• 성능
  Tailwind CSS는 불필요한 스타일을 제거하고, 필요한 부분만 스타일을 적용하는 방식 => 성능 최적화 좋음 
  사용하지 않는 CSS를 제거 => 최종 빌드 파일 크기를 최소화 => 애플리케이션 로딩 속도 개선
  
  
• React와의 통합
  React와 완벽하게 통합되어, Tailwind CSS의 유틸리티 클래스를 쉽게 사용 가능
  Tailwind CSS는 React의 JSX 문법과 함께 사용 가능 => 스타일링 매우 간편
  클래스 네임 충돌 없이, 독립적인 컴포넌트 스타일링
  
  
• 커스터마이징
  Tailwind CSS는 기본 설정을 쉽게 커스터마이징 => 프로젝트에 맞는 디자인 시스템을 구축 가능
  Tailwind 설정 파일(tailwind.config.js)을 통해 색상, 폰트, 스페이싱 등 다양한 설정을 커스터마이징 가능
  다양한 설정 옵션을 제공하여, 프로젝트의 요구사항에 맞는 스타일링을 손쉽게 적용 가능
  
  

설치 및 기본 사용법

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: [],
}

 

기본 사용법

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

 

원하는 스타일이 궁금하면 tailwindcss 공식 사이트에서 검색

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

 

인증 예제의 header에 적용 및 비교

적용 전

// src > components > Header.jsx

<header
  style={{
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "0 20px",
    backgroundColor: "lightgray",
  }}
>

 

적용 후

<header className="flex justify-between items-center px-5 bg-gray-200">

Tailwind CSS와 Styled-Components 비교

설정 및 사용법 비교

Tailwind CSS : 유틸리티 클래스를 사용하여 간편하게 스타일링을 적용

<div className="bg-blue-500 text-white p-4">
  Hello, Tailwind CSS!
</div>

 

 

Styled-Components: JavaScript 파일 내에서 스타일을 정의하고, 컴포넌트에 직접 스타일을 적용

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 1rem;
`;

function App() {
  return <Button>Hello, Styled-Components!</Button>;
}

 

장단점 비교(정리)

Tailwind CSS

• 장점: 유틸리티 클래스 기반으로 간편한 사용, 성능 최적화, 커스터마이징 용이
• 단점: 클래스 네임이 길어질 수 있음, 프로젝트 초기 설정 필요

Styled-Components

• 장점: JavaScript 파일 내에서 스타일링 가능, 동적 스타일링 지원, 컴포넌트 기반 설계
• 단점: 초기 설정 및 학습 곡선, 스타일링 시 성능 이슈 발생 가능