지금 가장 각광받고 있는 tailwind CSS를 그누보드5.6.x에 적용하는 작업을 진행했습니다.

이 라이브러리가 기존 레거시 CDN방식이 아닌 NPM빌드방식으로 적용하기가 쉽지가 않은 것이라 접근이 쉽지 않았는데...(tailwind도 cdn방식이 가능하나 제한적이고 비추천)

npm +빌드 방식을 적용했습니다.
 

https://sir.kr/cmall/1752048959

데모 : https://demo.365ok.co.kr/tailwind/

CDN 방식(기존 bootstrap방식)과 npm+빌드 방식의 비교

(A) CDN 방식
<link href="https://cdn.tailwindcss.com"> 또는 <script src="...tailwindcss...">로 직접 불러옴
모든 Tailwind 유틸리티 클래스가 미리 포함되어 있음
HTML/PHP 파일을 수정하면 즉시 반영 (별도 빌드 필요 없음)
단점: 번들 크기가 크고, purge(미사용 클래스 제거) 불가, 커스텀 설정 어려움
(B) npm + 빌드 방식
npm install tailwindcss로 설치
tailwind.config.js, postcss.config.js 등 설정
npm run build 또는 npm run build:prod로
실제 HTML/PHP/JS에서 사용된 Tailwind 클래스만 추출해서
output.css 등으로 빌드(미사용 클래스는 제거)
빌드 후에야 CSS가 갱신됨

주요 특징은...

**Tailwind CSS 4.0** 기반의 현대적 디자인
**완전 반응형** 레이아웃 (모바일/태블릿/데스크톱)
**깔끔하고 미니멀한** UI/UX
**접근성** 고려한 디자인
**빠른 로딩** 속도

**dark/light mode 기본 지원
**커스터마이징** 용이

...

웹학교 컨텐츠몰

PHP포탈 / 문제은행 & 실시간 퀴즈 솔루션 / 가위바위보게임 / 파싱도구

By 웹학교