Watch the tutorial: https://youtu.be/kKdH6QLQGFk

attribute-utilities.css

.button-favorites[aria-pressed="true"] {
	background-color: #ff4136;
	border-color: #ff4136;
	color: #ffffff;
}

attribute-utilities.html

<button class="button-favorites" aria-pressed="true">Save to Favorites</button>

group+utility.css

.list-inline {
	list-style: none;
	display: flex;
	align-items: center;
	column-gap: 1em;
	flex-wrap: wrap;
}

/* I don't do this... */
.list-inline-big-spacing {
	list-style: none;
	display: flex;
	align-items: center;
	column-gap: 2.875em;
	flex-wrap: wrap;
}

.list-inline-spaced {
	column-gap: 2.875em;
}

.list-inline-compact {
	column-gap: 0.5em;
}

group+utility.html

<!-- An inline list with a bit more space between items -->
<ul class="list-inline list-inline-spaced">
	<li>Merlin</li>
	<li>Yennefer</li>
	<li>Radagast</li>
</ul>

group.css

.list-inline {
	list-style: none;
	display: flex;
	align-items: center;
	column-gap: 1em;
	flex-wrap: wrap;
}

group.html

<!-- An inline list -->
<ul class="list-inline">
	<li>Merlin</li>
	<li>Yennefer</li>
	<li>Radagast</li>
</ul>

html.css

/* Lists */
ul,
ol {
	margin: 0 0 1.5em 2em;
	padding: 0;
}

li {
	margin-bottom: 0.5em;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: "Comic Sans", sans;
	line-height: 1.4;
	margin: 0 0 1em;
	padding: 0;
	word-wrap: break-word;
}

/* Buttons */
button {
	background-color: #0088cc;
	border: 0.125em solid #0088cc;
	border-radius: 0.25em;
	color: #ffffff;
	display: inline-block;
	font-size: 0.9375em;
	font-weight: normal;
	line-height: 1.2;
	margin-right: 0.3125em;
	margin-bottom: 0.3125em;
	padding: 0.5em 0.6875em;
}

button:hover,
button:active {
	background-color: #f7f7f7;
	border-color: #808080;
	color: #272727;
}

html.html

<h2>Awesome wizards</h2>

<ul>
	<li>Merlin</li>
	<li>Yennefer</li>
	<li>Radagast</li>
</ul>

<button>Add a Wizard</button>


<!-- vs... -->

<h2 class="heading_h2">Awesome wizards</h2>

<ul class="list_unordered">
	<li class="list_unordered_list-item">Merlin</li>
	<li class="list_unordered_list-item">Yennefer</li>
	<li class="list_unordered_list-item">Radagast</li>
</ul>

<button class="button button_primary">Add a Wizard</button>

hug.md

HUG CSS

HTML elements Utility Classes Group Classes

tailwind-style.html

<!-- An inline list? -->
<ul class="list-style-none display-flex flex-gap flex-center flex-wrap">
	<li>Merlin</li>
	<li>Yennefer</li>
	<li>Radagast</li>
</ul>

utility.css

.no-margin-bottom {
	margin-bottom: 0;
}


/* Text sizes */
.text-small {
	font-size: 0.9375em;
}

.text-large {
	font-size: 1.1875em;
	line-height: 1.4;
}

/* Text colors */
.text-muted {
	color: #808080;
}

utility.html

<h2 class="no-margin-bottom">Awesome Wizards</h2>
<p>Which one do you like best?</p>