Tailwind cssを使ってみたらCSS/Vuetifyに戻りたくなくなった #Vue.js

Tailwind CSSとは？

Tailwind CSSは、CSSフレームワークの1つで、クラス名を使ってスタイリングを行うことができるため、HTMLコードとCSSコードの結合を防ぎ、保守性と開発効率を向上させることができます。

CSSでボタンを作る場合、以下のようにスタイルを定義する必要があります。

button.html

<button>Click me</button>

button.css

button {
  background-color: blue;
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
}

button:hover {
  background-color: darkblue;
}

一方、Tailwind CSSを使用する場合、以下のようにクラス名を追加するだけで同じデザインを実現できます。

vue.js

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

CSS vs Tailwind CSS

CSSとTailwind CSSを使用する場合のメリットとデメリットをそれぞれ5つずつ挙げます。

CSSのメリット

独自のスタイルを作成しやすい
セレクタの優先順位を明確に理解できる
既存のCSSフレームワークよりも軽量で、パフォーマンスが向上する可能性がある

全ての基礎。CSSフレームワークよりも軽量というのは確かに考えていませんでしたが、重さが大事なプロジェクトだと考慮が必要かもしれないですね

Tailwind CSSのメリット

クラス名を使用して、簡単にスタイリングを行うことができる
ほとんどのCSSのようにファイルを分割しないため、開発効率が上がる
コードが短くなり、保守性が向上する可能性がある
既存のスタイルを再利用できるため、開発効率が向上する可能性がある
レスポンシブ対応やダークモード対応にも秀でている
基本的にCSSをパワーアップさせたもののイメージです。
VuetifyやMUIほどのスピード力はないですが、CSSやSCSSと比べるとかなり早く実装ができます。
カスタマイズのしやすさもピカイチです。

Vuetifyのメリット

コンポーネントベースのフレームワークであるため、再利用性が高く、開発効率が向上します
レスポンシブ対応、アニメーション、テーマなど、様々な機能を豊富に備えています
コンポーネントのデザインが統一されており、プロジェクト全体で一貫性のあるUIを実現できます
Vue.jsに統合されているため、Vue.jsの機能との親和性が高く、シームレスに使用することができます

デザインの一貫性と、何よりもスピードがチーターです。
ただカスタマイズがかなりしずらいため、なんとなくのデザインや個人開発、POC段階のプロジェクト、スピード重視のプロジェクトなどにはかなり向いている一方、px単位でのデザイン調整が必要なプロジェクトには向いてないかもしれません。

以上が、CSSとTailwind CSSを使用する場合のメリットとデメリットです。

個人的に本当に楽だと感じたのは、クラス名を考える手間が不要なことも挙げられると思います。

複雑なプロジェクトになればなるほど、クラス名の競合を考慮して適切なクラス名を考えなくてはならず、場合によっては以前定義したクラス名を変更する必要まであるので、この手間がなくなるのは革命的でした。

Vue3への導入方法

Vue.js 3では、Vue CLIを使用してTailwind CSSを簡単に導入することができます。以下の手順に従って、導入を行ってください。

コマンドプロンプトを開き、以下のコマンドを実行します。

npm i tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -pコマンドを実行して、tailwind.config.js , postcss.config.jsファイルを作成します。

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: [],
}

main.jsファイルを開き、以下のコードを追加します。

import './index.css'

srcフォルダにindex.cssファイルを作成し、以下のコードを追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

これで、Tailwind CSSがVue 3プロジェクトに導入されました。

簡単な使い方例

以下のコードは、Vue 3でTailwind CSSを使用して、ボタンを作成する例です。

<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Click me
  </button>
</template>

このように、Tailwind CSSを使用することで、HTMLコードに直接スタイリングのためのクラス名を追加することができます。

終わりに

実は最近Chat GPTなどにハマっていて、概要はほとんどNotion AIに書かせているので20分ほどで記事が完成しました。

ただちょくちょくわかりづらい説明や重複する箇所があったため、ちゃんと精査する必要はありました。

詳しくはこちらを見てみてください！