76. Installing Tailwind

vue cli start 링크open in new window

npm create vue@latest

프로젝트 링크

Tailwind 설치 방법

정작 템플릿이 Tailwind에서 정의한 많은 클래스를 사용하기 때문에 Tailwind 설치가 필요합니다.
애플리케이션에 동일한 스타일을 적용하려면 설치해야 합니다.
Vue 프로젝트에 Tailwind를 추가하는 두 가지 옵션이 있습니다.

첫번째 옵션은 index HTML 파일에서 스타일 시트를 링크하는 것입니다.
이것이 우리가 이전에 한 방법입니다.
이 방법은 괜찮지만, 이 프로젝트에는 적합하지 않습니다.
우리의 CSS 파일은 Vite에 의해 처리되어야 합니다.
이 프로젝트는 많은 코드를 포함할 것이므로 파일 크기가 커질 것입니다.
코드를 포함하여 CSS를 최적화할 모든 기회를 취해야 합니다.
코드를 Vite가 처리하게 하려면 다르게 해야 합니다.

그래서 우리는 두번째 옵션을 선택할 것입니다.
Tailwind는 NPM을 통해 설치할 수 있습니다.
더 좋은 것은 이 패키지에는 Tailwind에 대한 구성 파일을 만드는 데 도움이 되는 명령어가 포함되어 있다는 것입니다.
시도해 봅시다.

Tailwind Installopen in new window

npm install -D tailwindcss postcss autoprefixer

tailwindcss, postcss, autoprefixer 3개의 패키지를 설치하고 있습니다.
이들은 모두 Tailwind를 실행하는데 필요합니다.
Tailwind는 클래스를 생성하기 위해 postcss를 내부적으로 사용합니다.

다음 단계는 다음 명령어를 실행하는 것입니다.

npx tailwindcss init -p

이 명령어는 Tailwind와 PostCSS에 대한 구성 파일을 생성할 것입니다.
PostCSS 구성 파일은 특별한 것이 없습니다.
Tailwind 파일에 집중합시다.

tailwind.config.js

프로젝트의 루트 디렉토리에는 tailwind.config.js라는 새 파일이 있습니다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}

이것은 Tailwind를 구성하는 공식 파일입니다.
이 파일을 통해 JavaScript를 사용하여 Tailwind의 클래스를 수정할 수 있습니다.
이상하게 들릴 수 있지만, Tailwind는 CSS를 JavaScript로 변환하는 라이브러리인 PostCSS를 사용합니다.
Tailwind를 하나의 큰 PostCSS 플러그인으로 생각할 수 있습니다.
이것은 우리의 애플리케이션에 일련의 클래스를 주입할 것입니다.
우리는 색상, 브레이크 포인트, 폰트 패밀리 등을 수정할 수 있습니다.
함께 구성 설정을 살펴봅시다.

content

첫 번째 옵션은 content입니다.
번들링 과정 중에 Tailwind는 프로젝트 내에서 클래스를 검색할 것이고, 앱에서 사용하는 클래스 목록을 생성할 것입니다.
이 클래스들은 최종 번들에 추가될 것입니다.
Tailwind의 다른 클래스들은 번들을 생성하기 전에 제거될 것입니다.
번들을 생성하기 전에 Tailwind는 우리의 파일을 어디에서 찾을 수 있는지 알아야 합니다.
content 옵션은 Tailwind 클래스를 검색할 파일 목록이 있는 배열입니다.
기본적으로 이것은 비어있습니다.

설치 페이지로 돌아가봅시다.
이 페이지에서는 가이드에서 예제를 찾을 수 있습니다.

3단계에서 예제를 복사합니다.
다음으로 편집기로 돌아가서 content 배열에 항목을 붙여넣습니다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

배열에는 2가지 항목이 있습니다.
첫번째 항목은 index.html 파일이고, 두번째 항목은 패턴입니다.
Tailwind는 src 디렉토리의 모든 파일에서 클래스를 검색할 것입니다.
파일이 Vue 또는 JavaScript 확장자를 가지고 있다면, Tailwind는 이 파일들을 검색할 것입니다.
이것이 우리가 필요한 전부입니다.
다른 옵션들을 계속 살펴봅시다.

theme

그 다음에는 theme 옵션이 있습니다.
theme 옵션은 Tailwind의 색상, 글꼴 크기 및 기타 기능을 수정할 수 있는 곳입니다.

plugins

마지막으로 plugins 옵션이 있습니다.
이것은 Tailwind를 확장하기 위한 플러그인들의 배열입니다.
이 옵션들을 비워두면 Tailwind는 기본 구성을 사용할 것이며, 이는 대부분의 프로젝트에 적합합니다.
다행히도, 우리는 Tailwind를 맞춤 설정할 필요가 없습니다.
기본 클래스들은 우리의 목적에 적합할 것입니다.

Tailwind 클래스를 CSS 파일에 로드하기

src/assets 디렉토리의 base.css 파일을 엽니다.
원래 Vue는 기본 스타일을 만들기 위해 이 파일을 생성합니다.
파일에는 CSS 코드가 미리 채워져 있을 것입니다.
파일을 완전히 비웁니다.
그리고 base, components, utilities라는 세가지 지시문을 추가합니다.

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

이 지시문들은 Tailwind에 의해 생성된 것입니다.
이들은 우리 프로젝트에 Tailwind 클래스를 주입할 것입니다.
Tailwind 클래스는 자동으로 우리 프로젝트에 주입되지 않습니다.
우리는 어디에 스타일을 로드할지 알려줄 필요가 있습니다.
위 지시문들은 그 작업을 수행할 것입니다.

마지막 단계는 CSS 파일을 가져오는 것입니다.
main.ts 파일을 엽니다.
아직 이 파일에 대해 자세히 다루지 않았지만, 앞으로 이 파일에 대해 논의할 것입니다.
지금의 주요 목표는 우리 프로젝트의 CSS를 로드하는 것입니다.
import 구문 아래에서 base.css 파일을 가져옵니다.

// main.ts
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

/* main.css */
@import './base.css';

이렇게 함으로써 우리는 Tailwind를 설치했습니다.
시간이 조금 걸렸지만 그만한 가치가 있었습니다.
Tailwind는 매우 강력한 CSS 프레임워크입니다.
템플릿 스타일의 대부분은 이 프레임워크에 의존합니다.

# 76. Installing Tailwind

# Tailwind 설치 방법

# tailwind.config.js

# content

# theme

# plugins