CDN直読みからの卒業！Tailwind CSS導入で得た教訓

～生成ＡＩと戯れる！～

CDN直読みからの卒業！Tailwind CSS導入で得た教訓 CDN直読みからの卒業！Tailwind CSS導入で得た教訓

このブログサイトはTailwindCSSというCSSフレームワークを使用しています。
作者は元々プログラマーなので正直cssは疎いです。
とはいえ、cssの基本的な部分は押さえているつもりなので、
そういう意味ではTailwindCSSとは相性いいと思っています。

ただ、生成AIに言われるがまま

 
            
index.html


   <script src="https://cdn.tailwindcss.com"></script>

とすると、以下のようなwarningが表示されます。

cdn.tailwindcss.com should not be used in production.
To use Tailwind CSS in production, install it as a PostCSS plugin
or use the Tailwind CLI: https://TailwindCSS.com/docs/installation

要は本番環境ではPostCSSプラグインインストールするかTailwindCLI使った方がええで！って話

通常は普通にTailwindCLIをインストールして、指示通り進めればいけるはずなんですが。。。

TailwindCSS(4.0.0)をインストール

まずはメッセージにあるTailwindCSSのインストール画面にアクセスしてみるか。

Get started with Tailwind CSS

いくつか、インストール種類あるんやな。
どれがエエか、さっぱりわからん。

実はここでいくつかの方法でインストールしたりしているのですが、
今回はTailwindCLIを使うってことで進めます。

上部にある「Tailwind CLI」タブをクリックすると表示が切り替わるで。

まずはtailwindCSSとTailwindCSSCLIのインストールやね。


# npm install tailwindcss @tailwindcss/cli

あ、何故かnpmはインストールされていました。
今の環境だとほぼ必須ですかね。インストール方法は他のサイトでも見てください。
それとこの時インストールされたTailwindCSSのバージョンは4.0.0でした。
後述しますが、これがあかんかった。

問題なく入ったね。で、次はinput.cssを用意するんか。

 
            
src/input.css


@import "tailwindcss";

で次は、あ・・もう実行なんか？う～ん、まぁエエか。実行してみよ。


# npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

そうやな、watchモードやから監視よね。
Ctrl-Cで抜けて
・・・ファイル作成されていないぞ？

ようわからんな。ちょっとClaude3にでも聞いてみるか。

prompt
Tailwind CLIの使い方はわかりますか？
Claude（3.5Sonnet）
はい、Tailwind CLIの基本的な使い方についてご説明できます。
まず、プロジェクトにTailwind CLIをインストールするには:
・・（略）・・
これでtailwind.config.jsが作成されます。

あー、そうか、パス指定しないと対象のHTMLわからんわな。
言われた通り作成するで。

 
            
tailwind.config.js


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

今回はテストなのでsrc以下に静的htmlをおく想定でこうしています。
通常のlaravelですとresources/viewsとかを入れると思います。
拡張子も確認してくださいね。

Claude（3.5Sonnet）
次に、CSSファイルに以下のディレクティブを追加します:

なんかさっきと違うな？まぁエエか。更新と。

 
            
src/input.css


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

で、実行と。


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

実行できんで！エラーになったぞ？

これバージョン違うんじゃない？ちょっと聞いてみるか？

prompt
それはバージョンいくつの情報ですか？
Claude（3.5Sonnet）
申し訳ありませんが、私の知識は2024年4月時点のものです。実際のコマンドや構文は、Tailwind CSSのバージョンによって異なる可能性があります。
・・（略）・・

あー、そうかClaudeは2024年4月だから4.0.0知らんのかもしれんな。

ここでClaudeはCSS3系を使用していて、細かい設定等が変わっている可能性を指摘し、
最後にバージョンも聞いています。
ですが、4.0.0は知らないだろうし、そんなに仕様変わっていると思っていたので無視しました。

まぁエエわ。多分、コマンド変わっただけやろ。
コマンドの部分を変更して、これでどうや。


# npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

お、ファイル出来ている。
ちょっとこの出力されたcssをhtmlファイルに設定して見てみよう。
・
・

あかん、レイアウトもおかしいし、色もついとらん。

prompt
今、指定通りの設定を行いましたが、出力されたcssは基本的なものしかなく、
色やフォントなどの指定が全くありません。何がわるいのですか？

怒りのあまり、漢字変換できてない。。

Claude（3.5Sonnet）
カスタムクラスやスタイルが出力されていない主な原因として、以下の点を確認してみましょう：
1.contentの設定が適切かどうか

これは問題なしや。

Claude（3.5Sonnet）
2.HTMLやJSファイル内でTailwindのクラスを実際に使用しているか

これも一杯つかっているで。

Claude（3.5Sonnet）
3.ビルドコマンドが正しく実行されているか

一応あっているで。

ダウト！
3系と4系で違うのでコマンドは違っています。

Claude（3.5Sonnet）
実際のコードやファイル構成を共有していただければ、より具体的な解決方法をご提案できます。

なるほどちょっと確認してみるか。

prompt
まず入力するcssは以下のように設定します。
@tailwind base;
@tailwind components;
@tailwind utilities;
Claude（3.5Sonnet）
はい、input CSSファイルの内容は正しいですね。
次に、・・（略）・・

あっとるんやな、次はtailwind.config.jsや。同じようにやって、これも問題なし。HTMLの問題なんかな？ちょっと確認。

prompt
src/a.htmlに以下の内容で保存します。
Hello World
Claude（3.5Sonnet）
ファイルの内容に問題があります。HTMLファイルとして正しい構造になっていません。

