Tailwind CSS 입문해 보았다 for Vue.js

이 기사는?

만나서 반가워요! 에비스에서 엔지니어를하고있는 Zak입니다.
최근 자주 Tailwind CSS를 듣게 되었습니다!
아무래도 CSS를 쓰는 양이 줄어들어 꽤 편해지는 걸까 🤔
개인적으로 CSS를 쓰는 것은 하고 싶지 않은 것 랭킹 3위에 들어갈 정도로 싫어서 흥미 본위로 사용해 보았습니다!
간단하게 셋업할 수 있었으므로 이번은 Vue3계에서 Tailwind CSS를 이용할 때까지의 흐름을 해설합니다💪

기본 코피페로 하면 OK라는 느낌으로 진행해 나가려고 생각합니다.
그럼 갑시다 👉

전제 조건 🧐

이미 Vue 프로젝트가 있는 즉시 작업을 시작합니다.
아직 프로젝트가 없는 분은 Vue3 환경을 30분 이내에 빨리 구축하고 싶다✨ 이쪽으로부터 부디!

실천 🚀

Step1. Tailwind CSS 설치

프로젝트 루트

# これは自分の環境の場合なので各自環境で適切なコマンドを実行してコンテナに入ります
% docker compose exec app bash

yarn에서 Tailwind CSS를 설치하지만 현재의 Tailwind CSS 최신 버전에 cli 측이 지원되지 않으므로 버전을 지정하여 설치합니다.

Docker 컨테이너 내

# 最新バージョンのインストールコマンド
% yarn add [email protected] [email protected] [email protected]

# バージョン指定のインストールコマンド
% yarn add [email protected]:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

Step2. Config 파일 만들기

다음 명령을 실행하여 tailwind.config.js postcss.config.js 파일을 생성합니다.

Docker 컨테이너 내

% npx tailwindcss init -p

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // ここだけ本番環境で不要スタイルが削除される設定にしておきます（おそらく任意）
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Step3. 글로벌 CSS에 Tailwind 포함

src/index.css

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

Step4. main 파일로 import 한다

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './index.css' // 追記

createApp(App).use(router).mount('#app')

지금까지 설정 완료입니다 ✨
조속히 사용합시다!

Step5. template 로 써 보자

우선 움직이고 있는 것을 확인하고 싶으므로 공식 PlayGround의 내용 복사합니다.

views/Sample.vue

<template>
  <div
    class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12"
  >
    <div class="relative py-3 sm:max-w-xl sm:mx-auto">
      <div
        class="
          absolute
          inset-0
          bg-gradient-to-r
          from-cyan-400
          to-sky-500
          shadow-lg
          transform
          -skew-y-6
          sm:skew-y-0
          sm:-rotate-6
          sm:rounded-3xl
        "
      ></div>
      <div
        class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20"
      >
        <div class="max-w-md mx-auto">
          <div>
            <img src="/img/logo.svg" class="h-7 sm:h-8" />
          </div>
          <div class="divide-y divide-gray-200">
            <div
              class="
                py-8
                text-base
                leading-6
                space-y-4
                text-gray-700
                sm:text-lg
                sm:leading-7
              "
            >
              <p>
                An advanced online playground for Tailwind CSS, including
                support for things like:
              </p>
              <ul class="list-disc space-y-2">
                <li class="flex items-start">
                  <span class="h-6 flex items-center sm:h-7">
                    <svg
                      class="flex-shrink-0 h-5 w-5 text-cyan-500"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                        clip-rule="evenodd"
                      />
                    </svg>
                  </span>
                  <p class="ml-2">
                    Customizing your
                    <code class="text-sm font-bold text-gray-900"
                      >tailwind.config.js</code
                    >
                    file
                  </p>
                </li>
                <li class="flex items-start">
                  <span class="h-6 flex items-center sm:h-7">
                    <svg
                      class="flex-shrink-0 h-5 w-5 text-cyan-500"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                        clip-rule="evenodd"
                      />
                    </svg>
                  </span>
                  <p class="ml-2">
                    Extracting classes with
                    <code class="text-sm font-bold text-gray-900">@apply</code>
                  </p>
                </li>
                <li class="flex items-start">
                  <span class="h-6 flex items-center sm:h-7">
                    <svg
                      class="flex-shrink-0 h-5 w-5 text-cyan-500"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                        clip-rule="evenodd"
                      />
                    </svg>
                  </span>
                  <p class="ml-2">Code completion with instant preview</p>
                </li>
              </ul>
              <p>
                Perfect for learning how the framework works, prototyping a new
                idea, or creating a demo to share online.
              </p>
            </div>
            <div
              class="pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7"
            >
              <p>Want to dig deeper into Tailwind?</p>
              <p>
                <a
                  href="https://tailwindcss.com/docs"
                  class="text-cyan-600 hover:text-cyan-700"
                >
                  Read the docs &rarr;
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

오! 움직이고 있는 ✨


더 자세히 알고 싶은 분은 치트 시트가있는 것 같기 때문에 이쪽으로부터 💁‍♂️
Tailwind Cheat Sheet

참고 기사
Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS