tailwind-children
Version:
Tailwind plugin which enables setting CSS rules for all children in parent
48 lines (41 loc) • 1.4 kB
HTML
<html>
<head>
<title>Children Test</title>
<link href="./base.css" rel="stylesheet" type="text/css">
<link href="./test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="child:bg-teal-200 hover:child:border">
<p class='sibling:bg-red-200'>child: teal bg, hover</p>
<p>child - teal & hover. sibling - red. </p>
<p class="bg-teal-800">I have a dark background, overriding both sibling and child</p>
</div>
<div class="bg-red-200 p-2
child-p:bg-teal-200 hover:child-p:border">
<p>child: teal bg, hover</p>
<p class="bg-teal-800">child.bg-teal-800: dark bg, hover</p>
<p class="not-child-p">child.not-child-p: no bg, no hover</p>
<div>
div: no bg, no hover
<p>nested: no bg, no hover</p>
</div>
</div>
<div class="bg-red-200 p-2
heir-p:bg-teal-200 hover:heir-p:border">
<div>
<p>heir: teal bg, hover</p>
<p class="bg-teal-800">heir.bg-teal-800: dark bg, hover</p>
<p class="not-heir-p">heir.not-heir-p: no bg, no hover</p>
<div>div: no bg, no hover</div>
</div>
</div>
<div class="bg-red-200 p-2">
<p class="sibling-p:bg-teal-200 hover:sibling-p:border">original twin: teal bg, hover</p>
<p>twin: teal bg, hover</p>
<p class="italic bg-teal-800">twin.bg-teal-800: dark bg, hover</p>
<p class="italic not-sibling-p">twin.not-twin-p: no bg, no hover</p>
<div>div: no bg, no hover</div>
</div>
</body>
</html>