安装
在 Phoenix 项目中设置 Tailwind CSS。
如果你还没有设置项目,请先创建一个新的 Phoenix 项目。你可以按照他们的 安装指南进行设置和运行。
mix phx.new myprojectcd myproject
将 Tailwind 插件添加到你的依赖项,并运行 mix deps.get
来安装它。
defp deps do [ # … {:tailwind, "~> 0.3", runtime: Mix.env() == :dev}, ]end
在你的 config/config.exs
文件中,你可以设置你想使用的 Tailwind CSS 版本,并自定义你的资源路径。
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。
defp aliases do [ # … "assets.deploy": [ "tailwind myproject --minify", "esbuild myproject --minify", "phx.digest" ] ]end
在你的 ./config/dev.exs
文件中,将 Tailwind 添加到你的监听器列表中。
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 CLI。
mix tailwind.install
在 ./assets/css/app.css
中添加 @import
,以导入 Tailwind CSS。
@import "tailwindcss";
从 ./assets/js/app.js
中移除 CSS 导入,因为 Tailwind 现在会为你处理它。
// 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 的实用类来样式化你的内容。
<h1 class="text-3xl font-bold underline"> Hello world!</h1>