Tailwind y Phoenix

Agregar Tailwind hoy, requiere pocos pasos

  • 753 - palabras
  • Publicado por Ivan Jaimes
  • 8 min

Tailwind y Phoenix

Tailwind es un marco (framework) CSS que empaqueta clases como flex, pt-4, text-center y rotate-90 para crear cualquier diseño usando la composición de clases, directamente en tu maquetado.

Tailwind v3 se se lanzó en diciembre del año pasado con algunas novedades geniales. Una de esas características es una nueva CLI Tailwind CSS "autónomo" (standalone) que incluye binarios pre-construidos para todas las plataformas principales. ¡Esto habilita todas las excelentes características de Tailwind sin la dependencia de node o npm en el sistema del usuario!

El generador de proyectos phx.new agregará soporte para Tailwind en una versión futura, pero agregar Tailwind hoy solo requiere unos pocos pasos rápidos gracias a una nueva biblioteca de elixir de Tailwind que el equipo de Phoenix acaba de lanzar. La biblioteca instala y ejecuta el cliente independiente para su sistema de destino, al igual que el soporte predeterminado de esbuild para los nuevos proyectos de Phoenix.

Primero, se agrega la dependencia al archivo mix.ex:

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

En el archivo config.exs, se establece qué versión de Tailwind CSS se desea usar, la ruta a la configuración de Tailwind y personalizar las rutas de assets.

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

Actualizar el escript de despliegue. Hay que agregar un alias para construir el CSS en el despliegue.

defp aliases do
  [
    "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
  ]
]

Agregar Tailwind a la lista de observadores en el archivo ./config/dev.exs.

config :my_app, MyAppWeb.Endpoint,
  ...,
  watchers: [
    ...,
    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
  ]

¡Eso es todo! ¡Ahora hay que iniciar el servidor y observar cómo Tailwind se descarga e instala automáticamente!

$ mix phx.server
[info] Running MyAppWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v3.0.7/tailwindcss-macos-x64
[info] Access MyAppWeb.Endpoint at http://localhost:4000
Rebuilding...
Done in 482ms.
[debug] Live reload: priv/static/assets/app.css

Lo anterior solamente es cierto hasta la versión 3.0.* de tailwind y la primer versión de la biblioteca de phoenix tailwind.

Para versiones más recientes

  1. Crear el proyecto

Es probable que ya se tenga un proyecto creado, pero en caso de que sea nuevo es más simple, solo hay que seguir la guía de instalación, en resumen para este punto solo es:

$ mix phx.new myproject
$ cd myproject
  1. Instalar el plugin de Tailwind CCS

Se debe añadir el plugin a las dependencias en el archivo mix.exs:

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

Nota: Hay que recordar ejecutar mix deps.get después del cambio en el archivo para que se instale.

  1. Configurar el plugin

Esto ya está explicado anteriormente, sin embargo para facilitar la ejecución se puede ver como sigue:

config :tailwind, version: "3.1.6", default: [
  args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
]
  1. Actualizar el script para desarrollo

Esto se logra configurando un alias para construir el CSS en cada despliegue:

defp aliases do
  [
    "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
  ]
]
  1. Habilitar observador (watcher) en desarrollo

Esto se hace agregando Tailwind a la lista de observadores en el archivo ./config/dev.exs:

watchers: [
  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]
  1. Instalar la dependencia

Se ejecuta el comando de instalación para descargar la CLI de Tailwind autónomo (standalone) y generar un archivo tailwind.config.js en el directorio ./assets

$ mix tailwind.install
  1. Se configuran las plantillas

Hay que agregar las rutas de las plantillas en el archivo ./assets/tailwind.config.js

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. Añadir directivas de Tailwind al CSS

Las directivas @tailwind de las capas de Tailwind se deben añadir al archivo ./assets/css/app.css

# assets/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Eliminar la importación por defecto de CSS

Hay que quitar el import del archivo ./assets/js/app.js, ya que Tailwind ahora se encarga de esto.

// assets/js/app.js  Se deben eliminar las siguientes líneas

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

Se ejecuta el proceso de compilación con mix phx.server

$ mix phx.server
  1. Tailwind en el proyecto

Ahora ya se pueden usar las clases de estilos de Tailwind para diseñar el contenido

# index.html.heex
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

Recursos