Cài đặt Tailwind CSS với Phoenix

Thiết lập Tailwind CSS trong dự án Phoenix.

Tạo dự án của bạn

Bắt đầu bằng cách tạo một dự án Phoenix mới nếu bạn chưa thiết lập. Bạn có thể làm theo hướng dẫn cài đặt để bắt đầu.

Terminal

mix phx.new myprojectcd myproject

Cài đặt Tailwind plugin

Thêm Tailwind plugin vào dependencies và chạy mix deps.get để cài đặt.

mix.exs

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

Cấu hình Tailwind plugin

Trong file config/config.exs của bạn, bạn có thể thiết lập phiên bản Tailwind CSS muốn sử dụng và tùy chỉnh đường dẫn assets.

config.exs

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

Cập nhật deployment script

Cấu hình alias assets.deploy để build CSS khi triển khai.

mix.exs

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

Bật watcher trong môi trường development

Thêm Tailwind vào danh sách watchers trong file ./config/dev.exs của bạn.

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)]}]

Cài đặt Tailwind CSS

Chạy lệnh cài đặt để tải Tailwind CLI standalone.

Terminal

mix tailwind.install

Import Tailwind CSS

Thêm @import vào ./assets/css/app.css để import Tailwind CSS.

app.css

@import "tailwindcss";

Xóa CSS import mặc định

Xóa CSS import từ ./assets/js/app.js, vì Tailwind đang xử lý điều này cho bạn.

app.js

// Remove this line if you add your own CSS build pipeline (e.g postcss).import "../css/app.css"

Bắt đầu quá trình build

Chạy quá trình build với mix phx.server.

Terminal

mix phx.server

Bắt đầu sử dụng Tailwind trong dự án của bạn

Bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.

index.html.heex

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