Skip to content

Commit

Permalink
Add prose-inline-code element modifier (tailwindlabs#329)
Browse files Browse the repository at this point in the history 
* Add `prose-inline-code` element modifier (add selector, update readme and tests).
  • Loading branch information
@mcgois
mcgois committed Mar 28, 2024
1 parent cacc7dc commit 6464163
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 29 deletions.
59 changes: 30 additions & 29 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,35 +153,36 @@ This makes it easy to do things like style links to match your brand, add a bord

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` |
| 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-inline-code:{utility}` | `inline code` |
| `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:

Expand Down
50 changes: 50 additions & 0 deletions demo/pages/inline-code.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import Head from 'next/head'

export default function Index() {
return (
<div className="antialiased text-gray-900 py-12 pl-32 space-y-12">
<Head>
<title>Tailwind CSS Typography</title>
</Head>
<div className="relative">
<div className="relative prose prose-lg prose-code:text-sky-500">
<h3>reaching all code</h3>
<pre>
<code>
<span className="block">console.log('test 1')</span>
<span className="block">console.log('test 2')</span>
<span className="block">console.log('test 3')</span>
</code>
</pre>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet deleniti quis veniam{' '}
<code>console.log('test inline')</code> repudiandae optio in at quibusdam autem vero
excepturi.
</p>
</div>
</div>
<div className="relative">
<div className="relative prose prose-lg prose-inline-code:text-rose-500">
<h3>reaching inline code only</h3>
<pre>
<code>
<span className="block">console.log('test 1')</span>
<span className="block">console.log('test 2')</span>
<span className="block">console.log('test 3')</span>
</code>
</pre>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet deleniti quis veniam
debitis vel, hic sunt, nulla deserunt animi iure aliquid et,{' '}
<code>console.log('test inline')</code> repudiandae optio in at quibusdam autem vero
excepturi.
</p>
</div>
</div>
</div>
)
}

export const config = {
unstable_runtimeJS: false,
}
1 change: 1 addition & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ module.exports = plugin.withOptions(
['strong'],
['em'],
['kbd'],
['inline-code', ':not(pre)>code'],
['code'],
['pre'],
['ol'],
Expand Down
6 changes: 6 additions & 0 deletions src/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -696,6 +696,7 @@ test('element variants', async () => {
prose-strong:font-medium
prose-em:italic
prose-kbd:border-b-2
prose-inline-code:px-4
prose-code:font-mono
prose-pre:font-mono
prose-ol:pl-6
Expand Down Expand Up @@ -812,6 +813,11 @@ test('element variants', async () => {
:is(:where(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
border-bottom-width: 2px;
}
.prose-inline-code\:px-4
:is(:where(:not(pre) > code):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
padding-left: 1rem;
padding-right: 1rem;
}
.prose-code\:font-mono
:is(:where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
Expand Down

0 comments on commit 6464163

Please sign in to comment.