Skip to content

Commit 6464163

Browse files
mcgoismcgois
committed
Add prose-inline-code element modifier (tailwindlabs#329)
* Add `prose-inline-code` element modifier (add selector, update readme and tests).
1 parent cacc7dc commit 6464163

File tree

4 files changed

+87
-29
lines changed

4 files changed

+87
-29
lines changed

‎README.md

+30-29
Original file line numberDiff line numberDiff line change
@@ -153,35 +153,36 @@ This makes it easy to do things like style links to match your brand, add a bord
153153

154154
Here's a complete list of available element modifiers:
155155

156-
| Modifier | Target |
157-
| ---------------------------- | ---------------------------- |
158-
| `prose-headings:{utility}` | `h1`, `h2`, `h3`, `h4`, `th` |
159-
| `prose-lead:{utility}` | `[class~="lead"]` |
160-
| `prose-h1:{utility}` | `h1` |
161-
| `prose-h2:{utility}` | `h2` |
162-
| `prose-h3:{utility}` | `h3` |
163-
| `prose-h4:{utility}` | `h4` |
164-
| `prose-p:{utility}` | `p` |
165-
| `prose-a:{utility}` | `a` |
166-
| `prose-blockquote:{utility}` | `blockquote` |
167-
| `prose-figure:{utility}` | `figure` |
168-
| `prose-figcaption:{utility}` | `figcaption` |
169-
| `prose-strong:{utility}` | `strong` |
170-
| `prose-em:{utility}` | `em` |
171-
| `prose-kbd:{utility}` | `kbd` |
172-
| `prose-code:{utility}` | `code` |
173-
| `prose-pre:{utility}` | `pre` |
174-
| `prose-ol:{utility}` | `ol` |
175-
| `prose-ul:{utility}` | `ul` |
176-
| `prose-li:{utility}` | `li` |
177-
| `prose-table:{utility}` | `table` |
178-
| `prose-thead:{utility}` | `thead` |
179-
| `prose-tr:{utility}` | `tr` |
180-
| `prose-th:{utility}` | `th` |
181-
| `prose-td:{utility}` | `td` |
182-
| `prose-img:{utility}` | `img` |
183-
| `prose-video:{utility}` | `video` |
184-
| `prose-hr:{utility}` | `hr` |
156+
| Modifier | Target |
157+
| ----------------------------- | ---------------------------- |
158+
| `prose-headings:{utility}` | `h1`, `h2`, `h3`, `h4`, `th` |
159+
| `prose-lead:{utility}` | `[class~="lead"]` |
160+
| `prose-h1:{utility}` | `h1` |
161+
| `prose-h2:{utility}` | `h2` |
162+
| `prose-h3:{utility}` | `h3` |
163+
| `prose-h4:{utility}` | `h4` |
164+
| `prose-p:{utility}` | `p` |
165+
| `prose-a:{utility}` | `a` |
166+
| `prose-blockquote:{utility}` | `blockquote` |
167+
| `prose-figure:{utility}` | `figure` |
168+
| `prose-figcaption:{utility}` | `figcaption` |
169+
| `prose-strong:{utility}` | `strong` |
170+
| `prose-em:{utility}` | `em` |
171+
| `prose-kbd:{utility}` | `kbd` |
172+
| `prose-inline-code:{utility}` | `inline code` |
173+
| `prose-code:{utility}` | `code` |
174+
| `prose-pre:{utility}` | `pre` |
175+
| `prose-ol:{utility}` | `ol` |
176+
| `prose-ul:{utility}` | `ul` |
177+
| `prose-li:{utility}` | `li` |
178+
| `prose-table:{utility}` | `table` |
179+
| `prose-thead:{utility}` | `thead` |
180+
| `prose-tr:{utility}` | `tr` |
181+
| `prose-th:{utility}` | `th` |
182+
| `prose-td:{utility}` | `td` |
183+
| `prose-img:{utility}` | `img` |
184+
| `prose-video:{utility}` | `video` |
185+
| `prose-hr:{utility}` | `hr` |
185186

186187
When stacking these modifiers with other modifiers like `hover`, you most likely want the other modifier to come first:
187188

‎demo/pages/inline-code.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import Head from 'next/head'
2+
3+
export default function Index() {
4+
return (
5+
<div className="antialiased text-gray-900 py-12 pl-32 space-y-12">
6+
<Head>
7+
<title>Tailwind CSS Typography</title>
8+
</Head>
9+
<div className="relative">
10+
<div className="relative prose prose-lg prose-code:text-sky-500">
11+
<h3>reaching all code</h3>
12+
<pre>
13+
<code>
14+
<span className="block">console.log('test 1')</span>
15+
<span className="block">console.log('test 2')</span>
16+
<span className="block">console.log('test 3')</span>
17+
</code>
18+
</pre>
19+
<p>
20+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet deleniti quis veniam{' '}
21+
<code>console.log('test inline')</code> repudiandae optio in at quibusdam autem vero
22+
excepturi.
23+
</p>
24+
</div>
25+
</div>
26+
<div className="relative">
27+
<div className="relative prose prose-lg prose-inline-code:text-rose-500">
28+
<h3>reaching inline code only</h3>
29+
<pre>
30+
<code>
31+
<span className="block">console.log('test 1')</span>
32+
<span className="block">console.log('test 2')</span>
33+
<span className="block">console.log('test 3')</span>
34+
</code>
35+
</pre>
36+
<p>
37+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet deleniti quis veniam
38+
debitis vel, hic sunt, nulla deserunt animi iure aliquid et,{' '}
39+
<code>console.log('test inline')</code> repudiandae optio in at quibusdam autem vero
40+
excepturi.
41+
</p>
42+
</div>
43+
</div>
44+
</div>
45+
)
46+
}
47+
48+
export const config = {
49+
unstable_runtimeJS: false,
50+
}

‎src/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ module.exports = plugin.withOptions(
9191
['strong'],
9292
['em'],
9393
['kbd'],
94+
['inline-code', ':not(pre)>code'],
9495
['code'],
9596
['pre'],
9697
['ol'],

‎src/index.test.js

+6
Original file line numberDiff line numberDiff line change
@@ -696,6 +696,7 @@ test('element variants', async () => {
696696
prose-strong:font-medium
697697
prose-em:italic
698698
prose-kbd:border-b-2
699+
prose-inline-code:px-4
699700
prose-code:font-mono
700701
prose-pre:font-mono
701702
prose-ol:pl-6
@@ -812,6 +813,11 @@ test('element variants', async () => {
812813
:is(:where(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
813814
border-bottom-width: 2px;
814815
}
816+
.prose-inline-code\:px-4
817+
:is(:where(:not(pre) > code):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
818+
padding-left: 1rem;
819+
padding-right: 1rem;
820+
}
815821
.prose-code\:font-mono
816822
:is(:where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
817823
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',

0 commit comments

Comments
 (0)