Durante estos días he estado probando un framework CSS que ya había visto en algún sitio (tutorial/vídeo), pero que nunca había trasteado y tenía ganas de hacerlo. El framework del que estoy hablando es Tailwind CSS. Un framework diferente que no es un kit UI, ni tiene un tema por defecto, ni componentes ya hechos (como Bootstrap o Bulma). Tú creas las interfaces a partir de las clases que te proporciona o con las clases que se generen a partir de sus plugins (si instalas alguno), lo cual me parecía muy interesante.
Como decía, durante estos últimos días he estado viendo cosas del framework en YouTube, viendo lo que han hecho otras personas con él y jugando un poco.
Hay una web muy interesante que a mí me ha servido mucho que se llama TailwindComponents que es un repositorio de componentes hechos con Tailwind CSS. Puedes ver desde clones de webs existentes (por ejemplo, Slack o WhatsApp) a pequeños componentes. Échale un vistazo, está muy bien.
También hay unos vídeos en YouTube que me gustan mucho que son los «Rebuilding X with Tailwind CSS«. Son vídeos que consisten en ir clonando una web que ya existe con Tailwind CSS, hay varias personas que hacen este tipo de vídeos. Uno de ellos es Adam Wathan (cocreador del framework) que tiene vídeos clonando Coinbase, Laravel.io y Netlify. Otro canal donde también podéis encontrar este estilo de vídeos es el de Andre Madarang.
De este estilo de vídeos y de TailwindComponents, me surgió como unas ganas de replicar una web con este framework para practicar. Estuve pensando y al final me decidí Reddit, ya que es un diseño simple y que me gusta. El resultado final es el siguiente:
Como podéis ver, el resultado final es bastante bueno aunque aún le faltan muchas cosas por mejorar y hacer, entre ellas, que sea responsive. Para ser lo primero que hago, estoy bastante satisfecho e iré mejorándolo para seguir practicando y aprendiendo a manejarme con este framework.
El código podéis encontrarlo en mí cuenta de GitHub. También podéis ver el resultado en vivo en mi cuenta de CodePen.
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR