WEBVTT

00:00:01.056 --> 00:00:02.096 align:middle
¿Qué pasa con el CSS?

00:00:02.456 --> 00:00:06.116 align:middle
Eres libre de añadir el CSS que
quieras a app/styles/app.css.

00:00:06.756 --> 00:00:08.886 align:middle
Ese archivo ya está cargado en la página.

00:00:09.346 --> 00:00:11.346 align:middle
¿Quieres utilizar CSS de Bootstrap?

00:00:11.346 --> 00:00:13.646 align:middle
Consulta la documentación de
Asset Mapper sobre cómo hacerlo.

00:00:14.056 --> 00:00:19.816 align:middle
O, si quieres usar Sass, hay un
symfonycasts/sass-bundle para hacerlo fácilmente.

00:00:20.356 --> 00:00:22.966 align:middle
No obstante, te recomiendo que no te lances
a utilizar Sass demasiado rápido. Muchas

00:00:23.326 --> 00:00:27.406 align:middle
de las características por las que Sass es
famoso pueden hacerse ahora en CSS nativo,

00:00:27.406 --> 00:00:30.226 align:middle
como las variables CSS e
incluso el anidamiento CSS.

00:00:30.916 --> 00:00:33.306 align:middle
¿Cuál es mi elección
personal para un framework CSS?

00:00:33.646 --> 00:00:38.196 align:middle
Tailwind. Y parte de la razón es que
Tailwind es increíblemente popular.

00:00:38.196 --> 00:00:41.936 align:middle
Así que si buscas recursos o componentes
preconstruidos, vas a tener mucha

00:00:42.056 --> 00:00:44.336 align:middle
suerte si utilizas Tailwind.

00:00:44.926 --> 00:00:47.546 align:middle
Pero Tailwind es un poco
extraño en un sentido:

00:00:47.836 --> 00:00:51.526 align:middle
no es simplemente un gran archivo
CSS que colocas en tu página.

00:00:52.006 --> 00:00:57.566 align:middle
En su lugar, tiene un proceso de construcción que escanea tu
código en busca de todas las clases Tailwind que estés utilizando.

00:00:58.066 --> 00:01:02.006 align:middle
Luego vuelca un archivo CSS final que
sólo contiene el código que necesitas.

00:01:02.656 --> 00:01:05.006 align:middle
En el mundo Symfony, si
quieres utilizar Tailwind, hay

00:01:05.136 --> 00:01:07.266 align:middle
un bundle que lo hace realmente fácil.

00:01:07.776 --> 00:01:12.616 align:middle
Gira sobre tu terminal e instala un nuevo
paquete: composer require symfonycasts -

00:01:12.616 --> 00:01:19.376 align:middle
hey los conozco - tailwind-bundle:
Para este paquete,

00:01:19.376 --> 00:01:22.236 align:middle
la receta no hace nada más
que activar el nuevo bundle.

00:01:22.676 --> 00:01:25.946 align:middle
Para poner en marcha Tailwind,
una vez en tu proyecto, ejecuta:

00:01:26.036 --> 00:01:29.996 align:middle
php bin/console tailwind:init
Esto hace tres cosas.

00:01:29.996 --> 00:01:33.136 align:middle
En primer lugar, descarga un binario
de Tailwind en segundo plano,

00:01:33.366 --> 00:01:35.216 align:middle
algo en lo que nunca tendrás que pensar.

00:01:35.556 --> 00:01:39.846 align:middle
En segundo lugar, crea un archivo
tailwind.config.js en la raíz de nuestro proyecto.

00:01:40.256 --> 00:01:45.736 align:middle
Esto indica a Tailwind dónde tiene que buscar
en nuestro proyecto las clases CSS de Tailwind.

00:01:46.456 --> 00:01:51.206 align:middle
Y tercero, actualiza nuestro app.css
para añadir estas tres líneas.

00:01:51.516 --> 00:01:55.686 align:middle
Éstas serán sustituidas por el código real
de Tailwind en segundo plano por el binario.

00:01:55.686 --> 00:02:00.446 align:middle
Por último, hay que compilar Tailwind, así que
tenemos que ejecutar un comando para hacerlo:

00:02:00.446 --> 00:02:04.956 align:middle
php bin/console tailwind:build -w
Esto escanea nuestras plantillas

