JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<h3>Variables</h3>

<div class="block-a">
	<h1>Block A</h1>
	<p><span class="icon"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus nec justo eget facilisis. Suspendisse gravida condimentum erat, non ultrices quam aliquam eget.</p>
</div>

<div class="block-b">
	<h1>Block B</h1>
	<p><span class="icon"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus nec justo eget facilisis. Suspendisse gravida condimentum erat, non ultrices quam aliquam eget.</p>
</div>

<h3>Classnames</h3>

<div>
	<h1 class="dr-theme__primary-color--fg">Block A</h1>
	<p><span class="icon dr-theme__primary-color--bg"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus nec justo eget facilisis. Suspendisse gravida condimentum erat, non ultrices quam aliquam eget.</p>
</div>

<div>
	<h1 class="dr-theme__secondary-color--fg">Block B</h1>
	<p><span class="icon dr-theme__secondary-color--bg"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus nec justo eget facilisis. Suspendisse gravida condimentum erat, non ultrices quam aliquam eget.</p>
</div>

CSS

:root {
	--primary-color: red;
	--secondary-color: blue;
	--tertiary-color: green;
}

.block-a {
	--bg-color: var(--primary-color);
	--fg-color: var(--primary-color);
}

.block-a:hover {
	--fg-color: var(--tertiary-color);
}

.block-b {
	--bg-color: var(--secondary-color);
	--fg-color: var(--secondary-color);
}

.block-b:hover {
	--fg-color: var(--tertiary-color);
}

h1 {
	color: var(--fg-color, grey);
	transition: .2s color ease-in-out;
}

.icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: var(--bg-color, grey);
}

.dr-theme__primary-color--fg {
	color: red;
}

.dr-theme__primary-color--bg {
	background-color: red;
}

.dr-theme__secondary-color--fg {
	color: blue;
}

.dr-theme__secondary-color--bg {
	background-color: blue;
}