Instalar Tailwind CSS con Phoenix

Configurando Tailwind CSS en un proyecto Phoenix.

Crea tu proyecto

Comienza creando un nuevo proyecto Phoenix si aún no tienes uno configurado. Puedes seguir su guía de instalación para empezar.

Terminal

mix phx.new myproject
cd myproject

Instala el plugin de Tailwind

Añade el plugin de Tailwind a tus dependencias y ejecuta mix deps.get para instalarlo.

mix.exs

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

Configura el plugin de Tailwind

En tu archivo config/config.exs puedes establecer qué versión de Tailwind CSS quieres usar y personalizar tus rutas de assets.

config.exs

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

Actualiza tu script de despliegue

Configura tu alias assets.deploy para construir tu CSS en el despliegue.

mix.exs

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

Habilita el watcher en desarrollo

Añade Tailwind a tu lista de watchers en tu archivo ./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)]}
]

Instala Tailwind CSS

Ejecuta el comando de instalación para descargar el CLI independiente de Tailwind.

Terminal

mix tailwind.install

Importa Tailwind CSS

Añade un @import a ./assets/css/app.css que importe Tailwind CSS.

app.css

@import "tailwindcss";

Elimina la importación de CSS por defecto

Elimina la importación de CSS de ./assets/js/app.js, ya que Tailwind ahora se encarga de esto por ti.

app.js

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

Inicia tu proceso de build

Ejecuta tu proceso de build con mix phx.server.

Terminal

mix phx.server

Comienza a usar Tailwind en tu proyecto

Comienza a usar las clases de utilidad de Tailwind para estilizar tu contenido.

index.html.heex

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