/
Gists
/
Tailwind CSS
Gists - Tailwind CSS
On gists
Dynamic variants
•
Tailwind CSS
tailwind.config.js #
// https://tailwindcss.com/docs/plugins#static-variants
// https://tallpad.com/series/tailwind/lessons/styling-vue-components-using-tailwindcss-custom-variants
// https://play.tailwindcss.com/8Pmxm8TomW
const plugin = require('tailwindcss/plugin')
/** @type {import('tailwindcss').Config} */
export default {
theme: {
extend: {
// ...
},
},
plugins: [
plugin(function ({ addVariant }) {
addVariant('hocus', ['&:hover', '&:focus'])
addVariant('error', ['&[data-error=true]', '[data-error=true] &'])
}),
],
}
On gists
Dynamic components
•
Tailwind CSS
index.html #
<!--
https://github.com/tailwindlabs/tailwindcss-aspect-ratio/blob/master/src/index.js#L39
https://play.tailwindcss.com/4cuLPqCv05
https://www.youtube.com/watch?v=sxxUK0l8jKE
-->
<div class="p-20 flex justify-center items-center gap-12">
<img class="avatar-sm" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
<img class="avatar" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
<img class="avatar-lg" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
<img class="avatar-xl" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
</div>
On gists
Subgrid examples by Thirus (Rows and columns)
•
Tailwind CSS
CSS
CSS trick
example1.html #
<!-- https://play.tailwindcss.com/CF9WdM43Jf -->
<section class="bg-slate-900 min-h-screen text-slate-100">
<!-- Shopping Cart -->
<div class="rounded-md bg-slate-800 p-8 grid grid-cols-[auto_1fr_auto_auto_auto] gap-6">
<div class="grid gap-6 col-span-5 grid-cols-subgrid">
<p class="col-span-2">Product</p>
<p>Price</p>
<p>Quantity</p>
<p class="text-right">Total</p>
</div>
<div class="grid gap-6 col-span-5 grid-cols-subgrid">
<img
class="size-20 object-cover"
src="https://tinyurl.com/3r25tr36"
alt=""
/>
<div>
<h3 class="text-xl font-medium">
Stylish Tote Bag
</h3>
<p class="text-sm text-slate-400">
Women's Tote Bag Brown
</p>
<span class="text-sm text-slate-500">
#368798
</span>
</div>
<p class="text-slate-400">
$99.00
</p>
<label>
<input
class="border border-slate-600 bg-transparent px-2 py-1 text-sm text-slate-400"
type="text"
value="1"
size="2"
/>
</label>
<p class="font-medium text-right">
$99.00
</p>
</div>
<div class="grid gap-6 col-span-5 grid-cols-subgrid">
<img
class="size-20 object-cover"
src="https://tinyurl.com/3pj5teex"
alt=""
/>
<div>
<h3 class="text-xl font-medium">
Sunglasses
</h3>
<p class="text-sm text-slate-400">
Wooden Frame
</p>
<span class="text-sm text-slate-500">
#756328
</span>
</div>
<p class="text-slate-400">
$102.00
</p>
<label>
<input
class="border border-slate-600 bg-transparent px-2 py-1 text-sm text-slate-400"
type="text"
value="10"
size="2" />
</label>
<p class="font-medium text-right">
$1020.00
</p>
</div>
</div>
</section>
On gists
Tailwind CSS
Dynamic component
index.html #
<!--
- https://www.youtube.com/watch?v=sxxUK0l8jKE
- https://play.tailwindcss.com/4cuLPqCv05
-->
<div class="p-20 flex justify-center items-center gap-12">
<img class="avatar-sm" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
<img class="avatar" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
<img class="avatar-lg" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
<img class="avatar-xl" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
</div>
On gists
Tailwind CSS
Advanced from Tailwind 3
index.html #
<!--
https://lab.rjwebdesign.cz/tailwindcss/advanced/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./dist/output.css" rel="stylesheet" />
</head>
<body class="p-5">
<h1 class="mb-4 font-bold text-3xl">1) Peer / Group</h1>
<div class="peer group group/second group/third grid place-items-center bg-slate-600 w-20 h-20 mt-10">
<div class="bg-black w-5 h-5 group-hover:bg-red-500"></div>
<div class="bg-black w-5 h-5 group-hover/second:bg-green-500"></div>
<div class="bg-black w-5 h-5 group-hover/third:bg-orange-500"></div>
</div>
<div class="w-20 h-20 bg-orange-400 mt-10 peer-hover:bg-violet-300"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">2) Animation / Transition</h1>
<div class="w-20 h-20 bg-teal-700 transition-all hover:bg-red-300 delay-300 duration-150"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">3) Responsivenes / BP (ranges)</h1>
<div class="w-20 h-20 bg-red-500 md:max-lg:bg-green-500"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">4) Dynamic variants / props / values</h1>
<div class="w-20 h-20 bg-[theme('colors.blue.300')]"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">5) TW extend / config</h1>
<div class="w-20 h-20 neon-blue"></div>
<hr class="my-5" />
<h1 class="mb-4 font-bold text-3xl">6) TW extend -> COLORS</h1>
<div class="text-primary">Hello how are you?</div>
</body>
</html>