Tailwind CSS로 리액트 스타일링

byCode Keeper •


Tailwind CSS로 리액트 스타일링


리액트 애플리케이션을 스타일링할 때, Tailwind CSS는 유연하고 효율적인 도구로 자리 잡고 있습니다. 이 포스팅에서는 Tailwind CSS를 사용하여 리액트 컴포넌트를 스타일링하는 방법을 단계별로 설명하겠습니다.


Tailwind CSS의 중요성


Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 다음과 같은 장점을 제공합니다:

  • 모듈성: 필요한 스타일만을 적용하여 코드의 재사용성을 높일 수 있습니다.
  • 유연성: 클래스 이름을 통해 스타일을 직접 정의할 수 있어, 커스터마이징이 용이합니다.
  • 생산성 향상: 사전 정의된 유틸리티 클래스를 사용하여 빠르게 스타일링을 할 수 있습니다.

프로젝트 설정 및 Tailwind CSS 설치


Tailwind CSS를 리액트 프로젝트에 통합하기 위해 필요한 패키지를 설치합니다. 다음 명령어를 사용하여 프로젝트를 생성하고 Tailwind CSS를 설치합니다.


npx create-react-app my-tailwind-app --template typescript
cd my-tailwind-app
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwind CSS 구성


tailwind.config.js 파일을 수정하여 Tailwind CSS를 구성합니다.


// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Tailwind CSS 초기화


src/index.css 파일을 수정하여 Tailwind CSS를 초기화합니다.


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

Tailwind CSS를 사용한 컴포넌트 스타일링


이제 Tailwind CSS를 사용하여 리액트 컴포넌트를 스타일링하는 방법을 살펴보겠습니다.


버튼 컴포넌트 스타일링


먼저, 버튼 컴포넌트를 스타일링하는 예제를 살펴보겠습니다.


// src/components/Button.tsx
import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return (
    <button
      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      onClick={onClick}
    >
      {label}
    </button>
  );
};

export default Button;

위 코드에서는 className 속성을 사용하여 Tailwind CSS 유틸리티 클래스를 적용합니다. bg-blue-500, hover:bg-blue-700, text-white, font-bold, py-2, px-4, rounded 클래스가 버튼의 스타일을 정의합니다.


카드 컴포넌트 스타일링


다음으로, 카드 컴포넌트를 스타일링하는 예제를 살펴보겠습니다.


// src/components/Card.tsx
import React from 'react';

interface CardProps {
  title: string;
  description: string;
}

const Card: React.FC<CardProps> = ({ title, description }) => {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2">{title}</div>
        <p className="text-gray-700 text-base">{description}</p>
      </div>
    </div>
  );
};

export default Card;

위 코드에서는 max-w-sm, rounded, overflow-hidden, shadow-lg, px-6, py-4, font-bold, text-xl, mb-2, text-gray-700, text-base 클래스가 카드의 스타일을 정의합니다.


레이아웃 컴포넌트 스타일링


마지막으로, 레이아웃 컴포넌트를 스타일링하는 예제를 살펴보겠습니다.


// src/components/Layout.tsx
import React from 'react';

const Layout: React.FC = ({ children }) => {
  return (
    <div className="min-h-screen bg-gray-100 flex flex-col justify-center items-center">
      {children}
    </div>
  );
};

export default Layout;

위 코드에서는 min-h-screen, bg-gray-100, flex, flex-col, justify-center, items-center 클래스가 레이아웃의 스타일을 정의합니다.


전체 애플리케이션 구성


이제 작성한 컴포넌트를 메인 애플리케이션에 통합합니다.


// src/App.tsx
import React from 'react';
import Button from './components/Button';
import Card from './components/Card';
import Layout from './components/Layout';

const App: React.FC = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <Layout>
      <h1 className="text-3xl font-bold mb-6">React with Tailwind CSS</h1>
      <Card title="Card Title" description="This is a description of the card." />
      <Button label="Click Me" onClick={handleClick} />
    </Layout>
  );
};

export default App;

위 코드에서는 Layout, Card, Button 컴포넌트를 사용하여 전체 애플리케이션을 구성하고, Tailwind CSS 유틸리티 클래스를 적용하여 스타일을 지정합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Tailwind CSS를 사용하여 리액트 컴포넌트를 스타일링하는 방법에 대해 살펴보았습니다. Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 모듈성과 유연성을 제공하여 효율적으로 스타일링을 할 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전