[Tailwindcss를 활용한 UI제작 실무과정] 2일차. TailwindCSS 설치 및 환경 설정

1. CDN를 이용하여 Tailwind CSS 이용하기

<script src="//cdn.tailwindcss.com"></script>

 

2. Package 설치하여 Tailwind CSS 이용하기

2-1. Package Install

npm i -D tailwindcss

 

2-2. Tailwind CSS Intellisence

vscode extends로 Tailwind CSS Intellisence가 제공 되고 있습니다. Tailwind CSS IntelliSense 사용자에게 자동 완성, 구문 강조 표시 및 린팅과 같은 고급 기능을 제공하여 Tailwind 개발 환경을 향상시킵니다.

vscode Extends Tailwind CSS Intellisence

2-3. vs code 로컬 설정

Tailwind CSS Intellisence의 Details를 보면 vs code 설정을 추천하고 있습니다.

• files.association
  • files.associations 설정을 사용하여 VS Code가 Tailwind에서 항상 .css 파일을 열도록 지시합니다.

"files.associations": {
  "*.css": "tailwindcss"
}

• editor.quickSuggestions
  • 기본적으로 VS Code는 예를 들어 JSX 속성 값 내에서 "문자열" 콘텐츠를 편집할 때 완료를 트리거하지 않습니다. editor.quickSuggestions 설정을 업데이트하면 경험이 향상될 수 있습니다.

"editor.quickSuggestions": {
  "strings": true
}

• tailwindCSS.includeLanguages
  • 이 설정을 사용하면 추가 언어 지원을 추가할 수 있습니다. 각 항목의 키는 새 언어 ID이고 값은 원하는 새 언어(예: html, css 또는 javascript)에 따라 확장 내장 언어 중 하나입니다.

{
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}

 

2-4. Tailwind CSS 초기세팅

init 명령을 실행하면 tailwind.config.js 구성 파일이 프로젝트 루트 위치에 생성됩니다.

npx tailwindcss init

tailwind.config.js

module.exports = {
  content: [],
  theme: {
    extend: {},
  plugins: [],
};

 

2-5. 엔트리 파일 

엔트리 파일을 생성한 후 Base, Components, Utilities 디렉티브(Directive)를 불러오는 코드를 작성합니다.

entry.css

/* Tailwind 기본 스타일과 플러그인에 의해 등록된 모든 기본 스타일을 주입합니다. */
@tailwind base;

/* Tailwind 컴포넌트 클래스와 플러그인에 의해 등록된 컴포넌트 클래스를 주입합니다. */
@tailwind components;

/* Tailwind 유틸리티 클래스와 플러그인에 의해 등록된 모든 유틸리티 클래스를 주입합니다. */
@tailwind utilities;

 

2-6. Tailwind CSS 컴파일

tailwindcss 명령을 사용해 특정 디렉토리에 Tailwind CSS 파일을 빌드할 수 있습니다. 전체 모듈을 빌드하는 것이 아니라 사용한 CSS만 빌드 하기 때문에 프로젝트가 가볍다고 표현 할 수 있습니다.

tailwindcss -i entry.css -o style.css

 

이렇게 해서 Tailwind CSS에서 가장 어려운 환경 설정이 끝났습니다. 

---

이전글

2022.11.05 - [Frontend/Tailwind CSS] - [Tailwindcss를 활용한 UI제작 실무과정] 2일차. Tailwind CSS Intro

다음글