[Tailwind CSS] 기본 세팅

Im-possible·2025년 3월 11일

Tailwind CSS

유틸리티 기반 개발 방식으로 미리 세팅된 유틸리티 클래스를 HTML 코드 내에서 스타일링을 할 수 있다.
사용하지 않는 유틸리티는 output이 알아서 없애고 사용하는 유틸리티만 남겨 중복 코드를 줄일 수 있다.
Tailwind CSS 업데이트로 4버전 부터는 더이상 tailwind.config.js 파일 사용하지 않는다

기초 설정

Tailwind Extention 설치

Tailwind CSS IntelliSense

프로젝트에 Tailwindcss 패키지 설치

npm install tailwindcss @tailwindcss/cli --save-dev

파일 생성'

기본 파일

mkdir src src/assets src/styles src/scripts
touch src/index.html src/styles/input.css
echo {} > package.json

html

<link rel="stylesheet" href="./styles/output.css" />

input.css

@import "tailwindcss";

개발 서버 패키지 설치

npm i -D live-server npm-run-all

package.json에 scripts 필드 추가

빌드, 서버 관련 명령 등록
html 파일을 컴파일하면 input.css가 감지하고 output.css가 만들어진다. 이 과정이 build
/* 빌드 명령어 */
npx tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css
--watch 명령을 통해 컴파일 할 때마다 빌드를 해서 서버를 구동해준다.
{
  "scripts": {
    "dev": "run-p serve watch",
    "serve": "live-server ./src --port=8090 --host=localhost --no-browser",
    "tailwind": "tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css",
		"watch" : "npm run tailwind -- --watch"
  },
  "devDependencies": {
    "@tailwindcss/cli": "^4.0.12",
    "live-server": "^1.2.2",
    "npm-run-all": "^4.1.5",
    "tailwindcss": "^4.0.12"
  }
}

Git 관리

저장소 생성
git init
gitignore 파일 생성
npx add-gitignore node windows osx visualstudiocode

settings.json

{
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/.DS_Store": true,
    "**/Thumbs.db": true,
    "**/node_modules": false,
    "**/output.css": false
  },
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  },
  "files.watcherExclude": {
    "**/output.css": true
  }
}