Tailwind CSS 개발환경 구성

기록일기📫·2021년 1월 10일
1
post-thumbnail

최근에 진행하게 된 팀프로젝트에서 UI Framework로 TailwindCSS를 사용하기로 했다!

아직 한글로 된 문서가 많이 없는것 같아 공유 차원에서 작성하였다. 😊😊

💡 postCSS를 이용한 개발환경 세팅 방법 공유 문서입니다.

💡 공식 가이드 문서는 여기서 확인하실 수 있습니다.


시작🙆


1. Project 폴더 구성한 후 초기화 후 필요한 모듈 설치

// project 초기화
npm init -y 

// 필요한 모듈들 설치
npm install tailwindcss@latest postcss@latest postcss-cli autoprefixer@latest

2. postcss.config.js 파일 생성

  • 경로를 정해서 파일을 생성하고 아래와 같이 수정한다.
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

3. CSS파일 생성

  • 경로를 정해서 style.css 파일을 생성하고 아래와 같이 수정한다.
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. package.json 파일 수정

  • 3에서 생성한 css파일의 경로와 build 후 생성될 css 파일의 위치를 반영하여 파일을 수정한다.
{
  "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"
  }
}

5. build script를 실행하여 css파일을 생성한다.

  • terminal에서 npm run build 를 실행한다.

빌드한 파일이 생겼는지 확인한다.




Test

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파일을 열었을때 다음과 같은 결과가 나오면 성공!

수고하셨습니다! 👏👏👏

0개의 댓글