Tailwind CSS로 워드프레스 테마 커스터마이징: 개발자 가이드

---

서론

워드프레스 테마를 손보다가 CSS 파일이 너무 방대해져서 손도 못 대겠다는 느낌, 한 번쯤 받아보셨죠? Tailwind CSS를 워드프레스에 도입하면 유틸리티 클래스 기반으로 깔끔하고 유지보수하기 쉬운 스타일링이 가능합니다. 이 글에서는 설치부터 실전 커스터마이징까지 단계별로 안내해 드립니다.

---

1. 환경 설정: Node.js와 npm 준비

Tailwind CSS는 Node.js 환경에서 동작합니다. 시작 전에 아래 조건을 확인하세요.

필수 준비물

• Node.js 18 이상 설치
• 워드프레스 로컬 개발 환경 (LocalWP 또는 XAMPP 권장)
• 코드 에디터 (VS Code 추천)

테마 폴더 초기화

워드프레스 테마 폴더(/wp-content/themes/my-theme/)로 이동한 뒤 터미널에서 아래 명령어를 실행합니다.

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.js 파일이 생성되면 기본 설정이 완료된 것입니다.

2. Tailwind CSS 워드프레스 연동 설정

단순히 설치만 해서는 워드프레스와 연동되지 않습니다. 빌드 파이프라인을 올바르게 연결해야 합니다.

tailwind.config.js 콘텐츠 경로 설정

module.exports = {
  content: [
    './**/*.php',
    './src/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

content 배열에 PHP 파일 경로를 반드시 포함해야 합니다. 이 설정이 없으면 사용하지 않는 클래스를 자동으로 제거하는 Purge 과정에서 실제로 쓰는 클래스까지 날아갈 수 있습니다.

CSS 파일 생성 및 빌드

/src/input.css 파일을 만들고 아래 내용을 입력합니다.

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

그런 다음 package.json의 스크립트 항목을 추가합니다.

"scripts": {
  "build": "tailwindcss -i ./src/input.css -o ./style.css --minify",
  "watch": "tailwindcss -i ./src/input.css -o ./style.css --watch"
}

개발 중에는 npm run watch, 배포 시에는 npm run build를 실행하세요.

---

3. 실전 커스터마이징: 테마 템플릿에 Tailwind 적용

연동이 완료됐다면 실제 PHP 템플릿 파일에 Tailwind 클래스를 적용해 봅니다.

헤더 영역 스타일링 예시

header.php 파일을 열고 기존 클래스 대신 Tailwind 유틸리티 클래스를 사용합니다.

<header class="bg-white shadow-md sticky top-0 z-50">
  <div class="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
    <a href="<?php echo home_url(); ?>" class="text-xl font-bold text-gray-800">
      <?php bloginfo('name'); ?>
    </a>
    <nav class="space-x-6 text-sm text-gray-600">
      <?php wp_nav_menu(['container' => false, 'menu_class' => 'flex space-x-6']); ?>
    </nav>
  </div>
</header>

커스텀 컴포넌트 추출 팁

반복적으로 사용하는 스타일은 @apply 지시어로 묶어 재사용성을 높일 수 있습니다.

/* input.css */
@layer components {
  .btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition;
  }
}

이렇게 정의하면 PHP 파일에서 class="btn-primary"만으로 일관된 버튼 스타일을 유지할 수 있습니다.

4. 배포 전 최적화 체크리스트

개발이 완료되면 아래 항목을 반드시 점검하세요.

항목	확인 방법
Purge 설정 완료	content 경로에 모든 PHP/JS 파일 포함 여부 확인
빌드 파일 최소화	--minify 옵션 적용 후 style.css 용량 확인
워드프레스 스타일 충돌	브라우저 개발자 도구에서 CSS 우선순위 점검
다크모드 대응	darkMode: 'class' 설정 및 테스트

주의사항: 워드프레스 기본 블록 에디터(구텐베르크)가 자체 스타일을 주입하기 때문에, functions.php에서 불필요한 기본 스타일을 제거하는 것도 권장합니다.

// functions.php
add_action('wp_enqueue_scripts', function() {
  wp_dequeue_style('wp-block-library');
});

결론

Tailwind CSS를 워드프레스에 연동하는 과정은 처음에는 낯설어 보이지만, 한 번 설정해 두면 이후 유지보수가 훨씬 쉬워집니다. 핵심은 콘텐츠 경로 설정 → 빌드 파이프라인 구성 → 실전 적용 → 배포 최적화 이 네 단계를 순서대로 따르는 것입니다.

지금 바로 로컬 개발 환경에서 테스트해 보시고, 궁금한 점은 댓글로 남겨주세요. 다음 글에서는 Tailwind CSS와 ACF(Advanced Custom Fields)를 함께 활용하는 방법도 다뤄볼 예정입니다. 🚀

함께 읽으면 좋은 글들

워드프레스 보안 설정 가이드: 초보자도 따라하는 5단계 필수 설정

워드프레스 블로그 수익화 전략 5가지 | 초보자도 월 100만원 버는 법

2026년 맥용 앱 TOP 10 – 생산성을 극대화하는 필수 macOS 앱 추천

해상도 총정리 | HD, FHD, QHD, UHD, 2K, 4K, 8K 차이와 픽셀 정보 한눈에