1module.exports = ({ theme }) => ({
2 DEFAULT: {
3 css: {
4 '--tw-prose-body': theme('colors.zinc.700'),
5 '--tw-prose-headings': theme('colors.zinc.900'),
6 '--tw-prose-links': theme('colors.emerald.500'),
7 '--tw-prose-links-hover': theme('colors.emerald.600'),
8 '--tw-prose-links-underline': theme('colors.emerald.500 / 0.3'),
9 '--tw-prose-bold': theme('colors.zinc.900'),
10 '--tw-prose-counters': theme('colors.zinc.500'),
11 '--tw-prose-bullets': theme('colors.zinc.300'),
12 '--tw-prose-hr': theme('colors.zinc.900 / 0.05'),
13 '--tw-prose-quotes': theme('colors.zinc.900'),
14 '--tw-prose-quote-borders': theme('colors.zinc.200'),
15 '--tw-prose-captions': theme('colors.zinc.500'),
16 '--tw-prose-code': theme('colors.zinc.900'),
17 '--tw-prose-code-bg': theme('colors.zinc.100'),
18 '--tw-prose-code-ring': theme('colors.zinc.300'),
19 '--tw-prose-th-borders': theme('colors.zinc.300'),
20 '--tw-prose-td-borders': theme('colors.zinc.200'),
21
22 '--tw-prose-invert-body': theme('colors.zinc.400'),
23 '--tw-prose-invert-headings': theme('colors.white'),
24 '--tw-prose-invert-links': theme('colors.emerald.400'),
25 '--tw-prose-invert-links-hover': theme('colors.emerald.500'),
26 '--tw-prose-invert-links-underline': theme('colors.emerald.500 / 0.3'),
27 '--tw-prose-invert-bold': theme('colors.white'),
28 '--tw-prose-invert-counters': theme('colors.zinc.400'),
29 '--tw-prose-invert-bullets': theme('colors.zinc.600'),
30 '--tw-prose-invert-hr': theme('colors.white / 0.05'),
31 '--tw-prose-invert-quotes': theme('colors.zinc.100'),
32 '--tw-prose-invert-quote-borders': theme('colors.zinc.700'),
33 '--tw-prose-invert-captions': theme('colors.zinc.400'),
34 '--tw-prose-invert-code': theme('colors.white'),
35 '--tw-prose-invert-code-bg': theme('colors.zinc.700 / 0.15'),
36 '--tw-prose-invert-code-ring': theme('colors.white / 0.1'),
37 '--tw-prose-invert-th-borders': theme('colors.zinc.600'),
38 '--tw-prose-invert-td-borders': theme('colors.zinc.700'),
39
40 // Base
41 color: 'var(--tw-prose-body)',
42 fontSize: theme('fontSize.sm')[0],
43 lineHeight: theme('lineHeight.7'),
44
45 // Layout
46 '> *': {
47 maxWidth: theme('maxWidth.2xl'),
48 marginLeft: 'auto',
49 marginRight: 'auto',
50 '@screen lg': {
51 maxWidth: theme('maxWidth.3xl'),
52 marginLeft: `calc(50% - min(50%, ${theme('maxWidth.lg')}))`,
53 marginRight: `calc(50% - min(50%, ${theme('maxWidth.lg')}))`,
54 },
55 },
56
57 // Text
58 p: {
59 marginTop: theme('spacing.6'),
60 marginBottom: theme('spacing.6'),
61 },
62 '[class~="lead"]': {
63 fontSize: theme('fontSize.base')[0],
64 ...theme('fontSize.base')[1],
65 },
66
67 // Lists
68 ol: {
69 listStyleType: 'decimal',
70 marginTop: theme('spacing.5'),
71 marginBottom: theme('spacing.5'),
72 paddingLeft: '1.625rem',
73 },
74 'ol[type="A"]': {
75 listStyleType: 'upper-alpha',
76 },
77 'ol[type="a"]': {
78 listStyleType: 'lower-alpha',
79 },
80 'ol[type="A" s]': {
81 listStyleType: 'upper-alpha',
82 },
83 'ol[type="a" s]': {
84 listStyleType: 'lower-alpha',
85 },
86 'ol[type="I"]': {
87 listStyleType: 'upper-roman',
88 },
89 'ol[type="i"]': {
90 listStyleType: 'lower-roman',
91 },
92 'ol[type="I" s]': {
93 listStyleType: 'upper-roman',
94 },
95 'ol[type="i" s]': {
96 listStyleType: 'lower-roman',
97 },
98 'ol[type="1"]': {
99 listStyleType: 'decimal',
100 },
101 ul: {
102 listStyleType: 'disc',
103 marginTop: theme('spacing.5'),
104 marginBottom: theme('spacing.5'),
105 paddingLeft: '1.625rem',
106 },
107 li: {
108 marginTop: theme('spacing.2'),
109 marginBottom: theme('spacing.2'),
110 },
111 ':is(ol, ul) > li': {
112 paddingLeft: theme('spacing[1.5]'),
113 },
114 'ol > li::marker': {
115 fontWeight: '400',
116 color: 'var(--tw-prose-counters)',
117 },
118 'ul > li::marker': {
119 color: 'var(--tw-prose-bullets)',
120 },
121 '> ul > li p': {
122 marginTop: theme('spacing.3'),
123 marginBottom: theme('spacing.3'),
124 },
125 '> ul > li > *:first-child': {
126 marginTop: theme('spacing.5'),
127 },
128 '> ul > li > *:last-child': {
129 marginBottom: theme('spacing.5'),
130 },
131 '> ol > li > *:first-child': {
132 marginTop: theme('spacing.5'),
133 },
134 '> ol > li > *:last-child': {
135 marginBottom: theme('spacing.5'),
136 },
137 'ul ul, ul ol, ol ul, ol ol': {
138 marginTop: theme('spacing.3'),
139 marginBottom: theme('spacing.3'),
140 },
141
142 // Horizontal rules
143 hr: {
144 borderColor: 'var(--tw-prose-hr)',
145 borderTopWidth: 1,
146 marginTop: theme('spacing.16'),
147 marginBottom: theme('spacing.16'),
148 maxWidth: 'none',
149 marginLeft: `calc(-1 * ${theme('spacing.4')})`,
150 marginRight: `calc(-1 * ${theme('spacing.4')})`,
151 '@screen sm': {
152 marginLeft: `calc(-1 * ${theme('spacing.6')})`,
153 marginRight: `calc(-1 * ${theme('spacing.6')})`,
154 },
155 '@screen lg': {
156 marginLeft: `calc(-1 * ${theme('spacing.8')})`,
157 marginRight: `calc(-1 * ${theme('spacing.8')})`,
158 },
159 },
160
161 // Quotes
162 blockquote: {
163 fontWeight: '500',
164 fontStyle: 'italic',
165 color: 'var(--tw-prose-quotes)',
166 borderLeftWidth: '0.25rem',
167 borderLeftColor: 'var(--tw-prose-quote-borders)',
168 quotes: '"\\201C""\\201D""\\2018""\\2019"',
169 marginTop: theme('spacing.8'),
170 marginBottom: theme('spacing.8'),
171 paddingLeft: theme('spacing.5'),
172 },
173 'blockquote p:first-of-type::before': {
174 content: 'open-quote',
175 },
176 'blockquote p:last-of-type::after': {
177 content: 'close-quote',
178 },
179
180 // Headings
181 h1: {
182 color: 'var(--tw-prose-headings)',
183 fontWeight: '700',
184 fontSize: theme('fontSize.2xl')[0],
185 ...theme('fontSize.2xl')[1],
186 marginBottom: theme('spacing.2'),
187 },
188 h2: {
189 color: 'var(--tw-prose-headings)',
190 fontWeight: '600',
191 fontSize: theme('fontSize.lg')[0],
192 ...theme('fontSize.lg')[1],
193 marginTop: theme('spacing.16'),
194 marginBottom: theme('spacing.2'),
195 },
196 h3: {
197 color: 'var(--tw-prose-headings)',
198 fontSize: theme('fontSize.base')[0],
199 ...theme('fontSize.base')[1],
200 fontWeight: '600',
201 marginTop: theme('spacing.10'),
202 marginBottom: theme('spacing.2'),
203 },
204
205 // Media
206 'img, video, figure': {
207 marginTop: theme('spacing.8'),
208 marginBottom: theme('spacing.8'),
209 },
210 'figure > *': {
211 marginTop: '0',
212 marginBottom: '0',
213 },
214 figcaption: {
215 color: 'var(--tw-prose-captions)',
216 fontSize: theme('fontSize.xs')[0],
217 ...theme('fontSize.xs')[1],
218 marginTop: theme('spacing.2'),
219 },
220
221 // Tables
222 table: {
223 width: '100%',
224 tableLayout: 'auto',
225 textAlign: 'left',
226 marginTop: theme('spacing.8'),
227 marginBottom: theme('spacing.8'),
228 lineHeight: theme('lineHeight.6'),
229 },
230 thead: {
231 borderBottomWidth: '1px',
232 borderBottomColor: 'var(--tw-prose-th-borders)',
233 },
234 'thead th': {
235 color: 'var(--tw-prose-headings)',
236 fontWeight: '600',
237 verticalAlign: 'bottom',
238 paddingRight: theme('spacing.2'),
239 paddingBottom: theme('spacing.2'),
240 paddingLeft: theme('spacing.2'),
241 },
242 'thead th:first-child': {
243 paddingLeft: '0',
244 },
245 'thead th:last-child': {
246 paddingRight: '0',
247 },
248 'tbody tr': {
249 borderBottomWidth: '1px',
250 borderBottomColor: 'var(--tw-prose-td-borders)',
251 },
252 'tbody tr:last-child': {
253 borderBottomWidth: '0',
254 },
255 'tbody td': {
256 verticalAlign: 'baseline',
257 },
258 tfoot: {
259 borderTopWidth: '1px',
260 borderTopColor: 'var(--tw-prose-th-borders)',
261 },
262 'tfoot td': {
263 verticalAlign: 'top',
264 },
265 ':is(tbody, tfoot) td': {
266 paddingTop: theme('spacing.2'),
267 paddingRight: theme('spacing.2'),
268 paddingBottom: theme('spacing.2'),
269 paddingLeft: theme('spacing.2'),
270 },
271 ':is(tbody, tfoot) td:first-child': {
272 paddingLeft: '0',
273 },
274 ':is(tbody, tfoot) td:last-child': {
275 paddingRight: '0',
276 },
277
278 // Inline elements
279 a: {
280 color: 'var(--tw-prose-links)',
281 textDecoration: 'underline transparent',
282 fontWeight: '500',
283 transitionProperty: 'color, text-decoration-color',
284 transitionDuration: theme('transitionDuration.DEFAULT'),
285 transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
286 '&:hover': {
287 color: 'var(--tw-prose-links-hover)',
288 textDecorationColor: 'var(--tw-prose-links-underline)',
289 },
290 },
291 ':is(h1, h2, h3) a': {
292 fontWeight: 'inherit',
293 },
294 strong: {
295 color: 'var(--tw-prose-bold)',
296 fontWeight: '600',
297 },
298 ':is(a, blockquote, thead th) strong': {
299 color: 'inherit',
300 },
301 code: {
302 color: 'var(--tw-prose-code)',
303 borderRadius: theme('borderRadius.lg'),
304 paddingTop: theme('padding.1'),
305 paddingRight: theme('padding[1.5]'),
306 paddingBottom: theme('padding.1'),
307 paddingLeft: theme('padding[1.5]'),
308 boxShadow: 'inset 0 0 0 1px var(--tw-prose-code-ring)',
309 backgroundColor: 'var(--tw-prose-code-bg)',
310 fontSize: theme('fontSize.2xs'),
311 },
312 ':is(a, h1, h2, h3, blockquote, thead th) code': {
313 color: 'inherit',
314 },
315 'h2 code': {
316 fontSize: theme('fontSize.base')[0],
317 fontWeight: 'inherit',
318 },
319 'h3 code': {
320 fontSize: theme('fontSize.sm')[0],
321 fontWeight: 'inherit',
322 },
323
324 // Overrides
325 ':is(h1, h2, h3) + *': {
326 marginTop: '0',
327 },
328 '> :first-child': {
329 marginTop: '0 !important',
330 },
331 '> :last-child': {
332 marginBottom: '0 !important',
333 },
334 },
335 },
336 invert: {
337 css: {
338 '--tw-prose-body': 'var(--tw-prose-invert-body)',
339 '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
340 '--tw-prose-links': 'var(--tw-prose-invert-links)',
341 '--tw-prose-links-hover': 'var(--tw-prose-invert-links-hover)',
342 '--tw-prose-links-underline': 'var(--tw-prose-invert-links-underline)',
343 '--tw-prose-bold': 'var(--tw-prose-invert-bold)',
344 '--tw-prose-counters': 'var(--tw-prose-invert-counters)',
345 '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
346 '--tw-prose-hr': 'var(--tw-prose-invert-hr)',
347 '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
348 '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
349 '--tw-prose-captions': 'var(--tw-prose-invert-captions)',
350 '--tw-prose-code': 'var(--tw-prose-invert-code)',
351 '--tw-prose-code-bg': 'var(--tw-prose-invert-code-bg)',
352 '--tw-prose-code-ring': 'var(--tw-prose-invert-code-ring)',
353 '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
354 '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
355 },
356 },
357})