使用 Phoenix 安装 Tailwind CSS

在 Phoenix 项目中设置 Tailwind CSS。

创建你的项目

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

终端

mix phx.new myprojectcd myproject

安装 Tailwind 插件

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

mix.exs

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

配置 Tailwind 插件

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

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 别名，以便在部署时构建你的 CSS。

mix.exs

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

在开发环境中启用监视器

将 Tailwind 添加到你的 ./config/dev.exs 文件中的监视器列表中。

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。

终端

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>