2025년 기준: Astro와 Tailwind v4 완벽 세팅 가이드

2025년, 웹 개발의 새로운 표준

불과 1~2년 전만 해도 우리는 postcss.config.js, tailwind.config.js 등 수많은 설정 파일을 다뤄야 했습니다. 하지만 2025년 12월 현재, 웹 생태계는 ‘Zero Configuration’을 향해 완성되었습니다.

Astro는 버전 5.0을 안정적으로 서비스하고 있으며, Tailwind CSS v4는 이제 Rust 기반 엔진(Oxide)으로 빌드 타임을 0초 대(ms 단위)로 단축시켰습니다.

이 가이드에서는 TOPICDEEP 블로그가 어떤 스택으로 만들어졌는지, 그리고 여러분이 어떻게 10분 만에 이런 고성능 블로그를 만들 수 있는지 공유합니다.

---

1. 프로젝트 초기화 (Installation)

더 이상 복잡한 옵션을 고를 필요가 없습니다.

# 최신 Astro 프로젝트 생성 (2025 표준)
npm create astro@latest

설치 과정에서 How would you like to start your new project? 질문에는 ‘Empty’ 또는 ‘Blog Template’을 선택하세요. 우리는 가장 가벼운 상태에서 시작합니다.

---

2. Tailwind v4 연동 (CSS-in-JS의 종말)

2024년까지 tailwind.config.js에서 테마를 설정하던 방식은 구식이 되었습니다. 이제 CSS 파일 내부에서 @theme 지시어를 사용합니다.

/* src/styles/global.css */
@import "tailwindcss";

@theme {
  --color-brand: #2563EB;
  --font-sans: 'Pretendard Variable', sans-serif;
  
  /* 다크모드 설정이 더욱 직관적으로 변했습니다 */
  --color-bg-primary: #FFFFFF;
  --color-text-primary: #1F2937;
}

---

3. SEO와 성능 최적화 (Core Web Vitals)

구글의 INP(Interaction to Next Paint) 지표가 검색 순위의 핵심이 된 지금, Astro의 Island Architecture는 선택이 아닌 필수입니다.

자동화된 이미지 처리

본 블로그에 사용된 <ExternalImg /> 컴포넌트는 모든 외부 이미지를 빌드 타임에 최적화하여 WebP/AVIF 형식으로 변환합니다.

---
import { Image } from 'astro:assets';
---
<Image src={myImage} alt="Optimized Image" width={800} />

Content Layer API

수천 개의 MDX 파일도 Content Layer API를 통해 메모리 과부하 없이 즉시 로드됩니다. 이제 블로그에 1만 개의 글이 있어도 빌드 시간은 1분이 채 걸리지 않습니다.

---

콘텐츠에만 집중하세요

기술 스택을 고민하는 시간은 끝났습니다. 2025년의 도구들은 여러분이 오직 ‘글쓰기’라는 본질에만 집중할 수 있도록 돕습니다.

지금 바로 터미널을 열고 시작해보세요.

npm run dev

당신의 이야기가 세상에 퍼질 시간입니다.