최근에 진행하게 된 팀프로젝트에서 UI Framework로 TailwindCSS를 사용하기로 했다!
아직 한글로 된 문서가 많이 없는것 같아 공유 차원에서 작성하였다. 😊😊
💡 postCSS를 이용한 개발환경 세팅 방법 공유 문서입니다.
💡 공식 가이드 문서는 여기서 확인하실 수 있습니다.
// project 초기화
npm init -y
// 필요한 모듈들 설치
npm install tailwindcss@latest postcss@latest postcss-cli autoprefixer@latest
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
/* 본인의 경로로 수정 */
"build": "postcss src/style.css -o public/style.css"
},
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.2.1",
"postcss": "^8.2.4",
"tailwindcss": "^2.0.2"
}
}
npm run build
를 실행한다.빌드한 파일이 생겼는지 확인한다.
HTML파일을 하나 만들어 생성된 css파일을 link시키고 다음 코드를 추가한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../public/style.css" />
</head>
<body>
<h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1>
</body>
</html>
HTML파일을 열었을때 다음과 같은 결과가 나오면 성공!
수고하셨습니다! 👏👏👏