在 Phoenix 中安裝 Tailwind CSS

在 Phoenix 專案中設定 Tailwind CSS。

建立你的專案

如果你還沒有設定專案，請先建立一個新的 Phoenix 專案。你可以按照他們的安裝指南來開始。

Terminal

mix phx.new myprojectcd myproject

安裝 Tailwind 外掛

將 Tailwind 外掛加入你的相依套件，然後執行 mix deps.get 來安裝它。

mix.exs

defp deps do  [    # …    {:tailwind, "~> 0.3", runtime: Mix.env() == :dev},  ]end

設定 Tailwind 外掛

在你的 config/config.exs 檔案中，你可以設定要使用哪個版本的 Tailwind CSS 並自訂你的資源路徑。

config.exs

config :tailwind,  version: "4.1.10",  myproject: [    args: ~w(      --input=assets/css/app.css      --output=priv/static/assets/app.css    ),    cd: Path.expand("..", __DIR__)  ]

更新你的部署腳本

設定你的 assets.deploy 別名，以便在部署時建置你的 CSS。

mix.exs

defp aliases do  [    # …    "assets.deploy": [      "tailwind myproject --minify",      "esbuild myproject --minify",      "phx.digest"    ]  ]end

在開發環境中啟用監視器

在你的 ./config/dev.exs 檔案中，將 Tailwind 加入監視器列表。

dev.exs

watchers: [  # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)  esbuild: {Esbuild, :install_and_run, [:myproject, ~w(--sourcemap=inline --watch)]},  tailwind: {Tailwind, :install_and_run, [:myproject, ~w(--watch)]}]

安裝 Tailwind CSS

執行安裝指令以下載獨立的 Tailwind CLI。

Terminal

mix tailwind.install

匯入 Tailwind CSS

在 ./assets/css/app.css 中加入 @import 來匯入 Tailwind CSS。

app.css

@import "tailwindcss";

移除預設的 CSS 匯入

從 ./assets/js/app.js 中移除 CSS 匯入，因為 Tailwind 現在會為你處理這件事。

app.js

// Remove this line if you add your own CSS build pipeline (e.g postcss).import "../css/app.css"

啟動你的建置流程

使用 mix phx.server 執行建置流程。

Terminal

mix phx.server

開始在專案中使用 Tailwind

開始使用 Tailwind 的通用類別來設定內容樣式。

index.html.heex

<h1 class="text-3xl font-bold underline">  Hello world!</h1>