@tailwindcss/typography
Advanced tools
Comparing version 0.0.0-insiders.1cdc770 to 0.0.0-insiders.1da9d14
{ | ||
"name": "@tailwindcss/typography", | ||
"version": "0.0.0-insiders.1cdc770", | ||
"version": "0.0.0-insiders.1da9d14", | ||
"description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.", | ||
@@ -12,3 +12,3 @@ "main": "src/index.js", | ||
], | ||
"repository": "https://github.com/tailwindcss/typography", | ||
"repository": "https://github.com/tailwindlabs/tailwindcss-typography", | ||
"license": "MIT", | ||
@@ -29,6 +29,8 @@ "publishConfig": { | ||
"export": "next export demo", | ||
"start": "next start demo" | ||
"start": "next start demo", | ||
"release-channel": "node ./scripts/release-channel.js", | ||
"release-notes": "node ./scripts/release-notes.js" | ||
}, | ||
"peerDependencies": { | ||
"tailwindcss": ">=3.0.0 || insiders" | ||
"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20" | ||
}, | ||
@@ -41,3 +43,3 @@ "devDependencies": { | ||
"highlight.js": "^10.4.1", | ||
"jest": "^26.6.1", | ||
"jest": "^29.7.0", | ||
"jest-diff": "^27.3.1", | ||
@@ -44,0 +46,0 @@ "next": "^12.0.1", |
377
README.md
@@ -11,10 +11,381 @@ <p> | ||
A plugin that 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. | ||
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. | ||
```html | ||
<article class="prose lg:prose-xl">{{ markdown }}</article> | ||
``` | ||
To see what it looks like in action, check out our [live demo](https://play.tailwindcss.com/uj1vGACRJA?layout=preview) on Tailwind Play. | ||
--- | ||
## Documentation | ||
## Installation | ||
For full documentation, visit [tailwindcss.com/docs/typography-plugin](https://tailwindcss.com/docs/typography-plugin). | ||
Install the plugin from npm: | ||
```shell | ||
npm install -D @tailwindcss/typography | ||
``` | ||
Then add the plugin to your `tailwind.config.js` file: | ||
```js | ||
/** @type {import('tailwindcss').Config} */ | ||
module.exports = { | ||
theme: { | ||
// ... | ||
}, | ||
plugins: [ | ||
require('@tailwindcss/typography'), | ||
// ... | ||
], | ||
} | ||
``` | ||
--- | ||
## Basic usage | ||
Now you can use the `prose` classes to add sensible typography styles to any vanilla HTML: | ||
```html | ||
<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> | ||
``` | ||
### Choosing a gray scale | ||
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. | ||
```html | ||
<article class="prose prose-slate">{{ markdown }}</article> | ||
``` | ||
Here are the classes that are generated using a totally default Tailwind CSS v2.0 build: | ||
| Class | Gray scale | | ||
| ------------------------ | ---------- | | ||
| `prose-gray` _(default)_ | Gray | | ||
| `prose-slate` | Slate | | ||
| `prose-zinc` | Zinc | | ||
| `prose-neutral` | Neutral | | ||
| `prose-stone` | Stone | | ||
Modifier 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. | ||
> [!NOTE] | ||
> Always include the `prose` class when adding a gray scale modifier | ||
```html | ||
<article class="prose prose-stone">{{ markdown }}</article> | ||
``` | ||
To learn about creating your own color themes, read the [adding custom color themes](#adding-custom-color-themes) documentation. | ||
### Applying a type scale | ||
Size modifiers allow you to adjust the overall size of your typography for different contexts. | ||
```html | ||
<article class="prose prose-xl">{{ markdown }}</article> | ||
``` | ||
Five different typography sizes are included out of the box: | ||
| Class | Body font size | | ||
| ------------------------ | ----------------- | | ||
| `prose-sm` | 0.875rem _(14px)_ | | ||
| `prose-base` _(default)_ | 1rem _(16px)_ | | ||
| `prose-lg` | 1.125rem _(18px)_ | | ||
| `prose-xl` | 1.25rem _(20px)_ | | ||
| `prose-2xl` | 1.5rem _(24px)_ | | ||
These 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: | ||
```html | ||
<article class="prose md:prose-lg lg:prose-xl">{{ markdown }}</article> | ||
``` | ||
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. | ||
Size 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. | ||
> [!NOTE] | ||
> Always include the `prose` class when adding a size modifier | ||
```html | ||
<article class="prose prose-lg">{{ markdown }}</article> | ||
``` | ||
To learn about customizing the included type scales, read the documentation on [customizing the CSS](#customizing-the-css). | ||
### Adapting to dark mode | ||
Each default color theme includes a hand-designed dark mode version that you can trigger by adding the `prose-invert` class: | ||
```html | ||
<article class="prose dark:prose-invert">{{ markdown }}</article> | ||
``` | ||
To learn about creating your own color themes, read the [adding custom color themes](#adding-custom-color-themes) documentation. | ||
### Element modifiers | ||
Use element modifiers to customize the style of individual elements in your content directly in your HTML: | ||
```html | ||
<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600"> | ||
{{ markdown }} | ||
</article> | ||
``` | ||
This makes it easy to do things like style links to match your brand, add a border radius to images, and tons more. | ||
Here's a complete list of available element modifiers: | ||
| Modifier | Target | | ||
| ---------------------------- | ---------------------------- | | ||
| `prose-headings:{utility}` | `h1`, `h2`, `h3`, `h4`, `th` | | ||
| `prose-lead:{utility}` | `[class~="lead"]` | | ||
| `prose-h1:{utility}` | `h1` | | ||
| `prose-h2:{utility}` | `h2` | | ||
| `prose-h3:{utility}` | `h3` | | ||
| `prose-h4:{utility}` | `h4` | | ||
| `prose-p:{utility}` | `p` | | ||
| `prose-a:{utility}` | `a` | | ||
| `prose-blockquote:{utility}` | `blockquote` | | ||
| `prose-figure:{utility}` | `figure` | | ||
| `prose-figcaption:{utility}` | `figcaption` | | ||
| `prose-strong:{utility}` | `strong` | | ||
| `prose-em:{utility}` | `em` | | ||
| `prose-kbd:{utility}` | `kbd` | | ||
| `prose-code:{utility}` | `code` | | ||
| `prose-pre:{utility}` | `pre` | | ||
| `prose-ol:{utility}` | `ol` | | ||
| `prose-ul:{utility}` | `ul` | | ||
| `prose-li:{utility}` | `li` | | ||
| `prose-table:{utility}` | `table` | | ||
| `prose-thead:{utility}` | `thead` | | ||
| `prose-tr:{utility}` | `tr` | | ||
| `prose-th:{utility}` | `th` | | ||
| `prose-td:{utility}` | `td` | | ||
| `prose-img:{utility}` | `img` | | ||
| `prose-video:{utility}` | `video` | | ||
| `prose-hr:{utility}` | `hr` | | ||
When stacking these modifiers with other modifiers like `hover`, you most likely want the other modifier to come first: | ||
```html | ||
<article class="prose prose-a:text-blue-600 hover:prose-a:text-blue-500">{{ markdown }}</article> | ||
``` | ||
Read the Tailwind CSS documentation on [ordering stacked modifiers](https://tailwindcss.com/docs/hover-focus-and-other-states#ordering-stacked-modifiers) to learn more. | ||
### 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. | ||
In those cases, all you need to do is add `max-w-none` to your content to override the embedded max-width: | ||
```html | ||
<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> | ||
``` | ||
--- | ||
## Advanced topics | ||
### 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: | ||
```html | ||
<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> | ||
``` | ||
Note that you can't nest new `prose` instances within a `not-prose` block at this time. | ||
### Adding custom color themes | ||
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: | ||
```js {{ filename: 'tailwind.config.js' }} | ||
/** @type {import('tailwindcss').Config} */ | ||
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'), | ||
// ... | ||
], | ||
} | ||
``` | ||
See our internal [style definitions](https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js) for some more examples. | ||
### Changing the default class name | ||
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: | ||
```js {{ filename: 'tailwind.config.js' }} | ||
/** @type {import('tailwindcss').Config} */ | ||
module.exports = { | ||
theme: { | ||
// ... | ||
}, | ||
plugins: [ | ||
require('@tailwindcss/typography')({ | ||
className: 'wysiwyg', | ||
}), | ||
] | ||
... | ||
} | ||
``` | ||
Now every instance of `prose` in the default class names will be replaced by your custom class name: | ||
```html | ||
<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> | ||
``` | ||
### Customizing the CSS | ||
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: | ||
```js {{ filename: 'tailwind.config.js' }} | ||
/** @type {import('tailwindcss').Config} */ | ||
module.exports = { | ||
theme: { | ||
extend: { | ||
typography: { | ||
DEFAULT: { | ||
css: { | ||
color: '#333', | ||
a: { | ||
color: '#3182ce', | ||
'&:hover': { | ||
color: '#2c5282', | ||
}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
plugins: [ | ||
require('@tailwindcss/typography'), | ||
// ... | ||
], | ||
} | ||
``` | ||
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: | ||
```js {{ filename: 'tailwind.config.js' }} | ||
/** @type {import('tailwindcss').Config} */ | ||
module.exports = { | ||
theme: { | ||
extend: { | ||
typography: (theme) => ({ | ||
DEFAULT: { | ||
css: { | ||
color: theme('colors.gray.800'), | ||
// ... | ||
}, | ||
}, | ||
}), | ||
}, | ||
}, | ||
plugins: [ | ||
require('@tailwindcss/typography'), | ||
// ... | ||
], | ||
} | ||
``` | ||
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](https://tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind plugins. | ||
See [the default styles](https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js) for this plugin for more in-depth examples of configuring each modifier. | ||
--- | ||
## Community | ||
@@ -21,0 +392,0 @@ |
@@ -93,2 +93,3 @@ const plugin = require('tailwindcss/plugin') | ||
['em'], | ||
['kbd'], | ||
['code'], | ||
@@ -95,0 +96,0 @@ ['pre'], |
@@ -698,2 +698,3 @@ const path = require('path') | ||
prose-em:italic | ||
prose-kbd:border-b-2 | ||
prose-code:font-mono | ||
@@ -811,2 +812,6 @@ prose-pre:font-mono | ||
} | ||
.prose-kbd\:border-b-2 | ||
:is(:where(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *))) { | ||
border-bottom-width: 2px; | ||
} | ||
.prose-code\:font-mono | ||
@@ -894,2 +899,3 @@ :is(:where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))) { | ||
markdown-em:italic | ||
markdown-kbd:border-b-2 | ||
markdown-code:font-mono | ||
@@ -1009,2 +1015,6 @@ markdown-pre:font-mono | ||
} | ||
.markdown-kbd\:border-b-2 | ||
:is(:where(kbd):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) { | ||
border-bottom-width: 2px; | ||
} | ||
.markdown-code\:font-mono | ||
@@ -1011,0 +1021,0 @@ :is(:where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) { |
@@ -10,2 +10,10 @@ const colors = require('tailwindcss/colors') | ||
const em = (px, base) => `${round(px / base)}em` | ||
const hexToRgb = (hex) => { | ||
hex = hex.replace('#', '') | ||
hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex | ||
const r = parseInt(hex.substring(0, 2), 16) | ||
const g = parseInt(hex.substring(2, 4), 16) | ||
const b = parseInt(hex.substring(4, 6), 16) | ||
return `${r} ${g} ${b}` | ||
} | ||
@@ -31,3 +39,3 @@ let defaultModifiers = { | ||
marginBottom: em(24, 18), | ||
paddingLeft: em(20, 18), | ||
paddingInlineStart: em(20, 18), | ||
}, | ||
@@ -61,2 +69,10 @@ h1: { | ||
}, | ||
picture: { | ||
marginTop: em(24, 14), | ||
marginBottom: em(24, 14), | ||
}, | ||
'picture > img': { | ||
marginTop: '0', | ||
marginBottom: '0', | ||
}, | ||
video: { | ||
@@ -66,2 +82,10 @@ marginTop: em(24, 14), | ||
}, | ||
kbd: { | ||
fontSize: em(12, 14), | ||
borderRadius: rem(5), | ||
paddingTop: em(2, 14), | ||
paddingInlineEnd: em(5, 14), | ||
paddingBottom: em(2, 14), | ||
paddingInlineStart: em(5, 14), | ||
}, | ||
code: { | ||
@@ -83,5 +107,5 @@ fontSize: em(12, 14), | ||
paddingTop: em(8, 12), | ||
paddingRight: em(12, 12), | ||
paddingInlineEnd: em(12, 12), | ||
paddingBottom: em(8, 12), | ||
paddingLeft: em(12, 12), | ||
paddingInlineStart: em(12, 12), | ||
}, | ||
@@ -91,3 +115,3 @@ ol: { | ||
marginBottom: em(16, 14), | ||
paddingLeft: em(22, 14), | ||
paddingInlineStart: em(22, 14), | ||
}, | ||
@@ -97,3 +121,3 @@ ul: { | ||
marginBottom: em(16, 14), | ||
paddingLeft: em(22, 14), | ||
paddingInlineStart: em(22, 14), | ||
}, | ||
@@ -105,6 +129,6 @@ li: { | ||
'ol > li': { | ||
paddingLeft: em(6, 14), | ||
paddingInlineStart: em(6, 14), | ||
}, | ||
'ul > li': { | ||
paddingLeft: em(6, 14), | ||
paddingInlineStart: em(6, 14), | ||
}, | ||
@@ -115,12 +139,12 @@ '> ul > li p': { | ||
}, | ||
'> ul > li > *:first-child': { | ||
'> ul > li > p:first-child': { | ||
marginTop: em(16, 14), | ||
}, | ||
'> ul > li > *:last-child': { | ||
'> ul > li > p:last-child': { | ||
marginBottom: em(16, 14), | ||
}, | ||
'> ol > li > *:first-child': { | ||
'> ol > li > p:first-child': { | ||
marginTop: em(16, 14), | ||
}, | ||
'> ol > li > *:last-child': { | ||
'> ol > li > p:last-child': { | ||
marginBottom: em(16, 14), | ||
@@ -132,2 +156,13 @@ }, | ||
}, | ||
dl: { | ||
marginTop: em(16, 14), | ||
marginBottom: em(16, 14), | ||
}, | ||
dt: { | ||
marginTop: em(16, 14), | ||
}, | ||
dd: { | ||
marginTop: em(4, 14), | ||
paddingInlineStart: em(22, 14), | ||
}, | ||
hr: { | ||
@@ -154,23 +189,23 @@ marginTop: em(40, 14), | ||
'thead th': { | ||
paddingRight: em(12, 12), | ||
paddingInlineEnd: em(12, 12), | ||
paddingBottom: em(8, 12), | ||
paddingLeft: em(12, 12), | ||
paddingInlineStart: em(12, 12), | ||
}, | ||
'thead th:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'thead th:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
'tbody td, tfoot td': { | ||
paddingTop: em(8, 12), | ||
paddingRight: em(12, 12), | ||
paddingInlineEnd: em(12, 12), | ||
paddingBottom: em(8, 12), | ||
paddingLeft: em(12, 12), | ||
paddingInlineStart: em(12, 12), | ||
}, | ||
'tbody td:first-child, tfoot td:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'tbody td:last-child, tfoot td:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
@@ -219,3 +254,3 @@ figure: { | ||
marginBottom: em(32, 20), | ||
paddingLeft: em(20, 20), | ||
paddingInlineStart: em(20, 20), | ||
}, | ||
@@ -249,2 +284,10 @@ h1: { | ||
}, | ||
picture: { | ||
marginTop: em(32, 16), | ||
marginBottom: em(32, 16), | ||
}, | ||
'picture > img': { | ||
marginTop: '0', | ||
marginBottom: '0', | ||
}, | ||
video: { | ||
@@ -254,2 +297,10 @@ marginTop: em(32, 16), | ||
}, | ||
kbd: { | ||
fontSize: em(14, 16), | ||
borderRadius: rem(5), | ||
paddingTop: em(3, 16), | ||
paddingInlineEnd: em(6, 16), | ||
paddingBottom: em(3, 16), | ||
paddingInlineStart: em(6, 16), | ||
}, | ||
code: { | ||
@@ -271,5 +322,5 @@ fontSize: em(14, 16), | ||
paddingTop: em(12, 14), | ||
paddingRight: em(16, 14), | ||
paddingInlineEnd: em(16, 14), | ||
paddingBottom: em(12, 14), | ||
paddingLeft: em(16, 14), | ||
paddingInlineStart: em(16, 14), | ||
}, | ||
@@ -279,3 +330,3 @@ ol: { | ||
marginBottom: em(20, 16), | ||
paddingLeft: em(26, 16), | ||
paddingInlineStart: em(26, 16), | ||
}, | ||
@@ -285,3 +336,3 @@ ul: { | ||
marginBottom: em(20, 16), | ||
paddingLeft: em(26, 16), | ||
paddingInlineStart: em(26, 16), | ||
}, | ||
@@ -293,6 +344,6 @@ li: { | ||
'ol > li': { | ||
paddingLeft: em(6, 16), | ||
paddingInlineStart: em(6, 16), | ||
}, | ||
'ul > li': { | ||
paddingLeft: em(6, 16), | ||
paddingInlineStart: em(6, 16), | ||
}, | ||
@@ -303,12 +354,12 @@ '> ul > li p': { | ||
}, | ||
'> ul > li > *:first-child': { | ||
'> ul > li > p:first-child': { | ||
marginTop: em(20, 16), | ||
}, | ||
'> ul > li > *:last-child': { | ||
'> ul > li > p:last-child': { | ||
marginBottom: em(20, 16), | ||
}, | ||
'> ol > li > *:first-child': { | ||
'> ol > li > p:first-child': { | ||
marginTop: em(20, 16), | ||
}, | ||
'> ol > li > *:last-child': { | ||
'> ol > li > p:last-child': { | ||
marginBottom: em(20, 16), | ||
@@ -320,2 +371,13 @@ }, | ||
}, | ||
dl: { | ||
marginTop: em(20, 16), | ||
marginBottom: em(20, 16), | ||
}, | ||
dt: { | ||
marginTop: em(20, 16), | ||
}, | ||
dd: { | ||
marginTop: em(8, 16), | ||
paddingInlineStart: em(26, 16), | ||
}, | ||
hr: { | ||
@@ -342,23 +404,23 @@ marginTop: em(48, 16), | ||
'thead th': { | ||
paddingRight: em(8, 14), | ||
paddingInlineEnd: em(8, 14), | ||
paddingBottom: em(8, 14), | ||
paddingLeft: em(8, 14), | ||
paddingInlineStart: em(8, 14), | ||
}, | ||
'thead th:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'thead th:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
'tbody td, tfoot td': { | ||
paddingTop: em(8, 14), | ||
paddingRight: em(8, 14), | ||
paddingInlineEnd: em(8, 14), | ||
paddingBottom: em(8, 14), | ||
paddingLeft: em(8, 14), | ||
paddingInlineStart: em(8, 14), | ||
}, | ||
'tbody td:first-child, tfoot td:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'tbody td:last-child, tfoot td:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
@@ -407,3 +469,3 @@ figure: { | ||
marginBottom: em(40, 24), | ||
paddingLeft: em(24, 24), | ||
paddingInlineStart: em(24, 24), | ||
}, | ||
@@ -437,2 +499,10 @@ h1: { | ||
}, | ||
picture: { | ||
marginTop: em(32, 18), | ||
marginBottom: em(32, 18), | ||
}, | ||
'picture > img': { | ||
marginTop: '0', | ||
marginBottom: '0', | ||
}, | ||
video: { | ||
@@ -442,2 +512,10 @@ marginTop: em(32, 18), | ||
}, | ||
kbd: { | ||
fontSize: em(16, 18), | ||
borderRadius: rem(5), | ||
paddingTop: em(4, 18), | ||
paddingInlineEnd: em(8, 18), | ||
paddingBottom: em(4, 18), | ||
paddingInlineStart: em(8, 18), | ||
}, | ||
code: { | ||
@@ -459,5 +537,5 @@ fontSize: em(16, 18), | ||
paddingTop: em(16, 16), | ||
paddingRight: em(24, 16), | ||
paddingInlineEnd: em(24, 16), | ||
paddingBottom: em(16, 16), | ||
paddingLeft: em(24, 16), | ||
paddingInlineStart: em(24, 16), | ||
}, | ||
@@ -467,3 +545,3 @@ ol: { | ||
marginBottom: em(24, 18), | ||
paddingLeft: em(28, 18), | ||
paddingInlineStart: em(28, 18), | ||
}, | ||
@@ -473,3 +551,3 @@ ul: { | ||
marginBottom: em(24, 18), | ||
paddingLeft: em(28, 18), | ||
paddingInlineStart: em(28, 18), | ||
}, | ||
@@ -481,6 +559,6 @@ li: { | ||
'ol > li': { | ||
paddingLeft: em(8, 18), | ||
paddingInlineStart: em(8, 18), | ||
}, | ||
'ul > li': { | ||
paddingLeft: em(8, 18), | ||
paddingInlineStart: em(8, 18), | ||
}, | ||
@@ -491,12 +569,12 @@ '> ul > li p': { | ||
}, | ||
'> ul > li > *:first-child': { | ||
'> ul > li > p:first-child': { | ||
marginTop: em(24, 18), | ||
}, | ||
'> ul > li > *:last-child': { | ||
'> ul > li > p:last-child': { | ||
marginBottom: em(24, 18), | ||
}, | ||
'> ol > li > *:first-child': { | ||
'> ol > li > p:first-child': { | ||
marginTop: em(24, 18), | ||
}, | ||
'> ol > li > *:last-child': { | ||
'> ol > li > p:last-child': { | ||
marginBottom: em(24, 18), | ||
@@ -508,2 +586,13 @@ }, | ||
}, | ||
dl: { | ||
marginTop: em(24, 18), | ||
marginBottom: em(24, 18), | ||
}, | ||
dt: { | ||
marginTop: em(24, 18), | ||
}, | ||
dd: { | ||
marginTop: em(12, 18), | ||
paddingInlineStart: em(28, 18), | ||
}, | ||
hr: { | ||
@@ -530,23 +619,23 @@ marginTop: em(56, 18), | ||
'thead th': { | ||
paddingRight: em(12, 16), | ||
paddingInlineEnd: em(12, 16), | ||
paddingBottom: em(12, 16), | ||
paddingLeft: em(12, 16), | ||
paddingInlineStart: em(12, 16), | ||
}, | ||
'thead th:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'thead th:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
'tbody td, tfoot td': { | ||
paddingTop: em(12, 16), | ||
paddingRight: em(12, 16), | ||
paddingInlineEnd: em(12, 16), | ||
paddingBottom: em(12, 16), | ||
paddingLeft: em(12, 16), | ||
paddingInlineStart: em(12, 16), | ||
}, | ||
'tbody td:first-child, tfoot td:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'tbody td:last-child, tfoot td:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
@@ -595,3 +684,3 @@ figure: { | ||
marginBottom: em(48, 30), | ||
paddingLeft: em(32, 30), | ||
paddingInlineStart: em(32, 30), | ||
}, | ||
@@ -625,2 +714,10 @@ h1: { | ||
}, | ||
picture: { | ||
marginTop: em(40, 20), | ||
marginBottom: em(40, 20), | ||
}, | ||
'picture > img': { | ||
marginTop: '0', | ||
marginBottom: '0', | ||
}, | ||
video: { | ||
@@ -630,2 +727,10 @@ marginTop: em(40, 20), | ||
}, | ||
kbd: { | ||
fontSize: em(18, 20), | ||
borderRadius: rem(5), | ||
paddingTop: em(5, 20), | ||
paddingInlineEnd: em(8, 20), | ||
paddingBottom: em(5, 20), | ||
paddingInlineStart: em(8, 20), | ||
}, | ||
code: { | ||
@@ -647,5 +752,5 @@ fontSize: em(18, 20), | ||
paddingTop: em(20, 18), | ||
paddingRight: em(24, 18), | ||
paddingInlineEnd: em(24, 18), | ||
paddingBottom: em(20, 18), | ||
paddingLeft: em(24, 18), | ||
paddingInlineStart: em(24, 18), | ||
}, | ||
@@ -655,3 +760,3 @@ ol: { | ||
marginBottom: em(24, 20), | ||
paddingLeft: em(32, 20), | ||
paddingInlineStart: em(32, 20), | ||
}, | ||
@@ -661,3 +766,3 @@ ul: { | ||
marginBottom: em(24, 20), | ||
paddingLeft: em(32, 20), | ||
paddingInlineStart: em(32, 20), | ||
}, | ||
@@ -669,6 +774,6 @@ li: { | ||
'ol > li': { | ||
paddingLeft: em(8, 20), | ||
paddingInlineStart: em(8, 20), | ||
}, | ||
'ul > li': { | ||
paddingLeft: em(8, 20), | ||
paddingInlineStart: em(8, 20), | ||
}, | ||
@@ -679,12 +784,12 @@ '> ul > li p': { | ||
}, | ||
'> ul > li > *:first-child': { | ||
'> ul > li > p:first-child': { | ||
marginTop: em(24, 20), | ||
}, | ||
'> ul > li > *:last-child': { | ||
'> ul > li > p:last-child': { | ||
marginBottom: em(24, 20), | ||
}, | ||
'> ol > li > *:first-child': { | ||
'> ol > li > p:first-child': { | ||
marginTop: em(24, 20), | ||
}, | ||
'> ol > li > *:last-child': { | ||
'> ol > li > p:last-child': { | ||
marginBottom: em(24, 20), | ||
@@ -696,2 +801,13 @@ }, | ||
}, | ||
dl: { | ||
marginTop: em(24, 20), | ||
marginBottom: em(24, 20), | ||
}, | ||
dt: { | ||
marginTop: em(24, 20), | ||
}, | ||
dd: { | ||
marginTop: em(12, 20), | ||
paddingInlineStart: em(32, 20), | ||
}, | ||
hr: { | ||
@@ -718,23 +834,23 @@ marginTop: em(56, 20), | ||
'thead th': { | ||
paddingRight: em(12, 18), | ||
paddingInlineEnd: em(12, 18), | ||
paddingBottom: em(16, 18), | ||
paddingLeft: em(12, 18), | ||
paddingInlineStart: em(12, 18), | ||
}, | ||
'thead th:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'thead th:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
'tbody td, tfoot td': { | ||
paddingTop: em(16, 18), | ||
paddingRight: em(12, 18), | ||
paddingInlineEnd: em(12, 18), | ||
paddingBottom: em(16, 18), | ||
paddingLeft: em(12, 18), | ||
paddingInlineStart: em(12, 18), | ||
}, | ||
'tbody td:first-child, tfoot td:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'tbody td:last-child, tfoot td:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
@@ -783,3 +899,3 @@ figure: { | ||
marginBottom: em(64, 36), | ||
paddingLeft: em(40, 36), | ||
paddingInlineStart: em(40, 36), | ||
}, | ||
@@ -813,2 +929,10 @@ h1: { | ||
}, | ||
picture: { | ||
marginTop: em(48, 24), | ||
marginBottom: em(48, 24), | ||
}, | ||
'picture > img': { | ||
marginTop: '0', | ||
marginBottom: '0', | ||
}, | ||
video: { | ||
@@ -818,2 +942,10 @@ marginTop: em(48, 24), | ||
}, | ||
kbd: { | ||
fontSize: em(20, 24), | ||
borderRadius: rem(6), | ||
paddingTop: em(6, 24), | ||
paddingInlineEnd: em(8, 24), | ||
paddingBottom: em(6, 24), | ||
paddingInlineStart: em(8, 24), | ||
}, | ||
code: { | ||
@@ -835,5 +967,5 @@ fontSize: em(20, 24), | ||
paddingTop: em(24, 20), | ||
paddingRight: em(32, 20), | ||
paddingInlineEnd: em(32, 20), | ||
paddingBottom: em(24, 20), | ||
paddingLeft: em(32, 20), | ||
paddingInlineStart: em(32, 20), | ||
}, | ||
@@ -843,3 +975,3 @@ ol: { | ||
marginBottom: em(32, 24), | ||
paddingLeft: em(38, 24), | ||
paddingInlineStart: em(38, 24), | ||
}, | ||
@@ -849,3 +981,3 @@ ul: { | ||
marginBottom: em(32, 24), | ||
paddingLeft: em(38, 24), | ||
paddingInlineStart: em(38, 24), | ||
}, | ||
@@ -857,6 +989,6 @@ li: { | ||
'ol > li': { | ||
paddingLeft: em(10, 24), | ||
paddingInlineStart: em(10, 24), | ||
}, | ||
'ul > li': { | ||
paddingLeft: em(10, 24), | ||
paddingInlineStart: em(10, 24), | ||
}, | ||
@@ -867,12 +999,12 @@ '> ul > li p': { | ||
}, | ||
'> ul > li > *:first-child': { | ||
'> ul > li > p:first-child': { | ||
marginTop: em(32, 24), | ||
}, | ||
'> ul > li > *:last-child': { | ||
'> ul > li > p:last-child': { | ||
marginBottom: em(32, 24), | ||
}, | ||
'> ol > li > *:first-child': { | ||
'> ol > li > p:first-child': { | ||
marginTop: em(32, 24), | ||
}, | ||
'> ol > li > *:last-child': { | ||
'> ol > li > p:last-child': { | ||
marginBottom: em(32, 24), | ||
@@ -884,2 +1016,13 @@ }, | ||
}, | ||
dl: { | ||
marginTop: em(32, 24), | ||
marginBottom: em(32, 24), | ||
}, | ||
dt: { | ||
marginTop: em(32, 24), | ||
}, | ||
dd: { | ||
marginTop: em(12, 24), | ||
paddingInlineStart: em(38, 24), | ||
}, | ||
hr: { | ||
@@ -906,23 +1049,23 @@ marginTop: em(72, 24), | ||
'thead th': { | ||
paddingRight: em(12, 20), | ||
paddingInlineEnd: em(12, 20), | ||
paddingBottom: em(16, 20), | ||
paddingLeft: em(12, 20), | ||
paddingInlineStart: em(12, 20), | ||
}, | ||
'thead th:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'thead th:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
'tbody td, tfoot td': { | ||
paddingTop: em(16, 20), | ||
paddingRight: em(12, 20), | ||
paddingInlineEnd: em(12, 20), | ||
paddingBottom: em(16, 20), | ||
paddingLeft: em(12, 20), | ||
paddingInlineStart: em(12, 20), | ||
}, | ||
'tbody td:first-child, tfoot td:first-child': { | ||
paddingLeft: '0', | ||
paddingInlineStart: '0', | ||
}, | ||
'tbody td:last-child, tfoot td:last-child': { | ||
paddingRight: '0', | ||
paddingInlineEnd: '0', | ||
}, | ||
@@ -954,24 +1097,2 @@ figure: { | ||
// Invert (for dark mode) | ||
invert: { | ||
css: { | ||
'--tw-prose-body': 'var(--tw-prose-invert-body)', | ||
'--tw-prose-headings': 'var(--tw-prose-invert-headings)', | ||
'--tw-prose-lead': 'var(--tw-prose-invert-lead)', | ||
'--tw-prose-links': 'var(--tw-prose-invert-links)', | ||
'--tw-prose-bold': 'var(--tw-prose-invert-bold)', | ||
'--tw-prose-counters': 'var(--tw-prose-invert-counters)', | ||
'--tw-prose-bullets': 'var(--tw-prose-invert-bullets)', | ||
'--tw-prose-hr': 'var(--tw-prose-invert-hr)', | ||
'--tw-prose-quotes': 'var(--tw-prose-invert-quotes)', | ||
'--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)', | ||
'--tw-prose-captions': 'var(--tw-prose-invert-captions)', | ||
'--tw-prose-code': 'var(--tw-prose-invert-code)', | ||
'--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)', | ||
'--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)', | ||
'--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)', | ||
'--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)', | ||
}, | ||
}, | ||
// Gray color themes | ||
@@ -992,2 +1113,4 @@ | ||
'--tw-prose-captions': colors.slate[500], | ||
'--tw-prose-kbd': colors.slate[900], | ||
'--tw-prose-kbd-shadows': hexToRgb(colors.slate[900]), | ||
'--tw-prose-code': colors.slate[900], | ||
@@ -1009,2 +1132,4 @@ '--tw-prose-pre-code': colors.slate[200], | ||
'--tw-prose-invert-captions': colors.slate[400], | ||
'--tw-prose-invert-kbd': colors.white, | ||
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | ||
'--tw-prose-invert-code': colors.white, | ||
@@ -1031,2 +1156,4 @@ '--tw-prose-invert-pre-code': colors.slate[300], | ||
'--tw-prose-captions': colors.gray[500], | ||
'--tw-prose-kbd': colors.gray[900], | ||
'--tw-prose-kbd-shadows': hexToRgb(colors.gray[900]), | ||
'--tw-prose-code': colors.gray[900], | ||
@@ -1048,2 +1175,4 @@ '--tw-prose-pre-code': colors.gray[200], | ||
'--tw-prose-invert-captions': colors.gray[400], | ||
'--tw-prose-invert-kbd': colors.white, | ||
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | ||
'--tw-prose-invert-code': colors.white, | ||
@@ -1070,2 +1199,4 @@ '--tw-prose-invert-pre-code': colors.gray[300], | ||
'--tw-prose-captions': colors.zinc[500], | ||
'--tw-prose-kbd': colors.zinc[900], | ||
'--tw-prose-kbd-shadows': hexToRgb(colors.zinc[900]), | ||
'--tw-prose-code': colors.zinc[900], | ||
@@ -1087,2 +1218,4 @@ '--tw-prose-pre-code': colors.zinc[200], | ||
'--tw-prose-invert-captions': colors.zinc[400], | ||
'--tw-prose-invert-kbd': colors.white, | ||
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | ||
'--tw-prose-invert-code': colors.white, | ||
@@ -1109,2 +1242,4 @@ '--tw-prose-invert-pre-code': colors.zinc[300], | ||
'--tw-prose-captions': colors.neutral[500], | ||
'--tw-prose-kbd': colors.neutral[900], | ||
'--tw-prose-kbd-shadows': hexToRgb(colors.neutral[900]), | ||
'--tw-prose-code': colors.neutral[900], | ||
@@ -1126,2 +1261,4 @@ '--tw-prose-pre-code': colors.neutral[200], | ||
'--tw-prose-invert-captions': colors.neutral[400], | ||
'--tw-prose-invert-kbd': colors.white, | ||
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | ||
'--tw-prose-invert-code': colors.white, | ||
@@ -1148,2 +1285,4 @@ '--tw-prose-invert-pre-code': colors.neutral[300], | ||
'--tw-prose-captions': colors.stone[500], | ||
'--tw-prose-kbd': colors.stone[900], | ||
'--tw-prose-kbd-shadows': hexToRgb(colors.stone[900]), | ||
'--tw-prose-code': colors.stone[900], | ||
@@ -1165,2 +1304,4 @@ '--tw-prose-pre-code': colors.stone[200], | ||
'--tw-prose-invert-captions': colors.stone[400], | ||
'--tw-prose-invert-kbd': colors.white, | ||
'--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | ||
'--tw-prose-invert-code': colors.white, | ||
@@ -1294,2 +1435,26 @@ '--tw-prose-invert-pre-code': colors.stone[300], | ||
}, | ||
// Invert (for dark mode) | ||
invert: { | ||
css: { | ||
'--tw-prose-body': 'var(--tw-prose-invert-body)', | ||
'--tw-prose-headings': 'var(--tw-prose-invert-headings)', | ||
'--tw-prose-lead': 'var(--tw-prose-invert-lead)', | ||
'--tw-prose-links': 'var(--tw-prose-invert-links)', | ||
'--tw-prose-bold': 'var(--tw-prose-invert-bold)', | ||
'--tw-prose-counters': 'var(--tw-prose-invert-counters)', | ||
'--tw-prose-bullets': 'var(--tw-prose-invert-bullets)', | ||
'--tw-prose-hr': 'var(--tw-prose-invert-hr)', | ||
'--tw-prose-quotes': 'var(--tw-prose-invert-quotes)', | ||
'--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)', | ||
'--tw-prose-captions': 'var(--tw-prose-invert-captions)', | ||
'--tw-prose-kbd': 'var(--tw-prose-invert-kbd)', | ||
'--tw-prose-kbd-shadows': 'var(--tw-prose-invert-kbd-shadows)', | ||
'--tw-prose-code': 'var(--tw-prose-invert-code)', | ||
'--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)', | ||
'--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)', | ||
'--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)', | ||
'--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)', | ||
}, | ||
}, | ||
} | ||
@@ -1365,2 +1530,6 @@ | ||
}, | ||
dt: { | ||
color: 'var(--tw-prose-headings)', | ||
fontWeight: '600', | ||
}, | ||
hr: { | ||
@@ -1374,4 +1543,4 @@ borderColor: 'var(--tw-prose-hr)', | ||
color: 'var(--tw-prose-quotes)', | ||
borderLeftWidth: '0.25rem', | ||
borderLeftColor: 'var(--tw-prose-quote-borders)', | ||
borderInlineStartWidth: '0.25rem', | ||
borderInlineStartColor: 'var(--tw-prose-quote-borders)', | ||
quotes: '"\\201C""\\201D""\\2018""\\2019"', | ||
@@ -1418,2 +1587,13 @@ }, | ||
img: {}, // Required to maintain correct order when merging | ||
picture: { | ||
display: 'block', | ||
}, | ||
video: {}, // Required to maintain correct order when merging | ||
kbd: { | ||
fontWeight: '500', | ||
fontFamily: 'inherit', | ||
color: 'var(--tw-prose-kbd)', | ||
boxShadow: | ||
'0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)', | ||
}, | ||
code: { | ||
@@ -1476,3 +1656,2 @@ color: 'var(--tw-prose-code)', | ||
tableLayout: 'auto', | ||
textAlign: 'left', | ||
marginTop: em(32, 16), | ||
@@ -1507,2 +1686,5 @@ marginBottom: em(32, 16), | ||
}, | ||
'th, td': { | ||
textAlign: 'start', | ||
}, | ||
'figure > *': {}, // Required to maintain correct order when merging | ||
@@ -1509,0 +1691,0 @@ figcaption: { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
110166
3158
399
8