tailwindcss version 4 에 대한 설정방법은 잘 노출되있지 않기에 여기에 기록한다.
프로젝트 루트 경로 기준
node -v
npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/main/resources/static/input.css -o ./src/main/resources/static/output.css --watch
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/output.css" rel="stylesheet">
</head>
package.json
{
"scripts": {
"build": "npx @tailwindcss/cli -i ./src/main/resources/static/input.css -o ./src/main/resources/static/output.css --minify",
"watch": "npx @tailwindcss/cli --watch -i ./src/main/resources/static/input.css -o ./src/main/resources/static/output.css --minify"
},
"dependencies": {
"@tailwindcss/cli": "^4.1.7",
"tailwindcss": "^4.1.7"
}
}
참고
시간대비효율