1. Tailwind CSS 개념 및 초기 설정

Tailwind CSS

 

Tailwind CSS는 클래스 기반의 CSS 프레임워크로, HTML 파일, JavaScript 컴포넌트 및 기타 템플릿 요소에 클래스를 적용하여 스타일을 지정합니다.

 

이후 빌드 과정을 통해 사용된 클래스들을 기반으로 최적화된 CSS 를 생성하여 재사용 가능하고 일관된 디자인을 쉽게 구현할 수 있습니다.

설치

 

// tailwindcss 설치
npm install -D tailwindcss

// tailwind.config.js 파일 프로젝트의 루트 디렉토리에 생성
npx tailwindcss init

config 파일 설정

 

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // tailwind.config.js 파일의 모든 템플릿 파일에 대한 경로를 추가합니다.
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

기본 CSS 파일 생성

@tailwind 지시문을 기본 CSS 파일에 추가합니다.

// src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

빌드 과정

 

// -i <file>: 빌드할 css 파일 경로
// -o <file>: 빌드후 저장될 css 파일 경로
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

사용 예시

 

<h1 class="text-3xl font-bold underline"> Hello world! </h1>

editor setting

Visual Studio Code용 "Tailwind CSS IntelliSense" 라는 공식 확장 프로그램이 존재하며 아래와 같은 기능 제공

• Autocomplete
• Linting
• Hover Previews
• Syntax Highlighting

Prettier 를 통한 자동 클래스 정렬 기능

우리는 권장 클래스 순서에 따라 클래스를 자동으로 정렬하는 Tailwind CSS 용 공식 Prettier 플러그인이 존재합니다.

 

정렬 방법 : https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted
플러그인 git 링크 : https://github.com/tailwindlabs/prettier-plugin-tailwindcss

Browser Support

Vendor Prefixes 자동 지원 필요한 경우 Autoprefixer 설치

 

---

참고

https://tailwindcss.com/docs/installation