AK-21/Graphite-Industrial-Intelligence
0
1<p>2 <a href="https://tailwindcss.com/docs/typography-plugin" target="_blank">3 <picture>4 <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-dark.svg">5 <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg">6 <img alt="Tailwind CSS Typography" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg" width="450" height="70" style="max-width: 100%;">7 </picture>8 </a>9</p>10 11The 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.12 13```html14<article class="prose lg:prose-xl">{{ markdown }}</article>15```16 17To see what it looks like in action, check out our [live demo](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) on Tailwind Play.18 19---20 21## Installation22 23Install the plugin from npm:24 25```shell26npm install -D @tailwindcss/typography27```28 29Then add the plugin to your main `style.css` file:30 31```diff32 @import "tailwindcss";33+ @plugin "@tailwindcss/typography";34```35 36If you are still using **Tailwind CSS v3**, add the plugin to your `tailwind.config.js` file:37 38```js39// tailwind.config.js40module.exports = {41 theme: {42 // ...43 },44 plugins: [45 require('@tailwindcss/typography'),46 // ...47 ],48}49```50 51---52 53## Basic usage54 55Now you can use the `prose` classes to add sensible typography styles to any vanilla HTML:56 57```html58<article class="prose lg:prose-xl">59 <h1>Garlic bread with cheese: What the science tells us</h1>60 <p>61 For years parents have espoused the health benefits of eating garlic bread with cheese to their62 children, with the food earning such an iconic status in our culture that kids will often dress63 up as warm, cheesy loaf for Halloween.64 </p>65 <p>66 But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases67 springing up around the country.68 </p>69 <!-- ... -->70</article>71```72 73### Choosing a gray scale74 75This 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.76 77```html78<article class="prose prose-slate">{{ markdown }}</article>79```80 81Here are the classes that are generated using a totally default Tailwind CSS v2.0 build:82 83| Class | Gray scale |84| ------------------------ | ---------- |85| `prose-gray` _(default)_ | Gray |86| `prose-slate` | Slate |87| `prose-zinc` | Zinc |88| `prose-neutral` | Neutral |89| `prose-stone` | Stone |90 91Modifier classes are designed to be used with the [multi-class modifier pattern](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/#component-modifiers) and must be used in conjunction with the base `prose` class.92 93> [!NOTE]94> Always include the `prose` class when adding a gray scale modifier95 96```html97<article class="prose prose-stone">{{ markdown }}</article>98```99 100To learn about creating your own color themes, read the [adding custom color themes](#adding-custom-color-themes) documentation.101 102### Applying a type scale103 104Size modifiers allow you to adjust the overall size of your typography for different contexts.105 106```html107<article class="prose prose-xl">{{ markdown }}</article>108```109 110Five different typography sizes are included out of the box:111 112| Class | Body font size |113| ------------------------ | ----------------- |114| `prose-sm` | 0.875rem _(14px)_ |115| `prose-base` _(default)_ | 1rem _(16px)_ |116| `prose-lg` | 1.125rem _(18px)_ |117| `prose-xl` | 1.25rem _(20px)_ |118| `prose-2xl` | 1.5rem _(24px)_ |119 120These can be used in combination with Tailwind's [breakpoint modifiers](https://tailwindcss.com/docs/responsive-design) to change the overall font size of a piece of content at different viewport sizes:121 122```html123<article class="prose md:prose-lg lg:prose-xl">{{ markdown }}</article>124```125 126Everything 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.127 128Size modifiers are designed to be used with the [multi-class modifier pattern](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/#component-modifiers) and must be used in conjunction with the base `prose` class.129 130> [!NOTE]131> Always include the `prose` class when adding a size modifier132 133```html134<article class="prose prose-lg">{{ markdown }}</article>135```136 137To learn about customizing the included type scales, read the documentation on [customizing the CSS](#customizing-the-css).138 139### Adapting to dark mode140 141Each default color theme includes a hand-designed dark mode version that you can trigger by adding the `prose-invert` class:142 143```html144<article class="prose dark:prose-invert">{{ markdown }}</article>145```146 147To learn about creating your own color themes, read the [adding custom color themes](#adding-custom-color-themes) documentation.148 149### Element modifiers150 151Use element modifiers to customize the style of individual elements in your content directly in your HTML:152 153```html154<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">155 {{ markdown }}156</article>157```158 159This makes it easy to do things like style links to match your brand, add a border radius to images, and tons more.160 161Here's a complete list of available element modifiers:162 163| Modifier | Target |164| ---------------------------- | ---------------------------- |165| `prose-headings:{utility}` | `h1`, `h2`, `h3`, `h4`, `th` |166| `prose-lead:{utility}` | `[class~="lead"]` |167| `prose-h1:{utility}` | `h1` |168| `prose-h2:{utility}` | `h2` |169| `prose-h3:{utility}` | `h3` |170| `prose-h4:{utility}` | `h4` |171| `prose-p:{utility}` | `p` |172| `prose-a:{utility}` | `a` |173| `prose-blockquote:{utility}` | `blockquote` |174| `prose-figure:{utility}` | `figure` |175| `prose-figcaption:{utility}` | `figcaption` |176| `prose-strong:{utility}` | `strong` |177| `prose-em:{utility}` | `em` |178| `prose-kbd:{utility}` | `kbd` |179| `prose-code:{utility}` | `code` |180| `prose-pre:{utility}` | `pre` |181| `prose-ol:{utility}` | `ol` |182| `prose-ul:{utility}` | `ul` |183| `prose-li:{utility}` | `li` |184| `prose-dl:{utility}` | `dl` |185| `prose-dt:{utility}` | `dt` |186| `prose-dd:{utility}` | `dd` |187| `prose-table:{utility}` | `table` |188| `prose-thead:{utility}` | `thead` |189| `prose-tr:{utility}` | `tr` |190| `prose-th:{utility}` | `th` |191| `prose-td:{utility}` | `td` |192| `prose-img:{utility}` | `img` |193| `prose-picture:{utility}` | `picture` |194| `prose-video:{utility}` | `video` |195| `prose-hr:{utility}` | `hr` |196 197When stacking these modifiers with other modifiers like `hover`, you most likely want the other modifier to come last:198 199```html200<article class="prose prose-a:text-blue-600 prose-a:hover:text-blue-500">{{ markdown }}</article>201```202 203If you are still using in Tailwind CSS v3, the modifier order is the opposite:204 205```html206<article class="prose prose-a:text-blue-600 hover:prose-a:text-blue-500">{{ markdown }}</article>207```208 209Read the Tailwind CSS documentation on [stacked modifiers](https://tailwindcss.com/docs/hover-focus-and-other-states) to learn more.210 211### Overriding max-width212 213Each 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.214 215In those cases, all you need to do is add `max-w-none` to your content to override the embedded max-width:216 217```html218<div class="grid grid-cols-4">219 <div class="col-span-1">220 <!-- ... -->221 </div>222 <div class="col-span-3">223 <article class="prose max-w-none">{{ markdown }}</article>224 </div>225</div>226```227 228---229 230## Advanced topics231 232### Undoing typography styles233 234If 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:235 236```html237<article class="prose">238 <h1>My Heading</h1>239 <p>...</p>240 241 <div class="not-prose">242 <!-- Some example or demo that needs to be prose-free -->243 </div>244 245 <p>...</p>246 <!-- ... -->247</article>248```249 250Note that you can't nest new `prose` instances within a `not-prose` block at this time.251 252Even when using a prefix for your utilities `not-prose` should not have a prefix.253 254### Adding custom color themes255 256To customize the color theme beyond simple CSS overrides, add a `@utility` directive to your CSS file:257 258```css259@utility prose-pink {260 --tw-prose-body: var(--color-pink-800);261 --tw-prose-headings: var(--color-pink-900);262 --tw-prose-lead: var(--color-pink-700);263 --tw-prose-links: var(--color-pink-900);264 --tw-prose-bold: var(--color-pink-900);265 --tw-prose-counters: var(--color-pink-600);266 --tw-prose-bullets: var(--color-pink-400);267 --tw-prose-hr: var(--color-pink-300);268 --tw-prose-quotes: var(--color-pink-900);269 --tw-prose-quote-borders: var(--color-pink-300);270 --tw-prose-captions: var(--color-pink-700);271 --tw-prose-code: var(--color-pink-900);272 --tw-prose-pre-code: var(--color-pink-100);273 --tw-prose-pre-bg: var(--color-pink-900);274 --tw-prose-th-borders: var(--color-pink-300);275 --tw-prose-td-borders: var(--color-pink-200);276 --tw-prose-invert-body: var(--color-pink-200);277 --tw-prose-invert-headings: var(--color-white);278 --tw-prose-invert-lead: var(--color-pink-300);279 --tw-prose-invert-links: var(--color-white);280 --tw-prose-invert-bold: var(--color-white);281 --tw-prose-invert-counters: var(--color-pink-400);282 --tw-prose-invert-bullets: var(--color-pink-600);283 --tw-prose-invert-hr: var(--color-pink-700);284 --tw-prose-invert-quotes: var(--color-pink-100);285 --tw-prose-invert-quote-borders: var(--color-pink-700);286 --tw-prose-invert-captions: var(--color-pink-400);287 --tw-prose-invert-code: var(--color-white);288 --tw-prose-invert-pre-code: var(--color-pink-300);289 --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);290 --tw-prose-invert-th-borders: var(--color-pink-600);291 --tw-prose-invert-td-borders: var(--color-pink-700);292}293```294 295For Tailwind v3, update the `typography` section in the JavaScript config file and provide your colors under the `css` key:296 297```js {{ filename: 'tailwind.config.js' }}298/** @type {import('tailwindcss').Config} */299module.exports = {300 theme: {301 extend: {302 typography: () => ({303 pink: {304 css: {305 '--tw-prose-body': 'var(--color-pink-800)',306 '--tw-prose-headings': 'var(--color-pink-900)',307 '--tw-prose-lead': 'var(--color-pink-700)',308 '--tw-prose-links': 'var(--color-pink-900)',309 '--tw-prose-bold': 'var(--color-pink-900)',310 '--tw-prose-counters': 'var(--color-pink-600)',311 '--tw-prose-bullets': 'var(--color-pink-400)',312 '--tw-prose-hr': 'var(--color-pink-300)',313 '--tw-prose-quotes': 'var(--color-pink-900)',314 '--tw-prose-quote-borders': 'var(--color-pink-300)',315 '--tw-prose-captions': 'var(--color-pink-700)',316 '--tw-prose-code': 'var(--color-pink-900)',317 '--tw-prose-pre-code': 'var(--color-pink-100)',318 '--tw-prose-pre-bg': 'var(--color-pink-900)',319 '--tw-prose-th-borders': 'var(--color-pink-300)',320 '--tw-prose-td-borders': 'var(--color-pink-200)',321 '--tw-prose-invert-body': 'var(--color-pink-200)',322 '--tw-prose-invert-headings': 'var(--color-white)',323 '--tw-prose-invert-lead': 'var(--color-pink-300)',324 '--tw-prose-invert-links': 'var(--color-white)',325 '--tw-prose-invert-bold': 'var(--color-white)',326 '--tw-prose-invert-counters': 'var(--color-pink-400)',327 '--tw-prose-invert-bullets': 'var(--color-pink-600)',328 '--tw-prose-invert-hr': 'var(--color-pink-700)',329 '--tw-prose-invert-quotes': 'var(--color-pink-100)',330 '--tw-prose-invert-quote-borders': 'var(--color-pink-700)',331 '--tw-prose-invert-captions': 'var(--color-pink-400)',332 '--tw-prose-invert-code': 'var(--color-white)',333 '--tw-prose-invert-pre-code': 'var(--color-pink-300)',334 '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',335 '--tw-prose-invert-th-borders': 'var(--color-pink-600)',336 '--tw-prose-invert-td-borders': 'var(--color-pink-700)',337 },338 },339 }),340 },341 },342}343```344 345See our internal [style definitions](https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/styles.js) for some more examples.346 347### Changing the default class name348 349If 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:350 351```css352@import 'tailwindcss';353@plugin "@tailwindcss/typography" {354 className: wysiwyg;355}356```357 358Now every instance of `prose` in the default class names will be replaced by your custom class name:359 360```html361<article class="wysiwyg wysiwyg-slate lg:wysiwyg-xl">362 <h1>My Heading</h1>363 <p>...</p>364 365 <div class="not-wysiwyg">366 <!-- Some example or demo that needs to be prose-free -->367 </div>368 369 <p>...</p>370 <!-- ... -->371</article>372```373 374### Customizing the CSS375 376If you want to customize the raw CSS generated by this plugin, you can use the JavaScript based theme API. To do that, use the `@config` directive:377 378```diff379 @import "tailwindcss";380 @plugin "@tailwindcss/typography";381+ @config "./tailwind.config.js";382```383 384You can then create your own config by adding a new `tailwind.config.js` file with the `typography` section and providing your styles under the `css` key:385 386```js {{ filename: 'tailwind.config.js' }}387/** @type {import('tailwindcss').Config} */388module.exports = {389 theme: {390 extend: {391 typography: {392 DEFAULT: {393 css: {394 color: '#333',395 a: {396 color: '#3182ce',397 '&:hover': {398 color: '#2c5282',399 },400 },401 },402 },403 },404 },405 },406}407```408 409Like with all theme customizations in Tailwind, you can use CSS variables if you need access to access your theme configuration:410 411```js {{ filename: 'tailwind.config.js' }}412/** @type {import('tailwindcss').Config} */413module.exports = {414 theme: {415 extend: {416 typography: {417 DEFAULT: {418 css: {419 color: 'var(--color-gray-800)',420 // ...421 },422 },423 },424 },425 },426}427```428 429Customizations 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](https://v3.tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind v3 plugins.430 431See [the default styles](https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/styles.js) for this plugin for more in-depth examples of configuring each modifier.432 433---434 435## Community436 437For help, discussion about best practices, or any other conversation that would benefit from being searchable:438 439[Discuss the Tailwind CSS Typography plugin on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)440 441For casual chit-chat with others using the framework:442 443[Join the Tailwind CSS Discord Server](https://tailwindcss.com/discord)444