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 tailwindcss@latest postcss@latest autoprefixer@latest

# バージョン指定のインストールコマンド
% yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^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