1. jekyll-tailwind 젬을 통한 환경 구축
Jekyll 프로젝트에서 Tailwind CSS 4를 사용하는 가장 간단한 방법은 jekyll-tailwind 젬을 활용하는 것입니다. 이 젬은 Jekyll의 빌드 프로세스에 직접 연결되어 작동하므로 개발자가 별도의 빌드 파이프라인을 관리할 필요가 없습니다.
- Gemfile 설정: gem "jekyll-tailwind", group: [:jekyll_plugins]를 추가하고 bundle install을 실행합니다.
- _config.yml 설정: plugins 목록에 jekyll-tailwind를 등록하고, tailwind 설정을 통해 입력 파일 경로(input)와 압축 여부(minify)를 지정합니다.
2. Tailwind CSS 4의 새로운 설정 패러다임: CSS-First
Tailwind CSS 4의 가장 큰 변화는 자바스크립트 설정 파일(tailwind.config.js)의 제거입니다. 대신 CSS 파일 내에서 모든 설정을 관리합니다.
- @theme 지시어: 테마 커스터마이징은 이제 CSS 내의 @theme 블록에서 이루어집니다. 예를 들어, --font-serif나 --breakpoint-md와 같은 변수를 정의하여 기본값을 덮어쓸 수 있습니다.
- @import “tailwindcss”: 단 한 줄의 임포트 문으로 모든 기본 유틸리티를 불러옵니다.
- 플러그인 통합: Typography나 Forms 플러그인은 npm으로 설치한 뒤, CSS 파일 내에서 @plugin 지시어를 사용하여 로드합니다. 이는 자바스크립트 설정보다 훨씬 명확한 의존성 관리를 가능하게 합니다.
3. 작동 원리 및 빌드 최적화
jekyll-tailwind 젬은 내부적으로 tailwindcss-ruby를 사용합니다. 이는 Rails 생태계에서 검증된 도구로, 별도의 Node.js 런타임 없이도(플러그인 미사용 시) Tailwind CLI를 실행할 수 있게 해줍니다.
- 자동 스캔: 빌드 과정에서 도구는 모든 HTML 및 Markdown 템플릿을 스캔하여 사용된 클래스 목록을 추출합니다.
- 트리 쉐이킹(Tree-shaking): 사용되지 않는 CSS 선언을 모두 제거하여 최종 결과물의 크기를 최소화합니다.
- 개발 편의성: bundle exec jekyll serve 실행 시 파일 변경을 감지하여 CSS를 즉시 재빌드하며, 이는 생산성 향상에 직결됩니다.
4. 적용 시 고려사항
이 설정 방식은 대부분의 Jekyll 사이트에 최적화되어 있습니다. 하지만 프로젝트에 Tailwind에서 제공하는 기능 이상의 복잡한 PostCSS 플러그인 체인이 필요하다면 별도의 빌드 도구를 고려해야 할 수도 있습니다. 그러나 일반적인 웹 개발 요구사항에서는 jekyll-tailwind만으로도 충분히 강력하고 가벼운 개발 환경을 유지할 수 있습니다.