No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso B谩sico de Tailwind 2 y 3

Curso B谩sico de Tailwind 2 y 3

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Secci贸n de FAQS

20/29
Recursos

Aportes 10

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Contenido de FAQS en HTML

<div>
	<p class="">Pol铆tica de Cancelaci贸n</p>
	<p class="">
		Para estancias menores a una semana es importante avisar con 3 d铆as de
		anticipaci贸n, de caso contario ser谩 sancionado.
	</p>
</div>
<div>
	<p class="">M茅todos de pago</p>
	<p class="">
		Aceptamos distintos m茅todos de pago: VISA, MasterCard, American Express,
		Paypal y Binance
	</p>
</div>
<div>
	<p class="">Mascotas</p>
	<p class="">El tema de las mascotas depender谩 directamente del anfitri贸n.</p>
</div>
<div>
	<p class="">Informaci贸n de Seguridad</p>
	<p class="">
		Todas nuestras estancias cuentan con seguro en caso de accidentes
	</p>
</div>
<div>
	<p class="">Estancias Largas</p>
	<p class="">
		Contamos con estancias de hasta 3 meses, en este caso es requerido un
		anticipo con un monto del 50% del valor de la renta
	</p>
</div>

Yo agregu茅 otra card en 鈥淩entas Destacadas鈥 y cu谩ndo empec茅 con FAQS me qued贸 as铆.
Lo resolv铆 cambiando el 鈥減x-2 h-full w-full鈥 por "px-2 h-auto w-full"
As铆 el largo se va ajustando autom谩ticamente a medida que vayamos agregando cards (como en el width autom谩tico en la secci贸n de 鈥淩ecomendados鈥)

Clases de Tailwind y sus equivalentes en propiedad CSS vistas en esta clase:

  • w-fullwidth: 100%;
  • h-fullheight: 100%;
  • px-6padding-left: 1.5rem; padding-right: 1.5rem;
  • pt-2padding-top: 0.5rem;
  • mt-6margin-top: 1.5rem;
  • flexdisplay: flex;
  • flex-colflex-direction: column;
  • space-y-4margin-top: 1rem;
  • text-3xlfont-size: 1.875rem; line-height: 2.25rem;
  • text-xlfont-size: 1.25rem; line-height: 1.75rem;
  • font-semiboldfont-weight: 600;
  • font-mediumfont-weight: 500;

Secci贸n de FAQs en archivo index.html:


        <div class="w-full h-full px-6" id="faqs">
            <div class="w-full h-full flex flex-col space-y-4">
                <p class="text-3xl text-primary font-semibold mt-6">FAQs</p>
                <div>
                    <p class="text-xl font-semibold text-primary">Pol铆tica de Cancelaci贸n</p>
                    <p class="font-medium pt-2">Para estancias menores a una semana es importante avisar con 3 d铆as de anticipaci贸n, de caso contario ser谩 sancionado.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">M茅todos de pago</p>
                    <p class="font-medium pt-2">Aceptamos distintos m茅todos de pago: VISA, MasterCard, American Express, Paypal y Binance.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Mascotas</p>
                    <p class="font-medium pt-2">El tema de las mascotas depender谩 directamente del anfitri贸n.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Informaci贸n de Seguridad</p>
                    <p class="font-medium pt-2">Todas nuestras estancias cuentan con seguro en caso de accidentes.</p>
                </div>
                <div>
                    <p class="text-xl font-semibold text-primary">Estancias Largas</p>
                    <p class="font-medium pt-2">Contamos con estancias de hasta 3 meses, en este caso es requerido un anticipo con un monto del 50% del valor de la renta.</p>
                </div>
            </div>
        </div>


Cabe mencionar que text-md no existe en Tailwind (al parecer es de Bootstrap), en su lugar se puede usar font-medium.

Los que usen tailwind v3.
Ya no existe text-md cambiar a text-base

Peque帽o truco en visual estudio code si quieren generar todos los elementos rapidamente 馃榾:

(div>p{Payment Methods}+p{We accept VISA, MasterCard, American Express, paypal and Binance.})*4

Cuando quieres agregar m谩s de un elemento HTML puedes ocupar los snippets. Por ejemplo si necesitas 2 p谩rrafos, solo tecleas (al final enter)

p*2 

Y esto genera:

<p></p>
<p></p>

No puedo ver el resultado de lo que la profe programa 馃槨 primer curso que estoy cursando en el que esto sucede

Para no estar haciendo el comando de npm run tw:build cada que se hacen cambios en el archivo de configuraci贸n, se puede agregar --watch al final y esto estar谩 escuchando los cambios que se hagan y recargar谩 los archivos. Quedar铆a algo as铆:

 "tw:build": "tailwind -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch"
<div id="faqs" class="py-10 px-5 h-auto w-full">
            <h2 class="text-2xl mb-5 text-primary font-extrabold">FAQs</h2>
            <div class="w-ful h-full flex flex-col space-y-5">
                <!-- question inits -->
                <div class="">
                    <p class="text-primary text-sm font-extrabold mb-2">Payment Methods</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Cancellation Policy</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Long Stays</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance. <br>We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Long Stays</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance. <br>We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
                <!-- question inits -->
                <div>
                    <p class="text-primary text-sm font-extrabold mb-2">Long Stays</p>
                    <p class="font-semibold text-xs mr-10">We accept VISA, MasterCard, American Express, Paypal and Binance. <br>We accept VISA, MasterCard, American Express, Paypal and Binance.</p>
                </div>
                <!-- question ends -->
            </div>
        </div>

para poder agilizar conla maquetacion de tus paginas, puedes usar el sistema emmet, que esta puesto en vscode, si por ejemplo necesitas poner:

<div class=鈥減b-5鈥>hola<div>

enves de hacerlo a mano puedes hacer:

.pb-3{hola}

talves el ejemplo se vea no muy necesario, pero si son muchas mas clases que hay que poner es muy util y agiliza el trabajo.

les paso el link a su pagina si quieren aprender mas sobre este programa!

https://emmet.io/