1. 安装
  2. 使用 Phoenix 安装 Tailwind CSS

安装

使用 Phoenix 安装 Tailwind CSS

在 Phoenix 项目中设置 Tailwind CSS。

01

创建你的项目

如果你还没有设置项目,请先创建一个新的 Phoenix 项目。你可以按照他们的 安装指南进行设置和运行。

终端
mix phx.new myproject
cd myproject
02

安装 Tailwind 插件

将 Tailwind 插件添加到你的依赖项,并运行 mix deps.get 来安装它。

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

配置 Tailwind 插件

在你的 config/config.exs 文件中,你可以设置你想使用的 Tailwind CSS 版本,并自定义你的资源路径。

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

更新你的部署脚本

配置你的 assets.deploy 别名,以便在部署时构建你的 CSS。

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

在开发环境中启用监听器

在你的 ./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)]}
]
06

安装 Tailwind CSS

运行安装命令以下载独立的 Tailwind CLI。

终端
mix tailwind.install
07

导入 Tailwind CSS

./assets/css/app.css 中添加 @import,以导入 Tailwind CSS。

app.css
@import "tailwindcss";
08

移除默认的 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"
09

启动你的构建过程

使用 mix phx.server 运行你的构建过程。

终端
mix phx.server
10

开始在你的项目中使用 Tailwind

开始使用 Tailwind 的实用类来样式化你的内容。

index.html.heex
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
版权所有 © 2025 Tailwind Labs Inc.·商标政策