00:02:04.956 --> 00:02:07.656 align:middle
y genera el archivo CSS final en segundo plano.

00:02:08.126 --> 00:02:13.166 align:middle
El -w lo pone en modo "vigilar": en
lugar de construir una vez y salir,

00:02:13.416 --> 00:02:15.436 align:middle
vigila nuestras plantillas en busca de cambios.

00:02:15.826 --> 00:02:20.246 align:middle
Cuando detecte alguna actualización,
reconstruirá automáticamente el archivo CSS.

00:02:20.516 --> 00:02:21.546 align:middle
Lo veremos en un minuto.

00:02:22.146 --> 00:02:23.906 align:middle
Pero ya deberíamos ver una diferencia.

00:02:24.486 --> 00:02:25.856 align:middle
Vamos a la página de inicio.

00:02:27.156 --> 00:02:27.846 align:middle
¿Lo has visto?

00:02:28.146 --> 00:02:30.436 align:middle
El código base de Tailwind ha hecho un reset.

00:02:30.436 --> 00:02:33.566 align:middle
Por ejemplo, ¡nuestro h1 es ahora diminuto!

00:02:34.176 --> 00:02:35.336 align:middle
Vamos a probarlo de verdad.

00:02:35.756 --> 00:02:38.406 align:middle
Abre templates/main/homepage.html.twig.

00:02:38.916 --> 00:02:43.796 align:middle
Encima de h1, hazlo más grande
añadiendo una clase: text-2xl.

00:02:44.486 --> 00:02:50.256 align:middle
En cuanto guardemos eso, podrás ver que tailwind se
dio cuenta de nuestro cambio y reconstruyó el CSS.

00:02:50.256 --> 00:02:53.236 align:middle
Y cuando actualizamos, ¡se hizo más grande!

00:02:53.786 --> 00:02:59.766 align:middle
Nuestro archivo fuente app.css sigue siendo super
sencillo: sólo esas pocas líneas que vimos antes.

00:03:00.226 --> 00:03:05.086 align:middle
Pero mira el código fuente de la página y abre el
app.css que se está enviando a nuestros usuarios.

00:03:05.586 --> 00:03:07.526 align:middle
¡Es la versión construida de Tailwind!

00:03:08.066 --> 00:03:10.446 align:middle
Entre bastidores, existe cierta magia

00:03:10.506 --> 00:03:15.006 align:middle
que sustituye esas tres líneas de Tailwind
por el código CSS real de Tailwind.

00:03:15.516 --> 00:03:16.676 align:middle
Y... ¡eso es todo!

00:03:16.826 --> 00:03:18.176 align:middle
Simplemente funciona.

00:03:18.496 --> 00:03:21.656 align:middle
Aunque hay una forma más fácil y
automática de ejecutar Tailwind.

00:03:22.246 --> 00:03:24.676 align:middle
Pulsa Ctrl+C en el comando
Tailwind para detenerlo.

00:03:24.986 --> 00:03:29.676 align:middle
A continuación, en la raíz de nuestro proyecto,
crea un archivo llamado .symfony.local.yaml.

00:03:30.456 --> 00:03:34.366 align:middle
Se trata de un archivo de configuración para el
servidor web binario symfony que estamos utilizando.

00:03:34.856 --> 00:03:42.356 align:middle
Dentro, añade workers, tailwind, y luego cmd configurados
en una matriz con cada parte de un comando: symfony,

00:03:42.816 --> 00:03:48.786 align:middle
console, tailwind, build, --watch,
o podrías utilizar -w: es lo mismo.

00:03:49.396 --> 00:03:53.036 align:middle
Aún no he hablado de ello, pero en
lugar de ejecutar php bin/console,

00:03:53.556 --> 00:03:57.996 align:middle
también podemos ejecutar symfony console seguido de
cualquier comando para obtener el mismo resultado.

00:03:58.516 --> 00:04:01.596 align:middle
Hablaremos de por qué te conviene
hacerlo en un futuro tutorial.

00:04:01.596 --> 00:04:06.056 align:middle
Pero por ahora, considera que bin/console
y symfony console son lo mismo.

00:04:06.876 --> 00:04:10.766 align:middle
Además, al añadir esta clave workers,
significa que en lugar de que tengamos

