Node.js를 이용해 테일윈드 css(Tailwind CSS)를 로컬(윈도우)에서 빌드하는 방법

Tailwind CSS를 CDN으로 연결하면 전체를 불러와 랜더링이 느려지는 단점을 필요한 것만 가져오는 node.js 빌드작업으로 해결이 가능합니다.하지만 Node.js가 지원되는 호스팅이 아닐때는 어쩔수 없이 윈도우에서 Node.js를 설치해 작업을 해야 하는데 크게 어렵지 않으니 한번만 해보시면 바로 적용이 가능할겁니다.

https://nodejs.org/ko/download 에서 윈도우용 Node.js를 받아야 하는데 설치형을 받아주면 됩니다.
본문 설명기준은 V4용이니 이점 알아두시고 아래 명령어 입력은 윈도우 cmd를 이용하면 됩니다.
* 윈도우 왼쪽 하단 찾기로 들어가 'cmd' 입력

/* cmd에서 아래와 같이 project라는 폴더를 만들어 주고 폴더로 진입 */
mkdir C:\project
cd C:\project

/* 패키지 생성후 Node.js 프로젝트에 Tailwind CSS 프레임워크와 이를 명령줄(CLI)에서 제어할 수 있는 도구를 설치 */
npm init -y
npm install tailwindcss @tailwindcss/cli

/* project안에 src하고 dist폴더를 만들어주고 src폴더에 input.css를 생성 */
project/
 ├── src/
 │    └── input.css
 └── dist/
     └── (비어있음)

/* input.css에 아래와 같이 입력 */
@import "tailwindcss" source("../");

/* project폴더에 tailwindcss가 적용된 파일을 몽땅 넣어주고 빌드를 해줍니다
첫번째가 비압축, 두번째가 압축 빌드명령입니다 */
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch 
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --minify

/* 명령어 입력하면 순식간에 dist폴더에 output.css가 생성되는데 업로드후
output.css만 그대로 업로드 */

dist/output.css

/* 적당한 경로에 아래처럼 경로를 지정 */
<link rel="stylesheet" href="./dist/output.css">

/* 기존 cdn으로 이용했다면  cdn에 해당하는 아래 부분을 삭제하거나 주석처리 */

<script src="https://cdn.tailwindcss.com"></script>

/* 만약 다크모드를 적용하기 위해 아래와 같은 코드가 삽입되어 있을 경우 삭제를 하거나 주석처리를 하고 */
<script>
tailwind.config = { darkMode: 'class' }
</script>

/* 기본 input.css에 삭제한 다크모드에 해당하는 설정을 추가후 빌드 */
@import "tailwindcss" source("../"); 
@custom-variant dark (&:where(.dark, .dark *));