使用 Phoenix 安装 Tailwind CSS

在 Phoenix 项目中设置 Tailwind CSS。

创建项目

如果还没有 Phoenix 项目，先创建一个。可以按照他们的 安装指南 开始。

Terminal

mix phx.new myproject
cd myproject

安装 Tailwind 插件

将 Tailwind 插件加入依赖，并运行 mix deps.get 安装。

配置 Tailwind 插件

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

更新部署脚本

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

在开发环境启用 watcher

在 ./config/dev.exs 的 watchers 列表中加入 Tailwind。

安装 Tailwind CSS

Terminal

mix tailwind.install

导入 Tailwind CSS

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

app.css

@import "tailwindcss";

移除默认 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 运行构建流程。

Terminal

mix phx.server

在项目中使用 Tailwind

index.html.heex

<h1 class="text-3xl font-bold underline">
  <!-- prettier-ignore -->
  Hello world!
</h1>