[교양] 그누보드 테마/스킨 등에 모바일 친화적인 Tailwind CLI를 적용하길 원하는 분들께 작은 정보가 되기를 소망하며 재미니를 통해 약간 글의 기초를 만들고 다듬어 보았습니다. (이미 다 알고 이용하고 계신 분이 많으시리라 생각되기도 하지만)

--------------------------

? 그누보드 테마/스킨등에 Tailwind CLI를 적용해야 하는 이유

PHP 기반의 그누보드 개발 환경에서 새로운 Node.js 환경을 도입하는 것이 다소 생소할 수 있습니다. 하지만 이는 웹 개발의 효율성과 최적화라는 큰 흐름을 따라가기 위한 자연스러운 과정입니다.

미래를 대비하기 위해, 왜 Tailwind CLI와 Node.js를 사용해야 하는지에 대한 핵심적인 이유를 먼저 설명드리겠습니다.

?️ Tailwind v4 & daisyUI v5: 3단계 적용 가이드

참고로, tailwind의 클래스들을 10배이상으로 축약해준 플러그인이 daisyui 입니다. 

이제 가장 단순하고 간소화된 최신 버전(Tailwind v4.x, daisyUI v5.x)의 설치 및 사용법입니다.

1. Node.js 환경 구축 (단 한 번)

최종 CSS 파일을 만들어줄 도구(CLI)를 실행하기 위해 Node.js를 설치해야 합니다.

1. Node.js 공식 홈페이지에서 **권장 버전(LTS)**을 다운로드하여 설치합니다.

2. 스킨 폴더에서 터미널(CMD, PowerShell)을 열고, 프로젝트 초기화 및 도구를 설치합니다.

Bash

# 1. Node.js 프로젝트 초기화 (package.json 파일 생성)
npm init -y

# 2. Tailwind와 daisyUI를 설치합니다. (@next는 최신 버전을 의미)
npm install -D tailwindcss@next daisyui@next

2. Input CSS 파일 준비 (두 줄의 마법)

이전 버전과 달리, 이제 최종 CSS를 요청하는 input.css 파일에는 단 두 줄만 있으면 됩니다.

./css/input.css와 같은 파일을 만들고 다음 내용을 작성합니다.

CSS

/* ./css/input.css */

@import "tailwindcss"; /* ? Tailwind CSS의 모든 유틸리티를 가져옵니다. */
@plugin "daisyui";    /* ? daisyUI 컴포넌트 스타일을 주입합니다. */

3. 최종 Output CSS 파일 생성 및 감시

이 명령어를 터미널에 입력하고 실행해두면, CSS 작업은 끝입니다.

Bash

npx tailwindcss -i ./css/input.css -o ./css/output.css --watch

• --watch 옵션 덕분에 이 창을 닫지 않고 켜두기만 하면, PHP 파일에서 클래스를 수정할 때마다 ./css/output.css 파일이 자동으로 업데이트됩니다.

• 그누보드 스킨에서는 이 output.css 파일만 <link> 태그로 로드하여 사용하시면 됩니다.

다른 아무것도 필요없고, input.css 만 수정하면 자동으로 output.css가 컴파일이 됩니다. 

이제 최종적으로 컴파일된 output.css만 링크 하면됩니다. 

(참고로 저의 경우는 조금 번거로와도 기존 default.css mobile.css style.css 등을 전혀 쓰지 않습니다. 목표는 모든 기능을 다 tw 베이스로 바꿔보는 것이기도 합니다. 누군가 의지가 있으시면 분들의 연합으로 누구는 게시판 누구는 회원가입 누구는 쪽지부분 등 이렇게 나눠서 해보면 정말로 현대적인 디자인을 누구나 만들고 이용할 수 있지 않을까 사료됩니다. )