プレビュー
HTML
<p>Keep the <mark>measure</mark> short enough to breathe.</p>
CSS
:root {
--ink: #1c1915;
--paper: #fbf7ee;
--accent: #6b3f2a;
--accent-2: #2c3a4a;
--on-accent: #fbf7ee;
--muted: #6f675c;
--line: #cfc4b0;
--chip: #f0e9db;
}
p {
max-width: 34ch;
margin: 0;
color: var(--ink);
font-family: Palatino, Georgia, serif;
font-size: 1.15rem;
line-height: 1.45;
}
mark {
background: var(--chip);
color: inherit;
font-style: italic;
}
Tailwind
<style>
:root {
--ink: #1c1915;
--paper: #fbf7ee;
--accent: #6b3f2a;
--accent-2: #2c3a4a;
--on-accent: #fbf7ee;
--muted: #6f675c;
--line: #cfc4b0;
--chip: #f0e9db;
}
</style>
<p class="max-w-[34ch] m-0 text-[var(--ink)] font-[Palatino,_Georgia,_serif] text-[1.15rem] leading-[1.45]">Keep the <mark class="bg-[var(--chip)] text-inherit [font-style:italic]">measure</mark> short enough to breathe.</p>