Es un framework css para front-end ,instalaciòn:
-Manejo de estados hover ,focus.
-Ahorrar tiempo elegiendo clases.
-Cambios de forma segura.
npm install -D tailwindcss
npx tailwindcss init , crea una archivo tailwind config y las dependencias node.js.
-Introducimos el index dentro de la carpeta src creada ,ruta espesifica
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Creamos input.css dentro src una input.css y pegamos esto
@tailwind base;
@tailwind components;
@tailwind utilities;
Posteriormente ejecutamos el codigo para crear el output dentro de src
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Por ultimo pegamos debajo de meta el siguiente link , muyimportante es que este corriendo
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
El resultado final es que es muy parecido a boostrap5
<h1 class="bg-red-500 text-neutral-950">Curso profesional de Tailwind-CSS</h1>
Podemos crearnuesro propios objetos en colores ,rojo -claro
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
colors : {
'rojo-claro':'#FF262E',
}
},
},
plugins: [],
}
Rojo claro por ejemplo
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
colors : {
'rojo-claro':'#FF262E',
}
},
},
plugins: [],
}
Padding , mirar la documentaciòn para màs informaciòn
p-10">Curso profesional de Tailwind-CSS</h1>
Comenzamos a trabajar margin
ml-px margin-left: 1px;
m-0.5 margin: 0.125rem; /* 2px */
mx-0.5 margin-left: 0.125rem; /* 2px */
margin-right: 0.125rem; /* 2px */
my-0.5 margin-top: 0.125rem; /* 2px */
margin-bottom: 0.125rem; /* 2px */
Aplicamos gradiente
<div class="bg-gradient-to-r from-indigo-500 ...">Primer gradiente</div>
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ...">Segundo gradiente</div>
Aplicar un border
<div class="bg-amber-300 border-orange-500 border-8">FrontEnd</div>
Opacidad /50
<span class="bg-gradient-to-r from-red-500/50
Podemos añadir otra propiedad predeterminada
colors : {
'rojo-claro':'#FF262E',
},
width : {
'42': '170px',
}
Medidas al texto,podemos trabajar 1/3
<span class="text-4xl font-extrabold bg-clip-text ">FrontEnd</span>
Full debe estar dentro de div padre y nos sirve
<div class="h-[100px]">
<div class="bg-blue-400 h-full">Medidas</div>
<div class="bg-blue-400 h-full">Medidas</div>
</div>
Ejercio con seudoClases , after
<body class="bg-slate-800 p-10">
<div class="bg-yellow-300 w-32 p-3 rounded-md relative after:content-[''] after:absolute after:
left-32 after:border-8 after:border-transparent after:border-l-yellow-400 after:top-4">CLICK AQUI
</div>
Placeholder
<input class="border ml-2 px-2 placeholder:text-black placeholder:italic" type="text" placeholder
="Nombre:">
File
<input type="file" class="file:bg-red-900 file:border-0 file-rounded-lg file:text-white file:font
-semibold file:px-3 hover:file:bg-red-500">
Marker
<ol class="list-decimal ml-6 marker:text-lime-400 marker:font-bold">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
Selection
<p class="selection:bg-green-400 selection:text-red-50">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Earum repellat obcaecati porro iste, voluptas esse quibusdam quis, nesciunt
ratione veniam amet ipsum a magnam tenetur minima eligendi distinctio atque expedita!</p>
Agregamos un punto de quiebre adicional,dentro de extend ,lo extendemos.
theme: {
extend: {
screens:{
'tablet': '900px',
}
},
},
plugins: [],
Aplicdar a la tarjeta
<section class="xl:flex">
<div class="border-2 border-zinc-800 p-6 w-80 mx-auto mt-10 tablet:w-96">
<h2 class="text-xl font-bold sm:text-2xl tablet:text-3xl">Mi pagina</h2>
<p class="mt-4 md:text-2xl">Blog sobre programación</p>
</div>
</section>
Flexbox
