Extraer componentes

Desde la v2.0 de Tailwind las pseudo clases como hover, focus y demas se pueden aplicar directamente con @apply

@apply Docs

.btn {
  @apply bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50;
}

Crear componentes; es otro de los superpoderes de Tailwind css, agrupando funcionalidad y reutilización.

.

en la version 2 me estaba dando un error al extraer shadow-outline y es porque esta clase la remplazaron por ring

Era que pongan esta clase al principio

Booom justo lo que veía que era lo malo de Tailwind de tener un html con muuuchas clases con la directiva @apply se soluciona!

Alguien sabe como hacer para que vscode deje de mostrar warnings por las directivas de Tailwind. Son un poco molestos

definitivamente me enamore de tailwind ❤️

Creo que esto es lo mas poderoso que tiene tailwind

Por si a alguien no le funciona, tiene que hacerlo de la siguiente manera:

.form-control {
  @apply w-full leading-snug placeholder-secondary text-gray-800 py-1 px-4 rounded bg-gray-300 border border-blue-300 hover:bg-white focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent;
}

Luego deben ir a su terminal y ejecutar npm run build y listo.

En el siguiente enlace pueden ver la documentación oficial de Tailwind.

• Hover, Focus, & Other States
  

Excelente, esto reduce considerablemente la cantidad de clases en el htm.

La directiva @apply es propia de tailwind o es el @apply de los mixins de postcss?

Excelente lección!

Super este poder.

Estuve desesperado todo el curso por aplicar esto porque en el reto ya lo habíamos aplicado.

Esto resuelve mi principal problema con Tailwind.

básicamente creo un tailwind dentro del mismo tailwind zD

f

Así llevo el mio

Estuvo genial la clase de componentes, gracias profesor.

para los compañeros falto poner el placeholder después . por si lo desean agregar ya que este no está en los componentes de tailwind.

Interesante el orden que se está usando la funcionalidad de los componentes, por que creo que si se hace diferente no funciona bien.

Crear tus propios componentes es súper fácil, me pregunto como puedo integrar todo esto con java enterprise para aplicaciones web.

Me gusto esta clase, crear Componentes esta increíble.

Aquí es donde evitamos tener que escribir todas las clases en la etiqueta html. Será un código mucho más limpio y fácil de leer.

Hasta aqui estaba pensando que esto era como Bootstrap pero ya con esta extraccion de componentes cambia la cosa no me imaginaba estas poniendo a todo Dios clases y clases, ahora si miro que lo pueda utilizar