Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@twind/preset-typography

Package Overview
Dependencies
Maintainers
1
Versions
59
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@twind/preset-typography - npm Package Compare versions

Comparing version 1.0.0-next.39 to 1.0.0-next-20221114221321

preset-typography.browser.dev.js
preset-typography.browser.dev.js.map
preset-typography.browser.js
preset-typography.browser.js.map
preset-typography.dev.cjs
preset-typography.dev.cjs.map
preset-typography.dev.js
preset-typography.dev.js.map
preset-typography.dev.mjs
preset-typography.esnext.dev.js
preset-typography.esnext.dev.js.map
preset-typography.global.dev.js
preset-typography.global.dev.js.map

20

CHANGELOG.md
# @twind/preset-typography
## 1.0.0-next-20221114221321
### Patch Changes
- big documentation update ([`a63ca2cb`](https://github.com/tw-in-js/twind/commit/a63ca2cbf450d8a6f72f4d60f5856cee88d16911))
- update to @tailwindcss/typography@0.5.7 ([`089b8977`](https://github.com/tw-in-js/twind/commit/089b8977a185acfd8d43b6bddd7f6e815d0989bc))
- Updated dependencies [[`fe891f9c`](https://github.com/tw-in-js/twind/commit/fe891f9c7990a041e0eccaff9a4f58d0834d46d2), [`a63ca2cb`](https://github.com/tw-in-js/twind/commit/a63ca2cbf450d8a6f72f4d60f5856cee88d16911), [`e2c17a2e`](https://github.com/tw-in-js/twind/commit/e2c17a2e8087875f1725e3b07bc32218d2f0c2c0), [`d481948b`](https://github.com/tw-in-js/twind/commit/d481948b0513a59cc3495d5e31f0437c9690d59b), [`a61e0d1d`](https://github.com/tw-in-js/twind/commit/a61e0d1d4a31be6f398b57ceefffdb04b6bceccf), [`e6acbea2`](https://github.com/tw-in-js/twind/commit/e6acbea2f48e3c6441e0cf71cd069f48500ca493), [`2ac8e695`](https://github.com/tw-in-js/twind/commit/2ac8e6950ad37bac0eb88116448bee8738388f59), [`0705e419`](https://github.com/tw-in-js/twind/commit/0705e41946e191974da76c2b27019755520d9c0a)]:
- twind@1.0.0-next-20221114221321
## 1.0.0
### Patch Changes
- update to @tailwindcss/typography@0.5.7 (089b8977)
- Updated dependencies [fe891f9c, e2c17a2e, d481948b, e6acbea2, 2ac8e695, 0705e419]:
- twind@1.0.0
## 1.0.0-next.39

@@ -4,0 +24,0 @@

33

package.json
{
"name": "@twind/preset-typography",
"version": "1.0.0-next.39",
"description": "Typography preset for twind",
"version": "1.0.0-next-20221114221321",
"description": "A twind preset 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.",
"type": "module",

@@ -13,3 +13,3 @@ "homepage": "https://twind.style",

"url": "git+https://github.com/tw-in-js/twind.git",
"direction": "packages/preset-typography"
"directory": "packages/preset-typography"
},

@@ -43,5 +43,2 @@ "keywords": [

},
"dependencies": {
"@swc/helpers": "^0.4.11"
},
"main": "./preset-typography.cjs",

@@ -51,4 +48,16 @@ "exports": {

"types": "./preset-typography.d.ts",
"development": {
"esnext": "./preset-typography.esnext.dev.js",
"module": "./preset-typography.dev.js",
"browser": "./preset-typography.browser.dev.js",
"script": "./preset-typography.global.dev.js",
"node": {
"import": "./preset-typography.dev.mjs",
"require": "./preset-typography.dev.cjs"
},
"default": "./preset-typography.dev.js"
},
"esnext": "./preset-typography.esnext.js",
"module": "./preset-typography.js",
"browser": "./preset-typography.browser.js",
"script": "./preset-typography.global.js",

@@ -59,6 +68,3 @@ "node": {

},
"default": {
"import": "./preset-typography.mjs",
"require": "./preset-typography.cjs"
}
"default": "./preset-typography.js"
},

@@ -69,3 +75,3 @@ "./package.json": "./package.json"

"peerDependencies": {
"twind": "1.0.0-next.39",
"twind": "1.0.0-next-20221114221321",
"typescript": "^4.8.4"

@@ -79,5 +85,7 @@ },

"publishConfig": {
"tag": "next",
"access": "public"
},
"dependencies": {
"@swc/helpers": "^0.4.11"
},
"module": "./preset-typography.js",

@@ -87,3 +95,4 @@ "esnext": "./preset-typography.esnext.js",

"jsdelivr": "./preset-typography.global.js",
"browser": "./preset-typography.browser.js",
"types": "./preset-typography.d.ts"
}

7

preset-typography.d.ts
import { BaseTheme, CSSNested, Preset } from 'twind';
/**
* [[include:packages/preset-typography/README.md]]
*
* @packageDocumentation
* @module
*/
declare module 'twind' {

@@ -11,0 +4,0 @@ interface CustomProperties {

635

preset-typography.esnext.js

@@ -1,634 +0,1 @@

import { toColorValue } from 'twind';
/**
* The class name to use the typographic utilities.
* To undo the styles to the elements, use it like
* `not-${className}` which is by default `not-prose`.
*
* Note: `not` utility is only available in class.
*
* @defaultValue `prose`
*/ /**
* Default color to use.
*
* @defaultValue 'gray'
*/ /**
* @defaultValue '700'
*/ /**
* @defaultValue '900'
*/ /**
* @defaultValue '600'
*/ /**
* @defaultValue '900'
*/ /**
* @defaultValue '900'
*/ /**
* @defaultValue '500'
*/ /**
* @defaultValue '300'
*/ /**
* @defaultValue '200'
*/ /**
* @defaultValue '900'
*/ /**
* @defaultValue '200'
*/ /**
* @defaultValue '500'
*/ /**
* @defaultValue '900'
*/ /**
* @defaultValue '200'
*/ /**
* @defaultValue '800'
*/ /**
* @defaultValue '300'
*/ /**
* @defaultValue '200'
*/ // invert colors (dark mode)
/**
* @defaultValue '300'
*/ /**
* @defaultValue '#fff'
*/ /**
* @defaultValue '400'
*/ /**
* @defaultValue '#fff'
*/ /**
* @defaultValue '#fff'
*/ /**
* @defaultValue '400'
*/ /**
* @defaultValue '600'
*/ /**
* @defaultValue '700'
*/ /**
* @defaultValue '100'
*/ /**
* @defaultValue '700'
*/ /**
* @defaultValue '400'
*/ /**
* @defaultValue '#fff'
*/ /**
* @defaultValue '300'
*/ /**
* @defaultValue 'rgb(0 0 0 / 50%)'
*/ /**
* @defaultValue '600'
*/ /**
* @defaultValue '700'
*/ /**
* Extend or override CSS selectors with CSS declaration block.
*
* @defaultValue undefined
*/ /**
* Twind Preset for Typography
*
* ```js
* // twind.config.js
* import { defineConfig } from 'twind'
* import presetTypography from '@twind/preset-typography'
*
* export default defineConfig({
* presets: [
* presetTypography(),
* ],
* })
* ```
*
* @returns typography preset
*/ function presetTypography({ className ='prose' , defaultColor ='gray' , extend ={} , colors ={} } = {}) {
colors = {
body: '700',
headings: '900',
lead: '600',
links: '900',
bold: '900',
counters: '500',
bullets: '300',
hr: '200',
quotes: '900',
'quote-borders': '200',
captions: '500',
code: '900',
'pre-code': '200',
'pre-bg': '800',
'th-borders': '300',
'td-borders': '200',
...colors,
// invert colors (dark mode)
dark: colors.dark === null ? null : {
body: '300',
headings: '#fff',
lead: '400',
links: '#fff',
bold: '#fff',
counters: '400',
bullets: '600',
hr: '700',
quotes: '100',
'quote-borders': '700',
captions: '400',
code: '#fff',
'pre-code': '300',
'pre-bg': 'rgb(0 0 0 / 50%)',
'th-borders': '600',
'td-borders': '700',
...colors.dark
}
};
return {
// for element modifiers: prose-img:rounded-xl, prose-headings
// & :is()
// & :is(:where(code):not(:where([class~="not-prose"] *)))
variants: [
[
'headings',
'h1,h2,h3,h4,th'
],
[
'lead',
'.lead'
],
[
'h1'
],
[
'h2'
],
[
'h3'
],
[
'h4'
],
[
'p'
],
[
'a'
],
[
'blockquote'
],
[
'figure'
],
[
'figcaption'
],
[
'strong'
],
[
'em'
],
[
'code'
],
[
'pre'
],
[
'ol'
],
[
'ul'
],
[
'li'
],
[
'table'
],
[
'thead'
],
[
'tr'
],
[
'th'
],
[
'td'
],
[
'img'
],
[
'video'
],
[
'hr'
]
].map(([name, selector = name])=>[
`${className}-${name}`,
(_, context)=>adjustSelector(className, selector[0] == '.' ? '.' + context.e(context.h(selector.slice(1))) : selector, context, (selector)=>`& :is(${selector.trim()})`)
]),
rules: [
// marker classes lead and not-prose
[
`(lead|not-${className})`,
({ 1: $1 }, { h })=>[
{
c: h($1)
}
]
],
[
`${className}-invert`,
{
'@layer defaults': {
'--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)'
}
}
],
// for type scale: prose-xl
[
className + '-',
({ $$ }, context)=>{
const css = getFontSize(context.theme('fontSize', $$));
return css && {
'@layer components': css
};
}
],
// for colors: prose-sky
[
className + '-',
({ $$ }, context)=>getColors($$, context)
],
// prose
[
className,
(_, context)=>({
// layer defaults
...getColors(defaultColor, context),
'@layer base': [
adjustSelectors(className, context, {
a: {
color: 'var(--tw-prose-links)',
textDecorationLine: 'underline',
fontWeight: '500'
},
strong: {
color: 'var(--tw-prose-bold)',
fontWeight: '600'
},
ul: {
listStyleType: 'disc'
},
ol: {
listStyleType: 'decimal'
},
'ol[type="A"]': {
listStyleType: 'upper-alpha'
},
'ol[type="a"]': {
listStyleType: 'lower-alpha'
},
'ol[type="A" s]': {
listStyleType: 'upper-alpha'
},
'ol[type="a" s]': {
listStyleType: 'lower-alpha'
},
'ol[type="I"]': {
listStyleType: 'upper-roman'
},
'ol[type="i"]': {
listStyleType: 'lower-roman'
},
'ol[type="I" s]': {
listStyleType: 'upper-roman'
},
'ol[type="i" s]': {
listStyleType: 'lower-roman'
},
'ol[type="1"]': {
listStyleType: 'decimal'
},
'ol,ul': {
marginTop: em(20, 16),
marginBottom: em(20, 16),
paddingLeft: em(26, 16)
},
li: {
marginTop: em(8, 16),
marginBottom: em(8, 16)
},
'ol>li,ul>li': {
paddingLeft: em(6, 16)
},
'>ul>li p': {
marginTop: em(12, 16),
marginBottom: em(12, 16)
},
'>ul>li>*:first-child,>ol>li>*:last-child': {
marginTop: em(20, 16)
},
'>ul>li>*:last-child,>ol>li>*:last-child': {
marginBottom: em(20, 16)
},
'ol>li::marker': {
fontWeight: '400',
color: 'var(--tw-prose-counters)'
},
'ul>li::marker': {
color: 'var(--tw-prose-bullets)'
},
'ul ul,ul ol,ol ul,ol ol': {
marginTop: em(12, 16),
marginBottom: em(12, 16)
},
hr: {
borderColor: 'var(--tw-prose-hr)',
borderTopWidth: '1',
marginTop: em(48, 16),
marginBottom: em(48, 16)
},
blockquote: {
marginTop: em(32, 20),
marginBottom: em(32, 20),
paddingLeft: em(20, 20),
fontWeight: '500',
fontStyle: 'italic',
color: 'var(--tw-prose-quotes)',
borderLeftWidth: '0.25rem',
borderLeftColor: 'var(--tw-prose-quote-borders)',
quotes: '"\\201C""\\201D""\\2018""\\2019"'
},
'blockquote p:first-of-type::before': {
content: 'open-quote'
},
'blockquote p:last-of-type::after': {
content: 'close-quote'
},
p: {
marginTop: em(20, 16),
marginBottom: em(20, 16)
},
h1: {
color: 'var(--tw-prose-headings)',
fontWeight: '800',
fontSize: em(36, 16),
marginTop: '0',
marginBottom: em(32, 36),
lineHeight: 1.15
},
'h1 strong': {
fontWeight: '900'
},
h2: {
color: 'var(--tw-prose-headings)',
fontWeight: '700',
fontSize: em(24, 16),
marginTop: em(48, 24),
marginBottom: em(24, 24),
lineHeight: '1.35'
},
'h2 strong': {
fontWeight: '800'
},
h3: {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
fontSize: em(20, 16),
marginTop: em(32, 20),
marginBottom: em(12, 20),
lineHeight: '1.6'
},
'h3 strong': {
fontWeight: '700'
},
h4: {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
marginTop: em(24, 16),
marginBottom: em(8, 16),
lineHeight: '1.5'
},
'h4 strong': {
fontWeight: '700'
},
'hr+*,h2+*,h3+*,h4+*': {
marginTop: '0'
},
'img,video,figure': {
marginTop: em(32, 16),
marginBottom: em(32, 16)
},
'figure>*': {
marginTop: '0',
marginBottom: '0'
},
figcaption: {
color: 'var(--tw-prose-captions)',
fontSize: em(14, 16),
lineHeight: '1.4',
marginTop: em(12, 14)
},
code: {
color: 'var(--tw-prose-code)',
fontWeight: '600',
fontSize: em(14, 16)
},
'code::before,code::after': {
content: '"`"'
},
'h2 code': {
fontSize: em(21, 24)
},
'h3 code': {
fontSize: em(18, 20)
},
'a code': {
color: 'var(--tw-prose-links)'
},
pre: {
color: 'var(--tw-prose-pre-code)',
backgroundColor: 'var(--tw-prose-pre-bg)',
overflowX: 'auto',
fontWeight: '400',
fontSize: em(14, 16),
lineHeight: '1.7',
marginTop: em(24, 14),
marginBottom: em(24, 14),
borderRadius: '0.375rem',
paddingTop: em(12, 14),
paddingRight: em(16, 14),
paddingBottom: em(12, 14),
paddingLeft: em(16, 14)
},
'pre code': {
backgroundColor: 'transparent',
borderWidth: '0',
borderRadius: '0',
padding: '0',
fontWeight: 'inherit',
color: 'inherit',
fontSize: 'inherit',
fontFamily: 'inherit',
lineHeight: 'inherit'
},
'pre code::before': {
content: 'none'
},
'pre code::after': {
content: 'none'
},
table: {
width: '100%',
tableLayout: 'auto',
textAlign: 'left',
marginTop: em(32, 16),
marginBottom: em(32, 16),
fontSize: em(14, 16),
lineHeight: '1.7'
},
thead: {
borderBottomWidth: '1px',
borderBottomColor: 'var(--tw-prose-th-borders)'
},
'thead th': {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
verticalAlign: 'bottom',
paddingRight: em(8, 14),
paddingBottom: em(8, 14),
paddingLeft: em(8, 14)
},
'thead th:first-child': {
paddingLeft: '0'
},
'thead th:last-child': {
paddingRight: '0'
},
'tbody tr': {
borderBottomWidth: '1px',
borderBottomColor: 'var(--tw-prose-td-borders)'
},
'tbody tr:last-child': {
borderBottomWidth: '0'
},
'tbody td': {
verticalAlign: 'baseline',
paddingTop: em(8, 14),
paddingRight: em(8, 14),
paddingBottom: em(8, 14),
paddingLeft: em(8, 14)
},
'tbody td:first-child': {
paddingLeft: '0'
},
'tbody td:last-child': {
paddingRight: '0'
},
[`.${context.e(context.h('lead'))}`]: {
color: 'var(--tw-prose-lead)',
fontSize: em(20, 16),
lineHeight: '1.6',
marginTop: em(24, 20),
marginBottom: em(24, 20)
},
'>:first-child': {
marginTop: '0'
},
'>:last-child': {
marginBottom: '0'
}
}),
adjustSelectors(className, context, extend)
],
'@layer components': {
...getFontSize(context.theme('fontSize', 'base')),
color: 'var(--tw-prose-body)',
maxWidth: 'theme(max-w.prose, 65ch)'
}
})
]
]
};
function getColors(colorName, context) {
const properties = {};
const darkProperties = {};
const set = (key, shade, target)=>{
const color = context.theme(`colors.${colorName}.${shade}`, shade);
target['--tw-prose-' + key] = toColorValue(color);
// support auto dark colors
const darkColor = target != darkProperties && context.d('colors', `${colorName}.${shade}`, color);
if (darkColor) {
darkProperties['--tw-prose-' + key] = toColorValue(darkColor);
}
};
for(const key in colors){
const shade = colors[key];
if (key != 'dark' && shade) {
set(key, shade, properties);
}
}
for(const key1 in colors.dark || {}){
const shade1 = colors.dark[key1];
if (shade1) {
if (colors.dark) {
// explicit dark colors - need to use `dark:prose-invert`
set('invert-' + key1, shade1, properties);
} else {
// auto dark colors
set(key1, shade1, darkProperties);
}
}
}
return Object.keys(properties).length ? {
'@layer defaults': {
'&': properties,
[context.v('dark')]: darkProperties
}
} : undefined;
}
}
function adjustSelectors(className, context, css) {
const result = {};
for(const selector in css){
result[adjustSelector(className, selector, context, (selector)=>`.${context.e(context.h(className))}${selector}`)] = css[selector];
}
return result;
}
function adjustSelector(className, selector, { e , h }, replace) {
// pseudo elements can't be matched
return selector.replace(// 1. if there no pseudo use whole selector
// 2. if there are pseudo replace prefix
/^[^>:]+$|(>)?((?:[^:,]+(?::[\w-]+)?)|:[\w-]+)(::[\w-]+)?/g, (_, prefix = ' ', selector = _, pseudoElement = '')=>replace(`${prefix}:where(${selector}):not(:where(.${e(h('not-' + className))} *))${pseudoElement}`));
}
function getFontSize(_) {
return _ ? typeof _ == 'string' ? {
fontSize: _
} : {
fontSize: _[0],
...typeof _[1] == 'string' ? {
lineHeight: _[1]
} : _[1]
} : undefined;
}
function em(px, base) {
return `${(px / base).toFixed(3).replace(/^0|\.?0+$/g, '')}em`;
}
export { presetTypography as default };
//# sourceMappingURL=preset-typography.esnext.js.map
export { default } from "./preset-typography.js";

2

preset-typography.global.js

@@ -1,1 +0,1 @@

this.twind=this.twind||{},this.twind.presetTypography=function(t){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(t[r]=o[r])}return t}).apply(this,arguments)}function o(){return e.apply(this,arguments)}function r(t,e,o){let r={};for(let n in o)r[i(t,n,e,o=>`.${e.e(e.h(t))}${o}`)]=o[n];return r}function i(t,e,{e:o,h:r},i){return e.replace(/^[^>:]+$|(>)?((?:[^:,]+(?::[\w-]+)?)|:[\w-]+)(::[\w-]+)?/g,(e,n=" ",l=e,a="")=>i(`${n}:where(${l}):not(:where(.${o(r("not-"+t))} *))${a}`))}function n(t){return t?"string"==typeof t?{fontSize:t}:o({fontSize:t[0]},"string"==typeof t[1]?{lineHeight:t[1]}:t[1]):void 0}function l(t,e){return`${(t/e).toFixed(3).replace(/^0|\.?0+$/g,"")}em`}return function({className:e="prose",defaultColor:a="gray",extend:p={},colors:d={}}={}){return d=o({body:"700",headings:"900",lead:"600",links:"900",bold:"900",counters:"500",bullets:"300",hr:"200",quotes:"900","quote-borders":"200",captions:"500",code:"900","pre-code":"200","pre-bg":"800","th-borders":"300","td-borders":"200"},d,{dark:null===d.dark?null:o({body:"300",headings:"#fff",lead:"400",links:"#fff",bold:"#fff",counters:"400",bullets:"600",hr:"700",quotes:"100","quote-borders":"700",captions:"400",code:"#fff","pre-code":"300","pre-bg":"rgb(0 0 0 / 50%)","th-borders":"600","td-borders":"700"},d.dark)}),{variants:[["headings","h1,h2,h3,h4,th"],["lead",".lead"],["h1"],["h2"],["h3"],["h4"],["p"],["a"],["blockquote"],["figure"],["figcaption"],["strong"],["em"],["code"],["pre"],["ol"],["ul"],["li"],["table"],["thead"],["tr"],["th"],["td"],["img"],["video"],["hr"]].map(([t,o=t])=>[`${e}-${t}`,(t,r)=>i(e,"."==o[0]?"."+r.e(r.h(o.slice(1))):o,r,t=>`& :is(${t.trim()})`)]),rules:[[`(lead|not-${e})`,({1:t},{h:e})=>[{c:e(t)}]],[`${e}-invert`,{"@layer defaults":{"--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)"}}],[e+"-",({$$:t},e)=>{let o=n(e.theme("fontSize",t));return o&&{"@layer components":o}}],[e+"-",({$$:t},e)=>s(t,e)],[e,(t,i)=>o({},s(a,i),{"@layer base":[r(e,i,{a:{color:"var(--tw-prose-links)",textDecorationLine:"underline",fontWeight:"500"},strong:{color:"var(--tw-prose-bold)",fontWeight:"600"},ul:{listStyleType:"disc"},ol:{listStyleType:"decimal"},'ol[type="A"]':{listStyleType:"upper-alpha"},'ol[type="a"]':{listStyleType:"lower-alpha"},'ol[type="A" s]':{listStyleType:"upper-alpha"},'ol[type="a" s]':{listStyleType:"lower-alpha"},'ol[type="I"]':{listStyleType:"upper-roman"},'ol[type="i"]':{listStyleType:"lower-roman"},'ol[type="I" s]':{listStyleType:"upper-roman"},'ol[type="i" s]':{listStyleType:"lower-roman"},'ol[type="1"]':{listStyleType:"decimal"},"ol,ul":{marginTop:l(20,16),marginBottom:l(20,16),paddingLeft:l(26,16)},li:{marginTop:l(8,16),marginBottom:l(8,16)},"ol>li,ul>li":{paddingLeft:l(6,16)},">ul>li p":{marginTop:l(12,16),marginBottom:l(12,16)},">ul>li>*:first-child,>ol>li>*:last-child":{marginTop:l(20,16)},">ul>li>*:last-child,>ol>li>*:last-child":{marginBottom:l(20,16)},"ol>li::marker":{fontWeight:"400",color:"var(--tw-prose-counters)"},"ul>li::marker":{color:"var(--tw-prose-bullets)"},"ul ul,ul ol,ol ul,ol ol":{marginTop:l(12,16),marginBottom:l(12,16)},hr:{borderColor:"var(--tw-prose-hr)",borderTopWidth:"1",marginTop:l(48,16),marginBottom:l(48,16)},blockquote:{marginTop:l(32,20),marginBottom:l(32,20),paddingLeft:l(20,20),fontWeight:"500",fontStyle:"italic",color:"var(--tw-prose-quotes)",borderLeftWidth:"0.25rem",borderLeftColor:"var(--tw-prose-quote-borders)",quotes:'"\\201C""\\201D""\\2018""\\2019"'},"blockquote p:first-of-type::before":{content:"open-quote"},"blockquote p:last-of-type::after":{content:"close-quote"},p:{marginTop:l(20,16),marginBottom:l(20,16)},h1:{color:"var(--tw-prose-headings)",fontWeight:"800",fontSize:l(36,16),marginTop:"0",marginBottom:l(32,36),lineHeight:1.15},"h1 strong":{fontWeight:"900"},h2:{color:"var(--tw-prose-headings)",fontWeight:"700",fontSize:l(24,16),marginTop:l(48,24),marginBottom:l(24,24),lineHeight:"1.35"},"h2 strong":{fontWeight:"800"},h3:{color:"var(--tw-prose-headings)",fontWeight:"600",fontSize:l(20,16),marginTop:l(32,20),marginBottom:l(12,20),lineHeight:"1.6"},"h3 strong":{fontWeight:"700"},h4:{color:"var(--tw-prose-headings)",fontWeight:"600",marginTop:l(24,16),marginBottom:l(8,16),lineHeight:"1.5"},"h4 strong":{fontWeight:"700"},"hr+*,h2+*,h3+*,h4+*":{marginTop:"0"},"img,video,figure":{marginTop:l(32,16),marginBottom:l(32,16)},"figure>*":{marginTop:"0",marginBottom:"0"},figcaption:{color:"var(--tw-prose-captions)",fontSize:l(14,16),lineHeight:"1.4",marginTop:l(12,14)},code:{color:"var(--tw-prose-code)",fontWeight:"600",fontSize:l(14,16)},"code::before,code::after":{content:'"`"'},"h2 code":{fontSize:l(21,24)},"h3 code":{fontSize:l(18,20)},"a code":{color:"var(--tw-prose-links)"},pre:{color:"var(--tw-prose-pre-code)",backgroundColor:"var(--tw-prose-pre-bg)",overflowX:"auto",fontWeight:"400",fontSize:l(14,16),lineHeight:"1.7",marginTop:l(24,14),marginBottom:l(24,14),borderRadius:"0.375rem",paddingTop:l(12,14),paddingRight:l(16,14),paddingBottom:l(12,14),paddingLeft:l(16,14)},"pre code":{backgroundColor:"transparent",borderWidth:"0",borderRadius:"0",padding:"0",fontWeight:"inherit",color:"inherit",fontSize:"inherit",fontFamily:"inherit",lineHeight:"inherit"},"pre code::before":{content:"none"},"pre code::after":{content:"none"},table:{width:"100%",tableLayout:"auto",textAlign:"left",marginTop:l(32,16),marginBottom:l(32,16),fontSize:l(14,16),lineHeight:"1.7"},thead:{borderBottomWidth:"1px",borderBottomColor:"var(--tw-prose-th-borders)"},"thead th":{color:"var(--tw-prose-headings)",fontWeight:"600",verticalAlign:"bottom",paddingRight:l(8,14),paddingBottom:l(8,14),paddingLeft:l(8,14)},"thead th:first-child":{paddingLeft:"0"},"thead th:last-child":{paddingRight:"0"},"tbody tr":{borderBottomWidth:"1px",borderBottomColor:"var(--tw-prose-td-borders)"},"tbody tr:last-child":{borderBottomWidth:"0"},"tbody td":{verticalAlign:"baseline",paddingTop:l(8,14),paddingRight:l(8,14),paddingBottom:l(8,14),paddingLeft:l(8,14)},"tbody td:first-child":{paddingLeft:"0"},"tbody td:last-child":{paddingRight:"0"},[`.${i.e(i.h("lead"))}`]:{color:"var(--tw-prose-lead)",fontSize:l(20,16),lineHeight:"1.6",marginTop:l(24,20),marginBottom:l(24,20)},">:first-child":{marginTop:"0"},">:last-child":{marginBottom:"0"}}),r(e,i,p)],"@layer components":o({},n(i.theme("fontSize","base")),{color:"var(--tw-prose-body)",maxWidth:"theme(max-w.prose, 65ch)"})})]]};function s(e,o){let r={},i={},n=(r,n,l)=>{let a=o.theme(`colors.${e}.${n}`,n);l["--tw-prose-"+r]=t.toColorValue(a);let p=l!=i&&o.d("colors",`${e}.${n}`,a);p&&(i["--tw-prose-"+r]=t.toColorValue(p))};for(let l in d){let a=d[l];"dark"!=l&&a&&n(l,a,r)}for(let p in d.dark||{}){let s=d.dark[p];s&&(d.dark?n("invert-"+p,s,r):n(p,s,i))}return Object.keys(r).length?{"@layer defaults":{"&":r,[o.v("dark")]:i}}:void 0}}}(twind);//# sourceMappingURL=preset-typography.global.js.map
this.twind=this.twind||{},this.twind.presetTypography=function(t){"use strict";function o(){return(o=Object.assign||function(t){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t}).apply(this,arguments)}function e(){return o.apply(this,arguments)}function r(t,o,e){let r={};for(let n in e)r[i(t,n,o,e=>`.${o.e(o.h(t))}${e}`)]=e[n];return r}function i(t,o,{e,h:r},i){return o.replace(/^[^>:]+$|(>)?((?:[^:,]+(?::[\w-]+)?)|:[\w-]+)(::[\w-]+)?/g,(o,n=" ",l=o,a="")=>i(`${n}:where(${l}):not(:where(.${e(r("not-"+t))} *))${a}`))}function n(t){return t?"string"==typeof t?{fontSize:t}:e({fontSize:t[0]},"string"==typeof t[1]?{lineHeight:t[1]}:t[1]):void 0}function l(t,o){return`${(t/o).toFixed(3).replace(/^0|\.?0+$/g,"")}em`}return function({className:o="prose",defaultColor:a="gray",extend:d={},colors:p={}}={}){return p=e({body:"700",headings:"900",lead:"600",links:"900",bold:"900",counters:"500",bullets:"300",hr:"200",quotes:"900","quote-borders":"200",captions:"500",code:"900","pre-code":"200","pre-bg":"800","th-borders":"300","td-borders":"200"},p,{dark:null===p.dark?null:e({body:"300",headings:"#fff",lead:"400",links:"#fff",bold:"#fff",counters:"400",bullets:"600",hr:"700",quotes:"100","quote-borders":"700",captions:"400",code:"#fff","pre-code":"300","pre-bg":"rgb(0 0 0 / 50%)","th-borders":"600","td-borders":"700"},p.dark)}),{variants:[["headings","h1,h2,h3,h4,h5,h6,th"],["h1"],["h2"],["h3"],["h4"],["h5"],["h6"],["p"],["a"],["blockquote"],["figure"],["figcaption"],["strong"],["em"],["code"],["pre"],["ol"],["ul"],["li"],["table"],["thead"],["tr"],["th"],["td"],["img"],["video"],["hr"],["lead",".lead"]].map(([t,e=t])=>[`${o}-${t}`,(t,r)=>i(o,"."==e[0]?"."+r.e(r.h(e.slice(1))):e,r,t=>`& :is(${t.trim()})`)]),rules:[[`(lead|not-${o})`,({1:t},{h:o})=>[{c:o(t)}]],[`${o}-invert`,{"@layer defaults":{"--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)"}}],[o+"-",({$$:t},o)=>{let e=n(o.theme("fontSize",t));return e&&{"@layer components":e}}],[o+"-",({$$:t},o)=>s(t,o)],[o,(t,i)=>e({},s(a,i),{"@layer base":[r(o,i,{a:{color:"var(--tw-prose-links)",textDecorationLine:"underline",fontWeight:"500"},strong:{color:"var(--tw-prose-bold)",fontWeight:"600"},"a strong,blockquote strong,thead th strong":{color:"inherit"},ul:{listStyleType:"disc"},ol:{listStyleType:"decimal"},'ol[type="A"]':{listStyleType:"upper-alpha"},'ol[type="a"]':{listStyleType:"lower-alpha"},'ol[type="A" s]':{listStyleType:"upper-alpha"},'ol[type="a" s]':{listStyleType:"lower-alpha"},'ol[type="I"]':{listStyleType:"upper-roman"},'ol[type="i"]':{listStyleType:"lower-roman"},'ol[type="I" s]':{listStyleType:"upper-roman"},'ol[type="i" s]':{listStyleType:"lower-roman"},'ol[type="1"]':{listStyleType:"decimal"},"ol,ul":{marginTop:l(20,16),marginBottom:l(20,16),paddingLeft:l(26,16)},li:{marginTop:l(8,16),marginBottom:l(8,16)},"ol>li,ul>li":{paddingLeft:l(6,16)},">ul>li p":{marginTop:l(12,16),marginBottom:l(12,16)},">ul>li>*:first-child,>ol>li>*:last-child":{marginTop:l(20,16)},">ul>li>*:last-child,>ol>li>*:last-child":{marginBottom:l(20,16)},"ol>li::marker":{fontWeight:"400",color:"var(--tw-prose-counters)"},"ul>li::marker":{color:"var(--tw-prose-bullets)"},"ul ul,ul ol,ol ul,ol ol":{marginTop:l(12,16),marginBottom:l(12,16)},hr:{borderColor:"var(--tw-prose-hr)",borderTopWidth:"1",marginTop:l(48,16),marginBottom:l(48,16)},blockquote:{marginTop:l(32,20),marginBottom:l(32,20),paddingLeft:l(20,20),fontWeight:"500",fontStyle:"italic",color:"var(--tw-prose-quotes)",borderLeftWidth:"0.25rem",borderLeftColor:"var(--tw-prose-quote-borders)",quotes:'"\\201C""\\201D""\\2018""\\2019"'},"blockquote p:first-of-type::before":{content:"open-quote"},"blockquote p:last-of-type::after":{content:"close-quote"},p:{marginTop:l(20,16),marginBottom:l(20,16)},h1:{color:"var(--tw-prose-headings)",fontWeight:"800",fontSize:l(36,16),marginTop:"0",marginBottom:l(32,36),lineHeight:1.15},"h1 strong":{fontWeight:"900",color:"inherit"},h2:{color:"var(--tw-prose-headings)",fontWeight:"700",fontSize:l(24,16),marginTop:l(48,24),marginBottom:l(24,24),lineHeight:"1.35"},"h2 strong":{fontWeight:"800",color:"inherit"},h3:{color:"var(--tw-prose-headings)",fontWeight:"600",fontSize:l(20,16),marginTop:l(32,20),marginBottom:l(12,20),lineHeight:"1.6"},"h3 strong":{fontWeight:"700",color:"inherit"},h4:{color:"var(--tw-prose-headings)",fontWeight:"600",marginTop:l(24,16),marginBottom:l(8,16),lineHeight:"1.5"},"h4 strong":{fontWeight:"700",color:"inherit"},"hr+*,h2+*,h3+*,h4+*":{marginTop:"0"},"img,video,figure":{marginTop:l(32,16),marginBottom:l(32,16)},"figure>*":{marginTop:"0",marginBottom:"0"},figcaption:{color:"var(--tw-prose-captions)",fontSize:l(14,16),lineHeight:"1.4",marginTop:l(12,14)},code:{color:"var(--tw-prose-code)",fontWeight:"600",fontSize:l(14,16)},"code::before,code::after":{content:'"`"'},"h2 code":{fontSize:l(21,24)},"h3 code":{fontSize:l(18,20)},"a code,h1 code,h2 code,h3 code,h4 code,blockquote code,thead th code":{color:"inherit"},pre:{color:"var(--tw-prose-pre-code)",backgroundColor:"var(--tw-prose-pre-bg)",overflowX:"auto",fontWeight:"400",fontSize:l(14,16),lineHeight:"1.7",marginTop:l(24,14),marginBottom:l(24,14),borderRadius:"0.375rem",paddingTop:l(12,14),paddingRight:l(16,14),paddingBottom:l(12,14),paddingLeft:l(16,14)},"pre code":{backgroundColor:"transparent",borderWidth:"0",borderRadius:"0",padding:"0",fontWeight:"inherit",color:"inherit",fontSize:"inherit",fontFamily:"inherit",lineHeight:"inherit"},"pre code::before":{content:"none"},"pre code::after":{content:"none"},table:{width:"100%",tableLayout:"auto",textAlign:"left",marginTop:l(32,16),marginBottom:l(32,16),fontSize:l(14,16),lineHeight:"1.7"},thead:{borderBottomWidth:"1px",borderBottomColor:"var(--tw-prose-th-borders)"},"thead th":{color:"var(--tw-prose-headings)",fontWeight:"600",verticalAlign:"bottom",paddingRight:l(8,14),paddingBottom:l(8,14),paddingLeft:l(8,14)},"thead th:first-child":{paddingLeft:"0"},"thead th:last-child":{paddingRight:"0"},"tbody tr":{borderBottomWidth:"1px",borderBottomColor:"var(--tw-prose-td-borders)"},"tbody tr:last-child":{borderBottomWidth:"0"},"tbody td,tfoot td":{verticalAlign:"baseline",paddingTop:l(8,14),paddingRight:l(8,14),paddingBottom:l(8,14),paddingLeft:l(8,14)},"tbody td:first-child,tfoot td:first-child":{paddingLeft:"0"},"tbody td:last-child,tfoot td:last-child":{paddingRight:"0"},[`.${i.e(i.h("lead"))}`]:{color:"var(--tw-prose-lead)",fontSize:l(20,16),lineHeight:"1.6",marginTop:l(24,20),marginBottom:l(24,20)},">:first-child":{marginTop:"0"},">:last-child":{marginBottom:"0"}}),r(o,i,d)],"@layer components":e({},n(i.theme("fontSize","base")),{color:"var(--tw-prose-body)",maxWidth:"theme(max-w.prose, 65ch)"})})]]};function s(o,e){let r={},i={},n=(r,n,l)=>{let a=e.theme(`colors.${o}.${n}`,n);l["--tw-prose-"+r]=t.toColorValue(a);let d=l!=i&&e.d("colors",`${o}.${n}`,a);d&&(i["--tw-prose-"+r]=t.toColorValue(d))};for(let l in p){let a=p[l];"dark"!=l&&a&&n(l,a,r)}for(let d in p.dark||{}){let s=p.dark[d];s&&(p.dark?n("invert-"+d,s,r):n(d,s,i))}return Object.keys(r).length?{"@layer defaults":{"&":r,[e.v("dark")]:i}}:void 0}}}(twind);//# sourceMappingURL=preset-typography.global.js.map

102

preset-typography.js
import { toColorValue } from 'twind';
/**

@@ -84,3 +83,4 @@ * The class name to use the typographic utilities.

* @defaultValue undefined
*/ /**
*/ // indirection wrapper to remove autocomplete functions from production bundles
/**
* Twind Preset for Typography

@@ -121,3 +121,3 @@ *

// invert colors (dark mode)
dark: colors.dark === null ? null : {
dark: null === colors.dark ? null : {
body: '300',

@@ -149,9 +149,5 @@ headings: '#fff',

'headings',
'h1,h2,h3,h4,th'
'h1,h2,h3,h4,h5,h6,th'
],
[
'lead',
'.lead'
],
[
'h1'

@@ -169,2 +165,8 @@ ],

[
'h5'
],
[
'h6'
],
[
'p'

@@ -228,6 +230,10 @@ ],

'hr'
],
[
'lead',
'.lead'
]
].map(([name, selector = name])=>[
`${className}-${name}`,
(_, context)=>adjustSelector(className, selector[0] == '.' ? '.' + context.e(context.h(selector.slice(1))) : selector, context, (selector)=>`& :is(${selector.trim()})`)
(_, context)=>adjustSelector(className, '.' == selector[0] ? '.' + context.e(context.h(selector.slice(1))) : selector, context, (selector)=>`& :is(${selector.trim()})`)
]),

@@ -271,3 +277,3 @@ rules: [

({ $$ }, context)=>{
const css = getFontSize(context.theme('fontSize', $$));
let css = getFontSize(context.theme('fontSize', $$));
return css && {

@@ -300,2 +306,5 @@ '@layer components': css

},
'a strong,blockquote strong,thead th strong': {
color: 'inherit'
},
ul: {

@@ -403,3 +412,4 @@ listStyleType: 'disc'

'h1 strong': {
fontWeight: '900'
fontWeight: '900',
color: 'inherit'
},

@@ -415,3 +425,4 @@ h2: {

'h2 strong': {
fontWeight: '800'
fontWeight: '800',
color: 'inherit'
},

@@ -427,3 +438,4 @@ h3: {

'h3 strong': {
fontWeight: '700'
fontWeight: '700',
color: 'inherit'
},

@@ -438,3 +450,4 @@ h4: {

'h4 strong': {
fontWeight: '700'
fontWeight: '700',
color: 'inherit'
},

@@ -472,4 +485,4 @@ 'hr+*,h2+*,h3+*,h4+*': {

},
'a code': {
color: 'var(--tw-prose-links)'
'a code,h1 code,h2 code,h3 code,h4 code,blockquote code,thead th code': {
color: 'inherit'
},

@@ -542,3 +555,3 @@ pre: {

},
'tbody td': {
'tbody td,tfoot td': {
verticalAlign: 'baseline',

@@ -550,6 +563,6 @@ paddingTop: em(8, 14),

},
'tbody td:first-child': {
'tbody td:first-child,tfoot td:first-child': {
paddingLeft: '0'
},
'tbody td:last-child': {
'tbody td:last-child,tfoot td:last-child': {
paddingRight: '0'

@@ -583,30 +596,18 @@ },

function getColors(colorName, context) {
const properties = {};
const darkProperties = {};
const set = (key, shade, target)=>{
const color = context.theme(`colors.${colorName}.${shade}`, shade);
let properties = {}, darkProperties = {}, set = (key, shade, target)=>{
let color = context.theme(`colors.${colorName}.${shade}`, shade);
target['--tw-prose-' + key] = toColorValue(color);
// support auto dark colors
const darkColor = target != darkProperties && context.d('colors', `${colorName}.${shade}`, color);
if (darkColor) {
darkProperties['--tw-prose-' + key] = toColorValue(darkColor);
}
let darkColor = target != darkProperties && context.d('colors', `${colorName}.${shade}`, color);
darkColor && (darkProperties['--tw-prose-' + key] = toColorValue(darkColor));
};
for(const key in colors){
const shade = colors[key];
if (key != 'dark' && shade) {
set(key, shade, properties);
}
for(let key in colors){
let shade = colors[key];
'dark' != key && shade && set(key, shade, properties);
}
for(const key1 in colors.dark || {}){
const shade1 = colors.dark[key1];
if (shade1) {
if (colors.dark) {
// explicit dark colors - need to use `dark:prose-invert`
set('invert-' + key1, shade1, properties);
} else {
// auto dark colors
set(key1, shade1, darkProperties);
}
}
for(let key1 in colors.dark || {}){
let shade1 = colors.dark[key1];
shade1 && (colors.dark ? // explicit dark colors - need to use `dark:prose-invert`
set('invert-' + key1, shade1, properties) : // auto dark colors
set(key1, shade1, darkProperties));
}

@@ -618,10 +619,8 @@ return Object.keys(properties).length ? {

}
} : undefined;
} : void 0;
}
}
function adjustSelectors(className, context, css) {
const result = {};
for(const selector in css){
result[adjustSelector(className, selector, context, (selector)=>`.${context.e(context.h(className))}${selector}`)] = css[selector];
}
let result = {};
for(let selector in css)result[adjustSelector(className, selector, context, (selector)=>`.${context.e(context.h(className))}${selector}`)] = css[selector];
return result;

@@ -636,10 +635,10 @@ }

function getFontSize(_) {
return _ ? typeof _ == 'string' ? {
return _ ? 'string' == typeof _ ? {
fontSize: _
} : {
fontSize: _[0],
...typeof _[1] == 'string' ? {
...'string' == typeof _[1] ? {
lineHeight: _[1]
} : _[1]
} : undefined;
} : void 0;
}

@@ -649,4 +648,3 @@ function em(px, base) {

}
export { presetTypography as default };
//# sourceMappingURL=preset-typography.js.map

83

README.md
# @twind/preset-typography [![MIT License](https://flat.badgen.net/github/license/tw-in-js/twind)](https://github.com/tw-in-js/twind/blob/next/LICENSE) [![Latest Release](https://flat.badgen.net/npm/v/@twind/preset-typography/next?icon=npm&label&cache=10800&color=blue)](https://www.npmjs.com/package/@twind/preset-typography/v/next) [![Github](https://flat.badgen.net/badge/icon/tw-in-js%2Ftwind%23preset-typography?icon=github&label)](https://github.com/tw-in-js/twind/tree/next/packages/preset-typography)
---
> Based on [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography).
## READ THIS FIRST!
**Twind v1 is still in beta. Expect bugs!**
---
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.
> Based on [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography).
- 📖 Study [the documentation](https://twind.style/preset-typography)
- 🤖 Try [the playground](https://twind.run/preset-typography)
- 🧭 Explore [the examples](https://twind.style/examples)
- 📓 Consult [the API reference](https://twind.style/packages/@twind/preset-typography)
- 📜 Read [the changelog](https://github.com/tw-in-js/twind/tree/next/packages/preset-typography/CHANGELOG.md)
## Installation
## 📖 Documentation
Install from npm:
The full documentation is available at [twind.style/preset-typography](https://twind.style/preset-typography).
```sh
npm install twind@next @twind/preset-typography@next
```
## 💬 Community
## Installation
For help, discussion about best practices, or any other conversation that would benefit from being searchable use [Github Discussions](https://github.com/tw-in-js/twind/discussions).
**with [twind](https://github.com/tw-in-js/twind/tree/next/packages/twind)**
To ask questions and discuss with other Twind users in real time use [Discord Chat](https://chat.twind.style).
```js
import { setup } from 'twind'
import presetTypography from '@twind/preset-typography'
## 🧱 Contribute
setup({
presets: [presetTypography(/* options */)],
/* config */
})
```
See the [Contributing Guide](../../CONTRIBUTING.md) for information on how to contribute to this project.
<details><summary>Usage with a script tag</summary>
## 📜 Changelog
```html
<head>
<script
src="https://cdn.jsdelivr.net/combine/npm/twind@next,npm/@twind/preset-typography@next"
crossorigin
></script>
<script>
twind.setup({
presets: [twind.presetTypography(/* options */)],
/* config */
})
</script>
</head>
```
The Changelog for this package is [available on GitHub](https://github.com/tw-in-js/twind/tree/next/packages/preset-typography/CHANGELOG.md).
</details>
## ⚖️ License
**with [Twind CDN](https://github.com/tw-in-js/twind/tree/next/packages/cdn)** — a drop-in replacement for [Tailwind CSS Play CDN](https://tailwindcss.com/docs/installation/play-cdn)
```html
<head>
<script
src="https://cdn.jsdelivr.net/combine/npm/@twind/cdn@next,npm/@twind/preset-typography@next"
crossorigin
></script>
<script>
twind.setup({
presets: [twind.presetTypography(/* options */)],
/* config */
})
</script>
</head>
```
## Usage
TBD
Most features of the [Tailwind CSSS › typography-plugin](https://tailwindcss.com/docs/typography-plugin) are implemented in the same way.
## Differences
- _Adding custom color themes_: every color from `theme.colors` is available via `prose-<color>`; the default color `gray` can be changed via `presetTypography({ defaultColor: '...'})`
- _Customizing the CSS_: can be done using `presetTypography({ extend: { /* CSS object */ } })`
The [MIT license](https://github.com/tw-in-js/twind/blob/main/LICENSE) governs your use of Twind.
preset-typography.esnext.js.map
preset-typography.cjs

Sorry, the diff of this file is not supported yet

preset-typography.cjs.map

Sorry, the diff of this file is not supported yet

preset-typography.global.js.map

Sorry, the diff of this file is not supported yet

preset-typography.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc