【技術相談】Tailwind CLIを適用できない

kotowata commented 2 weeks ago

相談内容

現在CDNでTailwind CSSを利用しているが、検証ツールの警告から本番環境にCDNは非推奨と気づきました。

    （インデックス）:61 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 （匿名） @ （インデックス）:61

上記検証ツールの警告に従い https://tailwindcss.com/docs/installation の通り、ローカル環境でTailwindCLIをインストール作業実行してみたものの、うまく適用されていない様子で、今度は以下エラーが検証ツールに表示されます。

GET http://localhost:3000/assets/builds/application.css net::ERR_ABORTED 404 (Not Found)

正常にTailwind CSSが適用されるよう、他確認すべき点や実行すべきことなどご相談させていただきたいです。

エラーを受けてやったこと

(1) 公式ドキュメント通りにインストール＆CDN削除

こちらのドキュメントに従いインストール作業実施した https://tailwindcss.com/docs/installation

Install Tailwind CSS

以下の通りtailwindcssをインストール済みのこと確認できたので未実行、tailwind.config.jsも存在する

パッケージリスト

$ docker compose exec web npm list tailwindcss
app@ /myapp
└── tailwindcss@3.4.10

package.jsonファイル

{
  "name": "app",
  "private": true,
  "devDependencies": {
    "esbuild": "^0.23.0"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  },
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.5",
    "autoprefixer": "^10.4.20",
    "daisyui": "^4.12.10",
    "postcss": "^8.4.41",
    "tailwindcss": "^3.4.10"
  }
}

Configure your template paths

tailwind.config.js の内容を確認し、このままで問題なさそうと判断した

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js'
  ],
  plugins: [require("daisyui")],
}

Add the Tailwind directives to your CSS
- app/assets/stylesheets/application.tailwind.css の内容を確認し、このままで問題なさそうと判断した
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Start the Tailwind CLI build process

package.jsonに以下設定済みのため不要かなと思いつつも、念の為以下コマンドでCLIツールを実行

npx tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify

package.json

  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  },

Start using Tailwind in your HTML

application.html.erb を編集しCDNを削除、app/assets/builds/application.cssを読み込むよう設定

<!DOCTYPE html>
<html>
  <head>
    <title><%= page_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>

    <!--以下CDNの記載を削除-->
    <script src="https://cdn.tailwindcss.com"></script>

    <!--以下の設定を追記-->
    <link href="/assets/builds/application.css" rel="stylesheet">

    <%= stylesheet_link_tag "styles", "data-turbo-track": "reload" %>
    <%= display_meta_tags(default_meta_tags) %>
  </head>

(2) コンパイル済みのassetsを削除し、docker 再起動

$ docker compose exec web rails assets:clobber
I, [2024-09-23T11:33:40.352771 #103]  INFO -- : Removed /myapp/public/assets

(3) tailwind.config.js の修正

app/assets/builds/application.cssの読み込みに問題があるのかと判断し、 './app/assets/stylesheets/**/*.css',を'./app/assets/**/*.css'に変更した

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/**/*.css',
    './app/javascript/**/*.js'
  ],
  plugins: [require("daisyui")],
}

結果

上記(1) の通りTailwind CSSを実行したところ検証ツールに以下エラーが出ており、CSSが読み込めていないようです。

GET http://localhost:3000/assets/builds/application.css net::ERR_ABORTED 404 (Not Found)

Tailwidn cssのスタイル自体は適用されているので、古いアセットが残っているのかなと思い上記(2)の通りコンパイル済みのassetsを削除してみましたが結果は変わらりません。(3)実行後もエラーに変化ありませんでした。

上記、ご確認のほどよろしくお願いいたします。

Tsuchiya2 commented 1 week ago

CDNで期待している状態になっているようであれば、そちらで進めてしまって、本リリース後に時間をかけて移行していくのもありかと思いました。

rails new 時に CSSの指定を tailwindcss にしていればスムーズに移行できるかと思いますが、もしそうでなければ以下の記事や似たような記事を探してみて、いろいろ試してみてください。

https://zenn.dev/yoiyoicho/articles/410a7e3fd892b5

kotowata commented 1 week ago

コメントありがとうございます！ CDNで期待した状態にはなっていますので、ひとまず現状のまま本リリース目指そうと思います。（rails new 時に CSSの指定を tailwindcss にはしたのですが何やらうまくいかず、、後でいろいろ試してみます。）

kotowata / 20240729_art_app