使用 Phoenix 安裝 Tailwind CSS

在 Phoenix 專案中設定 Tailwind CSS。

建立你的專案

如果尚未設定，請先建立一個新的 Phoenix 專案。你可以依照他們的安裝指南來啟動並運行。

終端機

mix phx.new myprojectcd myproject

安裝 Tailwind 外掛

將 Tailwind 外掛新增至你的 dependencies，並執行 mix deps.get 來安裝它。

mix.exs

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

設定 Tailwind 外掛

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

config.exs

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

更新你的部署腳本

設定你的 assets.deploy alias，以便在部署時構建你的 CSS。

mix.exs

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

在開發環境中啟用 watcher

將 Tailwind 新增到你的 ./config/dev.exs 檔案中的 watcher 清單中。

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

執行 install 命令以下載獨立的 Tailwind CLI。

終端機

mix tailwind.install

匯入 Tailwind CSS

在 ./assets/css/app.css 中新增一個 @import，以匯入 Tailwind CSS。此外，告訴 Tailwind CSS 在哪裡掃描工具類別。

app.css

@import "tailwindcss" source("../..");

移除預設的 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 執行你的構建流程。

終端機

mix phx.server

開始在你的專案中使用 Tailwind

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

index.html.heex

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