Skip to content
Submitted about 2 years ago

Primera vez usando Tailwindcss sin media queries

Romina Galarza•20
@romina-gza
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hola!! Tuve problemas al intentar hacer que esta página sea responsive con tailwindcss. Por un momento pude hacer que funcionara pero al final no. Lo personalicé desde el archivo tailwind.config.js pero no funcionó.

  • Si comentas algun sitio que conozcas o video informativo sobre cómo usar media quieries con tailwindcss seria genial!

-Dejé un md:font-semibold en la parte que dice You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like! Agradecería el feedback, no estoy segura de porqué no funciona.

-Personalicé los breakpoints desde el archivo tailwind.config.js en la parte de theme {screens}.

-Y otro problema fue en GitHub, hasta el momento no sé si se puede hacer que desde el archivo public (donde está mi html y css) se muestre con GitHub Pages.

  • ¡Si conoces otra forma de instalar o/y usar tailwindcss sería estupendo comentarlo!

Cualquier comentario/feedback fuera de las preguntas en bienvenido.

Community feedback

  • Adriano•38,390
    @AdrianoEscarabotePosted about 2 years ago

    Hi Romina Galarza, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

    I noticed that you forgot the background image to add it in a simple and efficient way, we can use the background-color property on the body, and we will control it with background-size and background-position.

    To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is and follow the sequence h1-h5

    <h1 class="text-lime-500 mt-6 text-2xl font-black text-Dark-blue">Order Summary</h1>

    The rest is great!

    I hope it helps... 👍

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord