<body>
<p class="bg-amber-500 w-40 border-8 border-blue-700 p-1.5 m-4 box-content">
caja 1
</p>
<span class="bg-amber-500 w-40 border-8 border-blue-700 p-1.5 m-10 box-content inline-block">
caja 2
</span>
<body class="p-10">
<div class="grid grid-cols-4 gap-4">
<div class="bg-blue-400">01</div>
<div class="bg-blue-400">02</div>
<div class="bg-blue-400">03</div>
<div class="bg-blue-400">0u</div>
<div class="bg-blue-400">05</div>
<div class="bg-blue-400">06</div>
<div class="bg-blue-400">07</div>
<div class="bg-blue-400">08</div>
<div class="bg-blue-400">09</div>
</div>
</body>
Tema muy importante para crear diseños responsivos:
-Hacemos que nuestro entorno de trabajo cambio de color según dimensiones y el titulo del texto cambie tamaño de grande a pequeño según dimensión.
<body class="bg-yellow-300 sm:bg-blue-500 md:bg-red-500">
<h1 class="text-2xl font-bold">Curso Tailwind</h1>
</body>
Cambios personalizados
<h1 class="font-bold text-2xl min-[650px]:text-3xl min-[800px]:text-4xl">
Curso Tailwind
</h1>
Para que las columnas de adecuen según dimensión
<div class="p-4 grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
Media query de de columnas cambie a fila
<div class="flex flex-col gap-2 sm:flex-row">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
Container query para ordenas respecto al contenedor y no tamaño de la pantalla
overflow-hidden cuanto el contenedor sobresalga se esconderá
<div class="@container border-2 border-red-500 p-4 resize overflow-hidden">
<div class="flex flex-col gap-2 @sm:flex-row">
<div class="bg-cyan-400">1</div>
<div class="bg-amber-700">2</div>
<div class="bg-blue-500">3</div>
</div>
</div>
@import "tailwindcss";
@theme{
--breakpoint-sm: 27.75rem; /* 27.75rem × 16px = 444px */
--color-rojo-claro:#E7000B;
}
Pseudo Clases son los estados
Hover o pseudo clases
<button class="bg-sky-700 text-white px-5 py-2 rounded-full font-semibold hover:bg-sky-600">Aceptar</button>
Muy importante
Si queremos aplicar el estilo , debemos aplicar a la pseudo clase en este caso placeholder
--------------------------------------
<div class="mt-4">
<input type="text" placeholder="Nombre"
class="border border-gray-300 px-3 py-2 rounded-md placeholder:text-red-500 focus:outline-none focus:ring-2 focus:ring-sky-500">
</div>
Tomar en cuenta ,es opcional
Para que no se haga muy repetitivo pegar el condigo en el html podemos crear @apply .con la clase button.
.button {
@apply bg-green-500 text-white px-4 py-2 rounded-xl font-medium transition-colors duration-300 hover:bg-white hover:text-green-500 shadow-lg;
Modo darmode
Añadimos
<!DOCTYPE html>
<html lang="en" class="dark">
En import agregar
@custom-variant dark (&:where(.dark, .dark *));
