스킬 frontend

Tailwind CSS React 헤더

Tailwind CSS로 반응형 React 헤더 만드는 법

tailwind-cssreactheaderresponsivefrontendcomponent

React 앱에서 Tailwind CSS를 이용해 반응형 헤더 컴포넌트를 만드는 방법을 알아보자. 로고와 내비게이션 링크를 포함한 기본적인 구조를 구성하는 스니펫이야.

import * as React from "react";
import { Link } from "react-router-dom";

function HeaderComponent() {
  return (
    <div className="flex flex-col md:flex-row justify-between items-center shadow-sm bg-white p-5">
      <Link to="/main" className="flex items-center gap-2 mb-4 md:mb-0">
        <div className="bg-black bg-opacity-10 w-10 h-10 rounded-[100px]" />
        <div className="text-black text-3xl font-medium leading-9">
          My Portfolio
        </div>
      </Link>
      <div className="flex gap-5">
        <Link to="/about" className="text-black text-base leading-6">About</Link>
        <Link to="/projects" className="text-black text-base leading-6">Projects</Link>
        <Link to="/contact" className="text-black text-base leading-6">Contact</Link>
      </div>
    </div>
  );
}

export default HeaderComponent;

flex flex-col md:flex-row: 모바일(기본)에서는 세로(flex-col), 데스크탑(md 이상)에서는 가로(flex-row)로 정렬해 반응형 레이아웃을 만든다.
justify-between items-center: 자식 요소들을 양 끝으로 정렬하고(justify-between), 세로 중앙에 배치한다(items-center).
mb-4 md:mb-0: 모바일에서 로고 아래 여백을 주고, 데스크탑에서는 여백을 없애는 클래스다.

여기서 배울 것

Tailwind CSS로 반응형 레이아웃 구성하기
React Router `Link` 컴포넌트 활용법
유연한 헤더 컴포넌트 구조 설계
모바일/데스크탑 반응형 디자인 처리

원본 파일 보기 (.claude/skills/tn-tailwind-css-header/SKILL.md)

---
name: Tailwind CSS React 헤더 컴포넌트
description: Use when the user asks to create a responsive header component for a React application, styled with Tailwind CSS, including a logo and navigation links.
version: 1.0.0
source: /home/son/prj/resume/backup_notes_260317/notion/Tech Note/Tailwind CSS Header d65dd10dcc094a709c39d4aca7d0efe6.md
---

# Tailwind CSS Header

import * as React from "react";
import { Link } from "react-router-dom";

function HeaderComponent() {
return (
<div className="flex justify-between items-center shadow-sm bg-white p-5 max-md:max-w-full max-md:flex-wrap">
<Link to="/main" className="flex items-center gap-2">
<div className="bg-black bg-opacity-10 flex w-10 h-10 rounded-[100px]" />
<div className="text-black text-3xl font-medium leading-9">
My Portfolio
</div>
</Link>

```
  <div className="flex gap-5">
    <Link to="/about" className="text-black text-base leading-6">About</Link>
    <Link to="/projects" className="text-black text-base leading-6">Projects</Link>
    <Link to="/contact" className="text-black text-base leading-6">Contact</Link>
  </div>
</div>

```

);
}

export default HeaderComponent;

**answer :** 

import * as React from "react";
import { Link } from "react-router-dom";

function HeaderComponent() {
return (
<div className="flex flex-col md:flex-row justify-between items-center shadow-sm bg-white p-5">
<Link to="/main" className="flex items-center gap-2 mb-4 md:mb-0">
<div className="bg-black bg-opacity-10 w-10 h-10 rounded-[100px]" />
<div className="text-black text-3xl font-medium leading-9">
My Portfolio
</div>
</Link>

```
  <div className="flex gap-5">
    <Link to="/about" className="text-black text-base leading-6">About</Link>
    <Link to="/projects" className="text-black text-base leading-6">Projects</Link>
    <Link to="/contact" className="text-black text-base leading-6">Contact</Link>
  </div>
</div>

```

);
}

export default HeaderComponent;