Tailwind CSS 설치 전에 이해해야 할 기본 전제
Tailwind CSS는 빌드 기반 도구라는 점부터 다르다
CDN 방식과 빌드 방식의 차이
Tailwind CSS는 CDN으로 바로 사용할 수도 있지만, 실무에서는 빌드 방식을 기준으로 사용하는 경우가 많습니다. 실제로는 사용한 클래스만 추출해 CSS를 생성하는 구조이기 때문입니다. 관리자 페이지나 서비스 화면처럼 규모가 있는 프로젝트에서는 빌드 기반 사용이 기본 전제로 보입니다.
Node.js 환경이 필요한 이유
Tailwind CSS는 PostCSS 플러그인으로 동작합니다. 따라서 Node.js 환경이 필요하며, npm이나 pnpm 같은 패키지 매니저를 통해 설치하는 흐름이 일반적입니다.
프론트엔드 프레임워크를 쓰지 않더라도, 빌드 단계만큼은 Node 기반으로 구성되는 편입니다.
실무 기준으로 권장되는 접근
테스트용이나 문서 작성 단계에서는 CDN도 충분할 수 있습니다. 다만 운영 환경까지 고려한다면, 처음부터 빌드 기반으로 접근하는 쪽이 안정적으로 보입니다.
이 글 역시 빌드 방식을 기준으로 설명을 이어갑니다.
기본 설치 흐름: 가장 단순한 셋업부터
프레임워크에 종속되지 않은 순수 설치 과정
패키지 설치
가장 기본적인 설치는 Tailwind CSS와 PostCSS, Autoprefixer를 함께 추가하는 방식입니다. 이는 프레임워크를 사용하지 않는 환경에서도 동일하게 적용됩니다.
아래 명령어는 npm을 기준으로 한 예시입니다.
npm install -D tailwindcss postcss autoprefixer
초기 설정 파일 생성
설치 후에는 Tailwind 설정 파일과 PostCSS 설정 파일을 생성합니다. 이 파일들이 빌드 동작의 기준이 됩니다.
설정 파일을 직접 작성할 수도 있으나, 초기에는 자동 생성 명령을 사용하는 편이 간단합니다.
npx tailwindcss init -p
설정 파일의 역할
tailwind.config.js는 디자인 토큰과 사용 범위를 정의하는 역할을 합니다. postcss.config.js는 Tailwind를 CSS 처리 과정에 연결하는 역할을 합니다.
이 두 파일이 준비되면 기본적인 빌드 구조는 갖춰진 상태로 볼 수 있습니다.
콘텐츠 경로 설정과 CSS 진입점 구성
사용한 클래스만 남기기 위한 핵심 설정
content 옵션 설정
Tailwind CSS는 content 옵션을 통해 어떤 파일을 스캔할지 결정합니다. 여기에 포함된 파일 안에서 사용한 클래스만 최종 CSS에 반영됩니다.
HTML, PHP, JS, 템플릿 파일 경로를 명확히 지정하는 것이 중요합니다.
module.exports = {
content: [
"./src/**/*.{html,js}",
"./templates/**/*.{html,php}"
],
theme: {
extend: {},
},
plugins: [],
}
CSS 진입 파일 구성
Tailwind CSS는 하나의 CSS 파일을 기준으로 유틸리티를 생성합니다. 이 파일에 Tailwind 지시자를 작성하는 방식이 기본 구조입니다.
보통 src/input.css 같은 이름으로 관리하는 경우가 많습니다.
@tailwind base; @tailwind components; @tailwind utilities;
빌드 결과물 관리
위 CSS 파일을 빌드하면 실제로 사용될 CSS 파일이 생성됩니다. 이 결과물만 서버에 배포하는 방식이 일반적입니다.
소스와 결과물을 분리해 관리하면 운영 단계에서 구조가 단순해지는 편입니다.
실무에서 자주 사용하는 빌드 방식
개발과 배포를 나누어 관리하는 흐름
CLI 기반 빌드 명령
프레임워크를 사용하지 않는 경우, Tailwind CLI만으로도 충분히 빌드가 가능합니다. 단일 명령으로 개발용과 배포용을 구분할 수 있습니다.
아래는 대표적인 빌드 명령 예시입니다.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Vite와 함께 사용하는 경우
Vite를 사용하는 환경에서는 Tailwind CSS가 자연스럽게 통합됩니다. 별도의 watch 명령 없이도 즉시 반영되는 개발 경험을 제공합니다.
관리자 페이지나 SPA 성격의 프로젝트에서는 이 조합이 자주 선택됩니다.
운영 환경에서의 빌드 전략
운영 서버에서는 빌드를 수행하지 않고, 미리 생성된 CSS 파일만 배포하는 구조가 안정적으로 보입니다.
이 방식은 서버 자원 사용을 줄이고 예측 가능한 결과물을 유지하는 데 도움이 됩니다.
초기 셋업 후 바로 해두면 좋은 설정들
규칙을 먼저 정리해두는 것이 장기적으로 편하다
spacing과 색상 기준 확장
프로젝트 성격에 맞게 spacing 단위나 색상 팔레트를 미리 확장해두면, 이후 화면 구성 속도가 안정됩니다.
기본 값을 그대로 쓰기보다, 서비스 기준에 맞게 정리하는 편이 실무에서는 도움이 됩니다.
공통 UI 패턴 정리
버튼, 카드, 테이블처럼 반복되는 UI는 클래스 조합을 기준으로 패턴화하는 것이 좋습니다.
초기에는 문서나 주석 형태로 정리해두어도 충분해 보입니다.
불필요한 커스터마이징 피하기
처음부터 과도하게 설정을 건드리기보다, 기본 구조에 익숙해진 후 확장하는 흐름이 안정적입니다.
Tailwind CSS는 기본값만으로도 충분히 많은 화면을 커버할 수 있습니다.
