在 Phoenix 项目中安装 Tailwind CSS

在 Phoenix 项目中设置 Tailwind CSS.

创建你的项目

首先，如果你还没有设置，请创建一个新的 Phoenix 项目。你可以按照他们的安装指南来快速启动和运行.

终端

mix phx.new myproject
cd 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.0.0",
  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

在开发环境中启用 watcher

在你的 ./config/dev.exs 文件中将 Tailwind 添加到 watcher 列表中.

dev.exs

watchers: [
  # 通过调用 Esbuild.install_and_run(:default, args) 启动 esbuild watcher
  esbuild: {Esbuild, :install_and_run, [:myproject, ~w(--sourcemap=inline --watch)]},
  tailwind: {Tailwind, :install_and_run, [:myproject, ~w(--watch)]}
]

安装 Tailwind CSS

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

终端

mix tailwind.install

导入 Tailwind CSS

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

app.css

@import "tailwindcss";

删除默认的 CSS 导入

从 ./assets/js/app.js 中删除 CSS 导入，因为 Tailwind 现在为你处理此问题.

app.js

// 如果你添加了自己的 CSS 构建管道（例如 postcss），请删除此行.
import "../css/app.css"

启动你的构建过程

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

终端

mix phx.server

开始在你的项目中使用 Tailwind

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

index.html.heex

<h1 class="text-3xl font-bold underline">
  你好, 世界！
</h1>