Tailwindcssを導入 - kazu22002の技術覚書

Tailwindcssのドキュメントを参考に導入していきます。npmを導入済みの状態です。

Tailwind Cliでの確認

ドキュメントのまま実行するだけで確認できるところ

Install Tailwind CSS

ターミナルで実行

npm install -D tailwindcss
npx tailwindcss init

Configure your template paths

設定ファイルを編集。

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

contentにファイルを指定する理由は、必要なclassのみをcssに吐き出すため指定のファイルを読み込む必要があるからです。

Add the Tailwind directives to your CSS

input.cssファイルを作成し、読み込む処理を記載

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

Start the Tailwind CLI build process

ターミナルにて実行。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

output.cssが出力されます。watchオプションが付いているため、監視状態になっておりファイルが変更されるたびにoutput.cssが出力されます。

Start using Tailwind in your HTML

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

HTMLを作成します。ローカル環境でそのまま試す場合は、output.cssの出力場所をソースに配下において相対パスにして確認すると簡単です。

本番環境への適用

tailwindcss.com

本番環境へは最適化されたビルドファイルを適用することをお勧めします。

cssを書いている人でビルドされたファイルに馴染みがない人もいると思いますが、小さいファイルを作成してくれるおまじないと思って最初は使うしか思います。

ターミナルでコマンド実行

npx tailwindcss -o build.css --minify

ビルドされたファイルを読み込むことで使用できます。

<link href="build.css" rel="stylesheet">

導入の難易度

自分はlaravelにすでに入っていた状態から進めているため個別の導入はしたことはないですが、viteでの説明があるため導入しやすいと思います。

現代の技術から入った人たちにはビルドすることやpackage.jsonは普通かもしれないですね。自分はいまだにカスタマイズとかできる知識がないです。

ドキュメントがしっかりしているおかげで導入の難易度は低くなっていると思います。

Tailwindcssって便利？

正直使ってみないとわからないと思いますが、個人的には重宝しています。

cssファイル自体を触ることが極端に少なくなり、作業効率はかなり上がったと思っています。

共通パーツを作る際には「apply」を定義して使っており、複数回使用するcssの構成はまとめるようにしています。

Functions & Directives - Tailwind CSS

ただし、ほかのUIフレームワークと共存することは厳しいと思います。実際にvuetifyと合わせて使いましたが、ところどころ汚染されてvuetifyのサンプルと違う表示になり、無理やり修正したことがあります。

暇な時にぜひ試してみてください。