Tailwind CSS

Tailwind CSS

---

테일윈드 CSS는 클래스 기반의 유틸리티 CSS 프레임워크이다. 개발자가 CSS를 작성하는 대신, 미리 정의된 클래스를 HTML에 적용하여 스타일을 지정할 수 있다. 이를 통해 스타일을 보다 모듈화 하고 유지보수하기 쉽게 만들 수 있다.
테일윈드 CSS는 PostCSS 버전 8의 플러그인 형태로 동작한다.

주요 특징

• 유틸리티 클래스: 각 클래스는 하나의 CSS 속성을 담당한다.
• 구성 가능성: 다양한 클래스를 조합하여 복잡한 스타일을 간단하게 구현할 수 있다.
• 커스터마이징: 설정 파일을 통해 Tailwind를 프로젝트에 맞게 조정할 수 있다.

Bootstrap과의 차이점

	Tailwind	Bootstrap
접근 방식	유틸리티 클래스 기반 모든 스타일링을 작은 클래스 단위로 처리하여, 필요한 스타일을 조합하여 사용한다	컴포넌트 기반 미리 정의된 스타일과 UI컴포넌트를 사용하여 빠르게 일관된 디자인을 구현할 수 있다
커스터마이징	설정 파일(tailwind.config.js)을 통해 거의 모든 부분을 커스터마이징할 수 있다 필요하지 않은 클래스는 제거하여 파일 크기를 줄일 수 있다	Sass 변수와 믹스인을 사용하여 테마를 커스터마이징할 수 있다. 그러나 미리 정의된 컴포넌트를 수정하는 데는 제한이 있다
학습곡선	처음에는 다소 복잡하게 느껴질 수 있지만, 유틸리티 클래스에 익숙해지면 매우 유연하고 강력하게 스타일링할 수 있다	사용하기 쉬운 컴포넌트를 제공하여, 초보자도 빠르게 UI를 구축할 수 있다. 그러나 커스터마이징의 한계가 있을 수 있다
파일 크기 및 성능	PurgeCSS와 함께 사용하여 실제로 사용된 클래스만 포함시키므로, 파일 크기가 매우 작아진다	모든 스타일과 컴포넌트를 포함하기 때문에, 상대적으로 파일 크기가 클 수 있다
독립성	JavaScript에 의존하지 않는다	일부 컴포넌트(모달, 툴팁 등)는 JavaScript에 의존한다

 
 

PostCSS

---

ES5 자바스크립트가 발전하여 ESNext 자바스크립트로 매년 그 기능을 확장해 왔듯이, CSS 분야에서도 '모듈화 된 CSS'라는 기치를 내 걸으며 PostCSS라는 이름의 새로운 스타일 언어와 이를 동작하게 하는 프로그램이 탄생했다.
 
PostCSS는 ESNext 자바스크립트의 바벨이 그러하듯이 다양한 플러그인을 자유롭게 장착할 수 있도록 하여, CSS 표준에 추가되기를 요청하는 많은 기능을 표준화 이전에 실험해 볼 수 있게 하였다. 이 과정에서 PostCSS는 원래 Saas/SCSS의 기능이었던 autoprefixer를 PostCSS 플러그인 형태로 만들었다.
 
PostCSS는 웹팩이 1차로 만든 CSS를 가공하여 최종 CSS를 생성해 내는 방법으로 동작한다. 즉, PostCSS는 웹팩의 플러그인이면서 그 자체는 자신의 PostCSS 플러그인을 동작시키는 프로그램이다. 
 

주요 특징:

• 플러그인 아키텍처: 다양한 플러그인을 조합하여 CSS의 기능을 확장할 수 있다.
• 모던 CSS 사용: 최신 CSS 기능을 사용할 수 있으며, 구형 브라우저와의 호환성을 유지할 수 있다.
• 성능 최적화: 코드 압축, 자동 접두사 추가 등 다양한 최적화 기능을 제공한다.

module.exports = {
  plugins: {
    // 플러그인명: 플러그인 설정
    tailwindcss: {},
  },
}

 
 

React 프로젝트에 적용하기

---

프로젝트 생성

리액트 프로젝트를 생성 후 필요한 라이브러리들을 설치한다.

// 리액트 프로젝트 생성
npx create-react-app my-project
cd my-project

// Tailwind CSS 설치
npm i -D tailwindcss postcss autoprefixer

// Tailwind 플러그인 설치
npm i -D daisyui @tailwindcss/line-clamp

Tailwind CSS 초기화

postcss.config.js 와 tailwind.config.js 파일을 생성한다.

npx tailwindcss init -p

구성 설정

// post.config.js

module.exports = {
  plugins: {
    tailwindcss: {
      config: './tailwind.config.js' // Tailwind CSS의 설정 파일 경로 지정
    },
    autoprefixer: {
      overrideBrowserslist: ['last 2 versions'], // Autoprefixer의 브라우저 호환성 설정
    },
  },
}

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}"
    ],
    theme: {
        extend: {},
    },
    /**
     * line-clamp- 으로 시작하는 클래스 이름을
     * 동적으로 조합하더라도 정상으로 동작하도록
     * 트리 쉐이킹 대상에서 제거하는 코드
     */
    safelist: [
        {pattern: /^line-clamp-(\d+)$/}
    ],
    plugins: [
        require('@tailwindcss/line-clamp'),
        require('daisyui')
    ],
}

Tailwind CSS를 글로벌 CSS 파일에 추가

프로젝트의 css 파일에 테일윈드의 기본 스타일을 추가한다. 일반적으로 src/index.css파일에 추가한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS 파일을 인덱스 파일에 포함

src/index.js 파일에서 css 파일을 포함한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';  // 여기서 Tailwind CSS가 포함된 CSS 파일을 가져온다
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Tailwind CSS 사용하기

import React from 'react';

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold text-gray-900">Hello, Tailwind CSS!</h1>
        <p className="mt-4 text-gray-600">This is a React project with Tailwind CSS integrated.</p>
      </div>
    </div>
  );
}

export default App;