Tailwind CSS 主页
  1. 安装
  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.1", 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>