Tailwind CSS home page
  1. Installation
  2. 在 Phoenix 中安装 Tailwind CSS

  1. 创建你的项目

    如果你还没有创建 Phoenix 项目，可以先创建一个新的项目。你可以参考他们的 安装指南 来开始使用。

    终端
    mix phx.new myprojectcd myproject

  2. 安装 Tailwind 插件

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

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

  3. 配置 Tailwind 插件

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

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

  4. 更新你的部署脚本

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

    mix.exs
    defp aliases do
  [
    setup: ["deps.get", "ecto.setup"],
    "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
    "ecto.reset": ["ecto.drop", "ecto.setup"],
    test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
    "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
  ]
end

  5. 在开发中启用监视器

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

    dev.exs
    watchers: [
  # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
  esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]

  6. 安装 Tailwind CSS

    运行安装命令以下载独立的 Tailwind CLI，并在 ./assets 目录中生成一个 tailwind.config.js 文件。

    终端
    mix tailwind.install

  7. 配置你的模板路径

    在你的 ./assets/tailwind.config.js 文件中添加所有模板文件的路径。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  8. 将 Tailwind 指令添加到你的 CSS 中

    将 Tailwind 的每个层的 @tailwind 指令添加到 ./assets/css/app.css

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

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

  10. 开始构建流程

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

    终端
    mix phx.server

  11. 开始在你的项目中使用 Tailwind

    开始使用 Tailwind 的工具类来为你的内容添加样式。

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