ayer estuve haciendo una página a la cual le aplique estilos con Tailwind (seguí la instalación de Tailwind por CLI) y todo andaba perfecto, los estilos se aplicaban perfectamente. Hoy vuelvo a prender mi PC para seguir con el proyecto y hay estilos que no se aplican:
<section>
<div class="min-h-screen">
<div
class="flex-auto pt-0 md:pt-[18rem] mb-20 text-center"
data-aos="fade-up"
data-aos-duration="2500"
>
<h2 class="text-3xl font-thin">Hi, My name is</h2>
<h1 class="text-6xl font-bold mb-5 text-red-500">
Firstname Lastname
</h1>
<h2 class="text-2xl pl-1.5 font-thin">And I'm a Web Developer</h2>
</div>
<!-- mas codigo -->
</div>
</section>
Me di cuenta de este error cuando intente que la página sea responsive, agregue un md:pt-[18rem] para que cuando supere los 768px le agregue al contener un padding top de 18rem, pero este nunca se aplicaba. Mis archivos de configuración de tailwind siguen igual que siempre:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}