[Tailwind CSS]

Tailwind CSS 시작 전

① 프로젝트 설정

1-1 Node.js와 npm 설치

bash

node -v
npm -v

먼저, Node.js와 npm이 설치되어 있는지 확인하기
설치되어 있지 않다면 Node.js 공식 웹사이트에서 설치 가능

> Node.js 공식 웹사이트 바로가기

1-2 프로젝트 디렉토리 생성 및 초기화

bash

mkdir my-tailwind-project
cd my-tailwind-project
npm init -y

1-3 Tailwind CSS 및 기타 종속성 설치

bash

npm install tailwindcss postcss autoprefixer

1-4 Tailwind CSS 설정 파일 생성

bash

npx tailwindcss init

---

② Tailwind 설정 파일 구성

tailwind.config.js 파일을 열어 수정한다.
Tailwind CSS가 스타일을 적용할 파일을 지정해야 한다.

js

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

③ PostCSS 설정 파일 생성

프로젝트 루트에 postcss.config.js 파일을 생성하고 다음 내용을 추가한다.

js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

④ CSS 파일 생성 및 Tailwind 디렉티브 추가

프로젝트의 스타일 파일을 생성하고 Tailwind의 기본, 컴포넌트, 유틸리티 스타일을 포함시킨다.
ex) src/styles.css

css

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

⑤ HTML 파일에 Tailwind CSS 적용

HTML 파일에서 Tailwind CSS를 사용하여 스타일을 적용한다.
ex) index.html

코드 예시 다음 회차에서 설명

⑥ Tailwind CSS 빌드

Tailwind CSS를 빌드하기 위해 package.json 파일에 스크립트를 추가한다.

json

{
  "scripts": {
    "build:css": "postcss src/styles.css -o dist/styles.css"
  }
}