00:04:10.766 --> 00:04:13.916 align:middle
que ejecutar el comando manualmente,
cuando iniciemos el servidor web symfony,

00:04:14.176 --> 00:04:16.276 align:middle
éste lo ejecutará por
nosotros en segundo plano.

00:04:16.876 --> 00:04:20.366 align:middle
Observa. En tu primera pestaña, pulsa
Ctrl+C para detener el servidor web...

00:04:20.546 --> 00:04:23.956 align:middle
y vuelve a ejecutar symfony serve para que
vea el nuevo archivo de configuración.

00:04:24.556 --> 00:04:26.416 align:middle
Observa: ¡ahí está!

00:04:26.696 --> 00:04:29.266 align:middle
¡Está ejecutando el comando
tailwind en segundo plano!

00:04:29.696 --> 00:04:31.596 align:middle
Podemos aprovecharnos de esto inmediatamente.

00:04:32.066 --> 00:04:38.366 align:middle
En homepage.html.twig, cambia
esto a text-4xl, gira y...

00:04:38.686 --> 00:04:43.256 align:middle
¡funciona! Ya ni siquiera tenemos que
pensar en el comando tailwind:build.

00:04:43.686 --> 00:04:46.786 align:middle
Y como vamos a estilizar con
Tailwind, elimina el fondo azul.

00:04:48.716 --> 00:04:53.016 align:middle
Vale, este tutorial no trata de Tailwind
ni de cómo diseñar un sitio web.

00:04:53.296 --> 00:04:57.226 align:middle
Créeme, no quieres que Ryan
dirija la carga del diseño web.

00:04:57.526 --> 00:05:00.016 align:middle
Pero sí quiero tener un sitio bonito...

00:05:00.246 --> 00:05:03.696 align:middle
y también es importante pasar por el
proceso de trabajar con un diseñador.

00:05:03.696 --> 00:05:08.316 align:middle
Así que imaginemos que otra persona ha
creado un diseño para nuestro sitio.

00:05:08.796 --> 00:05:12.996 align:middle
E incluso nos han dado algo de HTML con
clases de Tailwind para ese diseño.

00:05:13.546 --> 00:05:14.906 align:middle
Si descargas el código del curso,

00:05:15.106 --> 00:05:18.726 align:middle
en un directorio tutorial/templates/,
tenemos 3 plantillas.

00:05:19.186 --> 00:05:23.096 align:middle
Uno a uno, voy a copiar cada
archivo y pegarlo sobre el original.

00:05:23.596 --> 00:05:26.526 align:middle
No te preocupes, vamos a ver lo que
ocurre en cada uno de estos archivos.

00:05:27.296 --> 00:05:29.176 align:middle
Haz homepage.html.twig...

00:05:31.246 --> 00:05:33.386 align:middle
y finalmente show.html.twig. Voy a

00:05:33.386 --> 00:05:38.186 align:middle
borrar por completo el directorio tutorial/

00:05:38.186 --> 00:05:41.356 align:middle
para no confundirme y editar
las plantillas equivocadas.

00:05:41.876 --> 00:05:43.436 align:middle
Vale, ¡vamos a ver qué ha hecho esto!

00:05:43.596 --> 00:05:45.666 align:middle
Actualizar. ¡Tiene un aspecto precioso!

00:05:45.996 --> 00:05:48.326 align:middle
Me encanta trabajar dentro
de un diseño bonito.

00:05:48.886 --> 00:05:50.436 align:middle
Pero... algunas partes están rotas.

00:05:50.956 --> 00:05:55.676 align:middle
En homepage.html.twig, ésta es nuestra
cola de reparación de barcos...

00:05:56.016 --> 00:05:57.476 align:middle
que tiene buen aspecto...

00:05:57.616 --> 00:05:59.276 align:middle
¡pero no hay código Twig!

00:05:59.756 --> 00:06:04.646 align:middle
El estado está codificado, el nombre
está codificado y no hay bucle.

00:06:05.526 --> 00:06:08.456 align:middle
A continuación: tomemos nuestro
nuevo diseño y hagámoslo dinámico.

00:06:08.756 --> 00:06:11.816 align:middle
También aprenderemos a organizar
las cosas en parciales de plantilla

00:06:12.076 --> 00:06:14.826 align:middle
e introduciremos un enum
PHP, que son divertidos.