Instalación
Configuración de Tailwind CSS en un proyecto Phoenix.
Comienza creando un nuevo proyecto Phoenix si aún no tienes uno configurado. Puedes seguir su guía de instalación para ponerte en marcha.
mix phx.new myprojectcd myprojectAñade el plugin de Tailwind a tus dependencias y ejecuta mix deps.get para instalarlo.
defp deps do [ # … {:tailwind, "~> 0.3", runtime: Mix.env() == :dev}, ]endEn tu archivo config/config.exs puedes establecer qué versión de Tailwind CSS deseas utilizar y personalizar tus rutas de recursos.
config :tailwind, version: "4.1.10", myproject: [ args: ~w( --input=assets/css/app.css --output=priv/static/assets/app.css ), cd: Path.expand("..", __DIR__) ]Configura tu alias assets.deploy para compilar tu CSS al implementar.
defp aliases do [ # … "assets.deploy": [ "tailwind myproject --minify", "esbuild myproject --minify", "phx.digest" ] ]endAñade Tailwind a tu lista de observadores (watchers) en tu archivo ./config/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)]}]Ejecuta el comando de instalación para descargar la CLI de Tailwind independiente.
mix tailwind.installAñade un @import a ./assets/css/app.css que importe Tailwind CSS.
@import "tailwindcss";Elimina la importación de CSS de ./assets/js/app.js, ya que Tailwind ahora se encarga de esto por ti.
// Remove this line if you add your own CSS build pipeline (e.g postcss).import "../css/app.css"Ejecuta tu proceso de compilación con mix phx.server.
mix phx.serverComienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.
<h1 class="text-3xl font-bold underline"> Hello world!</h1>