210 lines
33 KiB
HTML
210 lines
33 KiB
HTML
<!doctype html><html lang=en><head><meta http-equiv=content-type content="text/html" charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=apple-touch-icon sizes=180x180 href=https://tailbliss.netlify.app/favicon/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=https://tailbliss.netlify.app/favicon/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=https://tailbliss.netlify.app/favicon/favicon-16x16.png><link rel=manifest href=https://tailbliss.netlify.app/favicon/site.webmanifest><link rel=mask-icon href=https://tailbliss.netlify.app/favicon/safari-pinned-tab.svg color=#5bbad5><meta name=msapplication-TileColor content="#da532c"><meta name=theme-color content="#ffffff"><title itemprop=name>Prose | TailBliss</title><meta name=description content="Tailwind Typography @tailwindcss/typography & Prose"><meta property="og:title" content="Prose | TailBliss"><meta name=twitter:title content="Prose | TailBliss"><meta itemprop=name content="Prose | TailBliss"><meta name=application-name content="Prose | TailBliss"><meta property="og:site_name" content="TailBliss"><meta property="og:type" content="website"><meta property="og:title" content="TailBliss"><meta property="og:description" content="Tailwind Typography @tailwindcss/typography & Prose"><meta property="og:site_name" content="TailBliss"><meta property="og:url" content="https://tailbliss.netlify.app/prose/"><meta property="og:locale" content="en"><meta property="og:image" content="/images/tailbliss-cover.png"><meta property="og:image:secure_url" content="https://tailbliss.netlify.app/images/tailbliss-cover.png"><meta property="og:type" content="website"><script>localStorage.getItem("color-theme")==="dark"||!("color-theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")</script><link rel=stylesheet href="/css/style.min.0141966c27c2e7f8ad3574980ff46b9c41798e832a199e9c831792ccdb53c6c5.css" integrity="sha256-AUGWbCfC5/itNXSYD/RrnEF5joMqGZ6cgxeSzNtTxsU="></head><body class="bg-zinc-100 dark:bg-gray-800"><div class="top-0 z-50 w-full text-gray-200 bg-gray-900 border-2 border-gray-900 md:sticky border-b-stone-200/10"><div x-data="{ open: false }" class="flex flex-col max-w-full px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8"><div class="flex flex-row items-center justify-between p-4"><a href=https://tailbliss.netlify.app/ class="flex text-gray-100 transition duration-1000 ease-in-out group"><img src=https://tailbliss.netlify.app/images/site-logo.svg class="transition-opacity h-9 w-9 group-hover:opacity-50 group-focus:opacity-70" alt="TailBliss Logo"><div class="mt-1 ml-3 text-xl font-black tracking-tight text-gray-100 uppercase transition-colors group-hover:text-gray-400/60">TailBliss</div></a><button class="rounded-lg md:hidden focus:outline-none focus:shadow-outline" @click="open = !open" role=navigation aria-expanded=false aria-label=Main aria-controls=menuItems><svg fill="currentcolor" viewBox="0 0 20 20" class="w-6 h-6"><path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm6 5a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"/><path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414.0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg></button></div><nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-end md:flex-row"><a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href=https://tailbliss.netlify.app/about/>About</a>
|
||
<a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href=https://tailbliss.netlify.app/prose/>Prose</a><div @click.away="open = false" class=relative x-data="{ open: false }"><button @click="open = !open" class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg md:w-auto md:inline md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">
|
||
<span>Categories</span><svg fill="currentcolor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414.0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414.0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg></button><div x-show=open x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 z-30 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48"><div class="px-2 py-2 text-primary-900 bg-white rounded-md shadow"><a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg md:mt-0 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline" href=https://tailbliss.netlify.app/posts/>Posts</a>
|
||
<a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg md:mt-0 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline" href=https://tailbliss.netlify.app/categories/news/>News</a>
|
||
<a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg md:mt-0 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href=https://tailbliss.netlify.app/categories/blog/>Blog</a></div></div></div><div @click.away="open = false" class=relative x-data="{ open: false }"><button @click="open = !open" class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-600 focus:outline-none focus:shadow-outline">
|
||
<span>Dropdown</span><svg fill="currentcolor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414.0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414.0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg></button><div x-show=open x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 z-30 w-full mt-2 origin-top-right md:max-w-sm md:w-screen"><div class="px-2 pt-2 pb-4 bg-white rounded-md shadow-lg text-zinc-900"><div class="grid grid-cols-1 gap-4"><a class="flex items-start p-2 bg-transparent rounded-lg group row hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href=#><div class="p-3 text-white bg-primary-600 rounded-lg group-hover:bg-gray-900"><svg fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 md:h-6 md:w-6"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16 2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg></div><div class=ml-3><p class=font-semibold>Appearance</p><p class=text-sm>Easy customization</p></div></a><a class="flex items-start p-2 bg-transparent rounded-lg group row hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href=#><div class="p-3 text-white bg-primary-600 rounded-lg group-hover:bg-gray-900"><svg fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 md:h-6 md:w-6"><path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863.0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg></div><div class=ml-3><p class=font-semibold>Comments</p><p class=text-sm>Check your latest comments</p></div></a><a class="flex items-start p-2 bg-transparent rounded-lg group row hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href=#><div class="p-3 text-white bg-primary-600 rounded-lg group-hover:bg-gray-900"><svg fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 md:h-6 md:w-6"><path d="M11 3.055A9.001 9.001.0 1020.945 13H11V3.055z"/><path d="M20.488 9H15V3.512A9.025 9.025.0 0120.488 9z"/></svg></div><div class=ml-3><p class=font-semibold>Analytics</p><p class=text-sm>Take a look at your statistics</p></div></a></div></div></div></div><a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg md:mt-0 md:ml-4 hover:text-white focus:text-white hover:bg-primary-600 focus:bg-primary-700 focus:outline-none focus:shadow-outline" href=https://tailbliss.netlify.app/contact>Contact</a>
|
||
<button id=theme-toggle type=button class="p-2 text-sm text-gray-500 rounded-lg md: dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 md:ml-2 max-w-5 xs:hidden"><svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentcolor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001.0 1010.586 10.586z"/></svg><svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentcolor" viewBox="0 0 20 20" aria-label="Dark or Light Mode" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1A1 1 0 119 4V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707A1 1 0 1113.536 5.05l.707-.707a1 1 0 011.414.0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707A1 1 0 004.343 5.757l.707.707zm1.414 8.486-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"/></svg></button></nav></div></div><article><header class="mb-4 bg-primary-600"><span class=py-96><h1 class="py-16 text-5xl font-black text-center text-white capitalize">Prose</h1></span></header><div class="max-w-4xl mx-auto mt-8 mb-2"><div class=px-6><img src=https://tailbliss.netlify.app/../assets/images/featured/featured-img-placeholder_hu546ed76f4977c4148a28456895aefdc5_449073_1500x0_resize_q80_h2_box_3.webp srcset=", /../assets/images/featured/featured-img-placeholder_hu546ed76f4977c4148a28456895aefdc5_449073_400x0_resize_q80_h2_box_3.webp 400w, /../assets/images/featured/featured-img-placeholder_hu546ed76f4977c4148a28456895aefdc5_449073_550x0_resize_q80_h2_box_3.webp 550w, /../assets/images/featured/featured-img-placeholder_hu546ed76f4977c4148a28456895aefdc5_449073_900x0_resize_q80_h2_box_3.webp 768w, /../assets/images/featured/featured-img-placeholder_hu546ed76f4977c4148a28456895aefdc5_449073_1500x0_resize_q80_h2_box_3.webp 1100w" class="object-fill overflow-hidden rounded-lg shadow-lg ring-4 ring-zinc-300/40 dark:ring-gray-900/40 shadow-neutral-100/20 dark:shadow-neutral-800/40" width=100% alt></div></div><div class="max-w-2xl px-6 pt-6 pb-16 mx-auto prose dark:prose-invert dark:text-white"><h2 id=tailwindcsstypography>@tailwindcss/typography</h2><p><a href=https://github.com/tailwindlabs/tailwindcss-typography>View on GitHub</a>!</p><p>Beautiful typographic defaults for HTML you don’t control.</p><p>The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.</p><p>Tailwind CSS IntelliSense extension for Visual Studio Code</p><pre tabindex=0><code><article class="prose lg:prose-xl">
|
||
{{ markdown }}
|
||
</article>
|
||
</code></pre><p>To see what it looks like in action, check out our <a href="https://play.tailwindcss.com/uj1vGACRJA?layout=preview">live demo</a> on Tailwind Play.
|
||
</p><h2 id=installation>Installation</h2><h3 id=install-the-plugin-from-npm>Install the plugin from npm:</h3><pre tabindex=0><code>npm install -D @tailwindcss/typography
|
||
</code></pre><p>Then add the plugin to your tailwind.config.js file: tailwind.config.js</p><pre tabindex=0><code>module.exports = {
|
||
theme: {
|
||
// ...
|
||
},
|
||
plugins: [
|
||
require('@tailwindcss/typography'),
|
||
// ...
|
||
],
|
||
}
|
||
</code></pre><h2 id=basic-usage>Basic usage</h2><p>Now you can use the prose classes to add sensible typography styles to any vanilla HTML:</p><pre tabindex=0><code><article class="prose lg:prose-xl">
|
||
<h1>Garlic bread with cheese: What the science tells us</h1>
|
||
<p>
|
||
For years parents have espoused the health benefits of eating garlic bread with cheese to their
|
||
children, with the food earning such an iconic status in our culture that kids will often dress
|
||
up as warm, cheesy loaf for Halloween.
|
||
</p>
|
||
<p>
|
||
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
|
||
springing up around the country.
|
||
</p>
|
||
</article>
|
||
</code></pre><h2 id=choosing-a-gray-scale>Choosing a gray scale</h2><p>This plugin includes a modifier class for each of the five gray scales Tailwind includes by default so you can easily style your content to match the grays you’re using in your project.</p><pre tabindex=0><code><article class="prose prose-slate">
|
||
{{ markdown }}
|
||
</article>
|
||
</code></pre><h2 id=here-are-the-classes-that-are-generated-using-a-totally-default-tailwind-css-v20-build>Here are the classes that are generated using a totally default Tailwind CSS v2.0 build:</h2><table><thead><tr><th>Class</th><th>Gray scale</th></tr></thead><tbody><tr><td>prose-gray (default)</td><td>Gray</td></tr><tr><td>prose-slate</td><td>Slate</td></tr><tr><td>prose-zinc</td><td>Zinc</td></tr><tr><td>prose-neutral</td><td>Neutral</td></tr><tr><td>prose-stone</td><td>Stone</td></tr></tbody></table><p>Modifier classes are designed to be used with the multi-class modifier pattern and must be used in conjunction with the base prose class.</p><p>Always include the <code>prose</code> class when adding a gray scale modifier</p><pre tabindex=0><code><article class="prose prose-stone">
|
||
{{ markdown }}
|
||
</article>
|
||
</code></pre><p>To learn about creating your own color themes, read the adding custom color themes documentation.
|
||
</p><h2 id=applying-a-type-scale>Applying a type scale</h2><p>Size modifiers allow you to adjust the overall size of your typography for different contexts.</p><pre tabindex=0><code><article class="prose prose-xl">
|
||
{{ markdown }}
|
||
</article>
|
||
</code></pre><h3 id=five-different-typography-sizes-are-included-out-of-the-box>Five different typography sizes are included out of the box:</h3><p>Class Body font size</p><table><thead><tr><th>prose-sm</th><th>Gray scale</th></tr></thead><tbody><tr><td>prose-gray (default)</td><td>0.875rem (14px)</td></tr><tr><td>prose-base (default)</td><td>1rem (16px)</td></tr><tr><td>prose-lg</td><td>1.125rem (18px)</td></tr><tr><td>prose-xl</td><td>1.25rem (20px)</td></tr><tr><td>prose-2xl</td><td>1.5rem (24px)</td></tr></tbody></table><p>These can be used in combination with Tailwind’s breakpoint modifiers to change the overall font size of a piece of content at different viewport sizes:</p><pre tabindex=0><code><article class="prose md:prose-lg lg:prose-xl">
|
||
{{ markdown }}
|
||
</article>
|
||
</code></pre><p>Everything about the provided size modifiers has been hand-tuned by professional designers to look as beautiful as possible, including the relationships between font sizes, heading spacing, code block padding, and more.</p><p>Size modifiers are designed to be used with the multi-class modifier pattern and must be used in conjunction with the base prose class.</p><p>Always include the <code>prose</code> class when adding a size modifier</p><pre tabindex=0><code><article class="prose prose-lg">
|
||
{{ markdown }}
|
||
</article>
|
||
</code></pre><p>To learn about customizing the included type scales, read the documentation on customizing the CSS.</p><h2 id=adapting-to-dark-mode>Adapting to dark mode</h2><p>Each default color theme includes a hand-designed dark mode version that you can trigger by adding the prose-invert class:</p><pre tabindex=0><code><article class="prose dark:prose-invert">
|
||
{{ markdown }}
|
||
</article>
|
||
</code></pre><p>To learn about creating your own color themes, read the adding custom color themes documentation.</p><p>
|
||
Element modifiers
|
||
Use element modifiers to customize the style of individual elements in your content directly in your HTML:</p><pre tabindex=0><code><article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">
|
||
{{ markdown }}
|
||
</article>
|
||
</code></pre><p>This makes it easy to do things like style links to match your brand, add a border radius to images, and tons more.</p><h3 id=heres-a-complete-list-of-available-element-modifiers>Here’s a complete list of available element modifiers:</h3><table><thead><tr><th>Modifier</th><th>Target</th></tr></thead><tbody><tr><td>prose-headings:{utility}</td><td>h1, h2, h3, h4, th</td></tr><tr><td>prose-lead:{utility}</td><td>[class~=“lead”]</td></tr><tr><td>prose-h1:{utility}</td><td>h1</td></tr><tr><td>prose-h2:{utility}</td><td>h2</td></tr><tr><td>prose-h3:{utility}</td><td>h3</td></tr><tr><td>prose-h4:{utility}</td><td>h4</td></tr><tr><td>prose-p:{utility}</td><td>p</td></tr><tr><td>prose-a:{utility}</td><td>a</td></tr><tr><td>prose-blockquote:{utility}</td><td>blockquote</td></tr><tr><td>prose-figure:{utility}</td><td>figure</td></tr><tr><td>prose-figcaption:{utility}</td><td>figcaption</td></tr><tr><td>prose-strong:{utility}</td><td>strong</td></tr><tr><td>prose-em:{utility}</td><td>em</td></tr><tr><td>prose-code:{utility}</td><td>code</td></tr><tr><td>prose-pre:{utility}</td><td>pre</td></tr><tr><td>prose-ol:{utility}</td><td>ol</td></tr><tr><td>prose-ul:{utility}</td><td>ul</td></tr><tr><td>prose-li:{utility}</td><td>li</td></tr><tr><td>prose-table:{utility}</td><td>table</td></tr><tr><td>prose-thead:{utility}</td><td>thead</td></tr><tr><td>prose-tr:{utility}</td><td>tr</td></tr><tr><td>prose-th:{utility}</td><td>th</td></tr><tr><td>prose-td:{utility}</td><td>td</td></tr><tr><td>prose-img:{utility}</td><td>img</td></tr><tr><td>prose-video:{utility}</td><td>video</td></tr><tr><td>prose-hr:{utility}</td><td>hr</td></tr></tbody></table><p>When stacking these modifiers with other modifiers like hover, you most likely want the other modifier to come first:</p><pre tabindex=0><code><article class="prose prose-a:text-blue-600 hover:prose-a:text-blue-500">
|
||
{{ markdown }}
|
||
</article>
|
||
</code></pre><h2 id=read-the-tailwind-css-documentation-on-ordering-stacked-modifiers-to-learn-more>Read the Tailwind CSS documentation on ordering stacked modifiers to learn more.</h2><p>
|
||
Overriding max-width
|
||
Each size modifier comes with a baked in max-width designed to keep the content as readable as possible. This isn’t always what you want though, and sometimes you’ll want the content to just fill the width of its container.</p><p>In those cases, all you need to do is add max-w-none to your content to override the embedded max-width:</p><pre tabindex=0><code><div class="grid grid-cols-4">
|
||
<div class="col-span-1">
|
||
<!-- ... -->
|
||
</div>
|
||
<div class="col-span-3">
|
||
<article class="prose max-w-none">
|
||
{{ markdown }}
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</code></pre><h2 id=advanced-topics>Advanced topics</h2><p>
|
||
Undoing typography styles
|
||
If you have a block of markup embedded in some content that shouldn’t inherit the prose styles, use the not-prose class to sandbox it:</p><pre tabindex=0><code><article class="prose">
|
||
<h1>My Heading</h1>
|
||
<p>...</p>
|
||
|
||
<div class="not-prose">
|
||
<!-- Some example or demo that needs to be prose-free -->
|
||
</div>
|
||
|
||
<p>...</p>
|
||
<!-- ... -->
|
||
</article>
|
||
</code></pre><p>Note that you can’t nest new prose instances within a not-prose block at this time.
|
||
</p><h2 id=adding-custom-color-themes>Adding custom color themes</h2><p>You can create your own color theme by adding a new key in the typography section of your tailwind.config.js file and providing your colors under the css key:</p><pre tabindex=0><code>tailwind.config.js
|
||
module.exports = {
|
||
theme: {
|
||
extend: {
|
||
typography: ({ theme }) => ({
|
||
pink: {
|
||
css: {
|
||
'--tw-prose-body': theme('colors.pink[800]'),
|
||
'--tw-prose-headings': theme('colors.pink[900]'),
|
||
'--tw-prose-lead': theme('colors.pink[700]'),
|
||
'--tw-prose-links': theme('colors.pink[900]'),
|
||
'--tw-prose-bold': theme('colors.pink[900]'),
|
||
'--tw-prose-counters': theme('colors.pink[600]'),
|
||
'--tw-prose-bullets': theme('colors.pink[400]'),
|
||
'--tw-prose-hr': theme('colors.pink[300]'),
|
||
'--tw-prose-quotes': theme('colors.pink[900]'),
|
||
'--tw-prose-quote-borders': theme('colors.pink[300]'),
|
||
'--tw-prose-captions': theme('colors.pink[700]'),
|
||
'--tw-prose-code': theme('colors.pink[900]'),
|
||
'--tw-prose-pre-code': theme('colors.pink[100]'),
|
||
'--tw-prose-pre-bg': theme('colors.pink[900]'),
|
||
'--tw-prose-th-borders': theme('colors.pink[300]'),
|
||
'--tw-prose-td-borders': theme('colors.pink[200]'),
|
||
'--tw-prose-invert-body': theme('colors.pink[200]'),
|
||
'--tw-prose-invert-headings': theme('colors.white'),
|
||
'--tw-prose-invert-lead': theme('colors.pink[300]'),
|
||
'--tw-prose-invert-links': theme('colors.white'),
|
||
'--tw-prose-invert-bold': theme('colors.white'),
|
||
'--tw-prose-invert-counters': theme('colors.pink[400]'),
|
||
'--tw-prose-invert-bullets': theme('colors.pink[600]'),
|
||
'--tw-prose-invert-hr': theme('colors.pink[700]'),
|
||
'--tw-prose-invert-quotes': theme('colors.pink[100]'),
|
||
'--tw-prose-invert-quote-borders': theme('colors.pink[700]'),
|
||
'--tw-prose-invert-captions': theme('colors.pink[400]'),
|
||
'--tw-prose-invert-code': theme('colors.white'),
|
||
'--tw-prose-invert-pre-code': theme('colors.pink[300]'),
|
||
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
|
||
'--tw-prose-invert-th-borders': theme('colors.pink[600]'),
|
||
'--tw-prose-invert-td-borders': theme('colors.pink[700]'),
|
||
},
|
||
},
|
||
}),
|
||
},
|
||
},
|
||
plugins: [
|
||
require('@tailwindcss/typography'),
|
||
// ...
|
||
],
|
||
}
|
||
</code></pre><p>See our internal style definitions for some more examples.
|
||
</p><h2 id=changing-the-default-class-name>Changing the default class name</h2><p>If you need to use a class name other than prose for any reason, you can do so using the className option when registering the plugin:</p><pre tabindex=0><code> tailwind.config.js
|
||
module.exports = {
|
||
theme: {
|
||
// ...
|
||
},
|
||
plugins: [
|
||
require('@tailwindcss/typography')({
|
||
className: 'wysiwyg',
|
||
}),
|
||
]
|
||
...
|
||
}
|
||
</code></pre><p>Now every instance of prose in the default class names will be replaced by your custom class name:</p><pre tabindex=0><code> <article class="wysiwyg wysiwyg-slate lg:wysiwyg-xl">
|
||
<h1>My Heading</h1>
|
||
<p>...</p>
|
||
|
||
<div class="not-wysiwyg">
|
||
<!-- Some example or demo that needs to be prose-free -->
|
||
</div>
|
||
|
||
<p>...</p>
|
||
<!-- ... -->
|
||
</article>
|
||
</code></pre><h2 id=customizing-the-css>Customizing the CSS</h2><p>If you want to customize the raw CSS generated by this plugin, add your overrides under the typography key in the theme section of your tailwind.config.js file:</p><pre tabindex=0><code> tailwind.config.js
|
||
module.exports = {
|
||
theme: {
|
||
extend: {
|
||
typography: {
|
||
DEFAULT: {
|
||
css: {
|
||
color: '#333',
|
||
a: {
|
||
color: '#3182ce',
|
||
'&:hover': {
|
||
color: '#2c5282',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
plugins: [
|
||
require('@tailwindcss/typography'),
|
||
// ...
|
||
],
|
||
}
|
||
</code></pre><p>Like with all theme customizations in Tailwind, you can also define the typography key as a function if you need access to the theme helper:</p><pre tabindex=0><code>tailwind.config.js
|
||
module.exports = {
|
||
theme: {
|
||
extend: {
|
||
typography: (theme) => ({
|
||
DEFAULT: {
|
||
css: {
|
||
color: theme('colors.gray.800'),
|
||
|
||
// ...
|
||
},
|
||
},
|
||
}),
|
||
},
|
||
},
|
||
plugins: [
|
||
require('@tailwindcss/typography'),
|
||
// ...
|
||
],
|
||
}
|
||
</code></pre><p>Customizations should be applied to a specific modifier like DEFAULT or xl, and must be added under the css property. Customizations are authored in the same CSS-in-JS syntax used to write Tailwind plugins.</p><p>See the default styles for this plugin for more in-depth examples of configuring each modifier.</p></div></article><script src=https://tailbliss.netlify.app/js/alpine.js defer></script>
|
||
<script src=https://tailbliss.netlify.app/js/darkmode.js defer></script><footer class=bg-gray-900><div class="max-w-md px-4 py-12 mx-auto overflow-hidden sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8"><nav class="flex flex-wrap justify-center -mx-5 -my-2" aria-label=Footer><div class="px-5 py-2"><a href=https://tailbliss.netlify.app/about class="text-base text-gray-400 hover:text-gray-300">About</a></div><div class="px-5 py-2"><a href=https://tailbliss.netlify.app/categories/blog/ class="text-base text-gray-400 hover:text-gray-300">Blog</a></div><div class="px-5 py-2"><a href=https://tailbliss.netlify.app/categories/news/ class="text-base text-gray-400 hover:text-gray-300">News</a></div><div class="px-5 py-2"><a href=https://tailbliss.netlify.app/prose/ class="text-base text-gray-400 hover:text-gray-300">Prose</a></div><div class="px-5 py-2"><a href=https://tailbliss.netlify.app/contact/ class="text-base text-gray-400 hover:text-gray-300">Contact</a></div></nav><div class="flex justify-center mt-8 space-x-6"><a href=# class="text-gray-400 hover:text-gray-300"><span class=sr-only>Facebook</span><svg class="w-6 h-6" fill="currentcolor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094.0 2.238.195 2.238.195v2.46h-1.26c-1.243.0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"/></svg></a>
|
||
<a href=# class="text-gray-400 hover:text-gray-300"><span class=sr-only>Instagram</span><svg class="w-6 h-6" fill="currentcolor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43.0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902.0 011.772 1.153 4.902 4.902.0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902.0 01-1.153 1.772 4.902 4.902.0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643.0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902.0 01-1.772-1.153A4.902 4.902.0 012.525 18.55c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902.0 011.153-1.772A4.902 4.902.0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456.0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597.0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097.0 00-.748-1.15 3.098 3.098.0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135.0 110 10.27 5.135 5.135.0 010-10.27zm0 1.802a3.333 3.333.0 100 6.666 3.333 3.333.0 000-6.666zm5.338-3.205a1.2 1.2.0 110 2.4 1.2 1.2.0 010-2.4z" clip-rule="evenodd"/></svg></a>
|
||
<a href=# class="text-gray-400 hover:text-gray-300"><span class=sr-only>Twitter</span><svg class="w-6 h-6" fill="currentcolor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547.0 11.675-6.253 11.675-11.675.0-.178.0-.355-.012-.53A8.348 8.348.0 0022 5.92a8.19 8.19.0 01-2.357.646 4.118 4.118.0 001.804-2.27 8.224 8.224.0 01-2.605.996 4.107 4.107.0 00-6.993 3.743A11.65 11.65.0 013.392 4.748a4.106 4.106.0 001.27 5.477A4.072 4.072.0 012.8 9.713v.052a4.105 4.105.0 003.292 4.022 4.095 4.095.0 01-1.853.07 4.108 4.108.0 003.834 2.85A8.233 8.233.0 012 18.407a11.616 11.616.0 006.29 1.84"/></svg></a>
|
||
<a href=# class="text-gray-400 hover:text-gray-300"><span class=sr-only>GitHub</span><svg class="w-6 h-6" fill="currentcolor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483.0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951.0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65.0.0.84-.27 2.75 1.026A9.564 9.564.0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688.0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855.0 1.338-.012 2.419-.012 2.747.0.268.18.58.688.482A10.019 10.019.0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/></svg></a>
|
||
<a href=# class="text-gray-400 hover:text-gray-300"><span class=sr-only>Dribbble</span><svg class="w-6 h-6" fill="currentcolor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51.0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502.0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416.0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17.0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687.0 0112 3.475zm-3.633.803a53.896 53.896.0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581.0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522.0 01-2.19-5.705zM12 20.547a8.482 8.482.0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318.0 011.823 6.475A8.4 8.4.0 0112 20.547zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468.0 01-3.655 5.715z" clip-rule="evenodd"/></svg></a></div><p class="mt-8 text-base text-center text-gray-400">© 2023
|
||
TailBliss. All rights
|
||
reserved.</p><p class="mt-2 text-base text-center text-gray-400">Made with ❤️ by <a href=https://nusserstudios.com class="hover:underline hover:text-primary-600"><span class="font-black uppercase">Nusser</span> <span class="font-light uppercase">Studios.</span></a></p></div></footer></body></html> |