Установите Tailwind CSS с помощью Phoenix

Setting up Tailwind CSS in a Phoenix project.

Создайте свой проект

Начните с создания нового проекта Phoenix, если у вас его еще нет. Вы можете следовать их руководству по установке, чтобы приступить к работе.

Terminal

mix phx.new myprojectcd myproject

Установите плагин Tailwind

Добавьте плагин Tailwind в свои зависимости и запустите mix deps.get, чтобы установить его.

mix.exs

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

Настройте плагин Tailwind

В файле config/config.exs вы можете указать, какую версию Tailwind CSS вы хотите использовать, а также настроить пути к ресурсам.

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

Обновите свой сценарий развертывания

Настройте псевдоним assets.deploy для создания CSS при развертывании.

mix.exs

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

Включите наблюдателя в разработке

Добавьте Tailwind в список наблюдателей в файле ./config/dev.exs.

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

Установите Tailwind CSS

Запустите команду установки, чтобы загрузить автономный Tailwind CLI.

Terminal

mix tailwind.install

Импортируйте Tailwind CSS

Добавьте @import в ./assets/css/app.css, который импортирует Tailwind CSS.

app.css

@import "tailwindcss";

Удалите импорт CSS по умолчанию

Удалите импорт CSS из ./assets/js/app.js, так как 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 в своем проекте

Начните использовать классы утилиты Tailwind для стилизации своего контента.

index.html.heex

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