あかん、タグ抜けている。。指摘された通りに更新してみるで。

 
            
a.html


<!DOCTYPE html>
<html>
<head>
    <link href="/src/output.css" rel="stylesheet">
</head>
<body>
    <div class="bg-blue-500 text-white font-sans">
        Hello World
    </div>
</body>
</html>

で、実行と。・・やっぱりダメやな。

あ～、わからん。とりあえず、関連するファイル全部載せてみるか。。

prompt
# more src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
# more src/a.html


<!DOCTYPE html>
<html>
<head>
:(略)
# npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css
≈ tailwindcss v4.0.0
Done in 182ms
# more src/output.css
/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
@tailwind base;
@tailwind components;
.absolute {

position: absolute;
}
:(略)
Claude（3.5Sonnet）
ファイルの内容に問題があります。・・（略）・・

あ～、しまった。設定ファイルをいじって元に戻すの忘れてた。

もう一回・・・あれ？

Claude（3.5Sonnet）
You are out of free messages until ...

Oh..使えなくなってしもうた。

内容を全部入れはよくなかったな。サイズが多すぎて上限超えたんやろな。
output.cssは"bg-blue-500"などの設定がないよって言えばいいだけなのにな。

仕方ない。DeepSeekを使おう。

prompt
sh-5.1# more src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
import defaultTheme from 'tailwindcss/defaultTheme';
:（略）
# more src/a.html
<!DOCTYPE html>
:（略）
# npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css
≈ tailwindcss v4.0.0
Done in 190ms
# grep "bg-blue-500" ./src/output.css
#
DeepSeek（R1）
It looks like you're trying to use Tailwind CSS to generate a CSS file ..

あかん、英語になった。

prompt
何故bg-blue-500が生成されないのか、わかりますか？
sh-5.1# more src/input.css
・・（以下略）・・
DeepSeek（R1）
bg-blue-500 が生成されない理由は、Tailwind CSS が src/a.html ファイルを正しくスキャンしていないためです。具体的には、tailwind.config.js の content 設定や、ファイルのパス、またはビルドプロセスに問題がある可能性があります。

ふむふむ、確認してみるか。

DeepSeek（R1）
1.content 設定の問題

これはさんざんやったから合っとるはずや。

DeepSeek（R1）
2. ファイルパスの問題

これも問題ないと思うで。

DeepSeek（R1）
3. ビルドプロセスの問題
npx @tailwindcss/cli を使って CSS を生成していますが、--watch オプションを指定していないため、ファイルの変更を自動的に検出していない可能性があります。

う～ん、ようわからんが、そうじゃないと思うで。

DeepSeek（R1）
4. キャッシュの問題

output.cssは何回も消したけど、なかったから違うなぁ。

DeepSeek（R1）
5. Tailwind CSS のバージョン問題
Tailwind CSS v4.0.0 を使用しているようですが、v4 はまだアルファ版またはベータ版の可能性があります。安定版の v3.x を使用することをお勧めします。

解決策:
Tailwind CSS を v3.x にダウングレードします。

ダウングレードか、やってみるか。

脳がだいぶ疲れていますね。
これ最新なので最初の設定と同じはずです。
つまり4.0.0が再度インストールされているという。。
でも、この時は気づいていません。。


#npm install tailwindcss@latest

で、実行と。実行コマンドは3.xで違うから、こうか。
Claude3も同じこと言ってたあ。


# npx tailwindcss -i ./src/input.css -o ./src/output.css
npm error could not determine executable to run
npm error A complete log of this run can be found in: /root/.npm/_logs/...

エラーになったど！プロンプトにそのまま送ったる！

DeepSeek（R1）
npm error could not determine executable to run というエラーは、npx が実行するべきコマンド（この場合は tailwindcss）を見つけられない場合に発生します。この問題は、以下のいずれかの原因が考えられます。
・・（略）・・

ここでまた、指摘された内容を確認し、そのフィードバックをDeepSeekに返しました。
DeepSeek側も言っていることはそれほど変わらないのですが、ダウングレードの部分が変わりました。

DeepSeek（R1）
Tailwind CSS のバージョン問題
Tailwind CSS v4.0.0 を使用しているようですが、v4 はまだアルファ版またはベータ版の可能性があります。安定版の v3.x を使用することをお勧めします。

解決策:
Tailwind CSS を v3.x にダウングレードします。

# npm install tailwindcss@3.3.3

またダウングレードか。今度はバージョン指定やな。これで実行してみる。


  # npx tailwindcss -i ./src/input.css -o ./src/output.css
  
  Rebuilding...
  
  Done in 154ms.
  # grep blue src/output.css 
  .bg-blue-500 {
  #

で、出た～！
バージョンの問題だったんか！

最終的に3.3系はレイアウトが崩れて使えていなかったので、
3.4系をインストールして事なきを得ました。

まとめ

今回は色々得るものがあったな。

1.AIに質問するときは要点まとめて
ソース全コピーとかやると無駄にリソース食うだけです。

2.AIにプログラム等を聞くときはバージョンに注意！
前提が違うと全然かみ合わないのでそこは認識合わせるようにしましょう。

生成AIは便利なんだけど、ちょっと返事が冗長だったり、読むのが疲れるな。
聞くときに返事の仕方を言っておいた方がいいかもしれない。
これは今後の課題かな。
ただ、今回は冗長のおかげでダウングレード見つけたって事もあるから一概には言えんが。

何はともあれ、CDN直読みから卒業出来てよかったで。