Skip to content

Commit b3e8c22

Browse files
adamwathansschogerRobinMalfait
authored
Improve customizability and v3 color support (#216)
* Start scaffolding out components/modifiers * WIP * Updated pre-code and pre-bg colors * WIP * Add some notes * WIP * handle nested objects, e.g.: `@media` * WIP * simplify invert mode * simplify base styles * add `prose-XXX` variants * update demo pages * bump tailwind version * mark insiders as a valid peer dependency * bump next * use package-lock.json file * cleanup * add more variants * rename `rules` to `hr` * update test snapshots We probably want to look at other testing mechanisms here. * cleanup index file * improve API * Simplify variants, add more element variants * Refactor to use ::marker * Tweak marker positions to work better across multiple browsers * Simplify testing strategy Co-authored-by: sschoger <[email protected]> Co-authored-by: Robin Malfait <[email protected]>
1 parent 5dd220b commit b3e8c22

16 files changed

+31456
-41127
lines changed

Diff for: ‎.github/workflows/nodejs.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ jobs:
2828
uses: actions/cache@v2
2929
with:
3030
path: node_modules
31-
key: nodeModules-${{ hashFiles('**/yarn.lock') }}-${{ matrix.node-version }}
31+
key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
3232
restore-keys: |
3333
nodeModules-
3434
- name: Install dependencies

Diff for: ‎.gitignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.next
22
node_modules
3-
package-lock.json
43
/demo/out
5-
coverage/
4+
coverage/

Diff for: ‎demo/components/MarkdownSampleShort.mdx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<p className="lead">
2+
Until now, trying to style an article, document, or blog post with Tailwind has been a very
3+
tedious task.
4+
</p>
5+
6+
The `@tailwindcss/typography` plugin is our attempt to give you what you _actually_ want, without any of the downsides of doing something stupid like disabling our base styles.
7+
8+
> Why is Tailwind removing the default styles on my `h1` elements? How do I disable this? What do you mean I lose all the other base styles too?
9+
10+
<div className="not-prose">
11+
<h2>Shouldn't be colored</h2>
12+
</div>
13+
14+
```html
15+
<p>
16+
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
17+
springing up around the country.
18+
</p>
19+
```
20+
21+
For more information about how to use the plugin and the features it includes, [read the documentation](https://github.com/tailwindcss/typography/blob/master/README.md).
22+
23+
---
24+
25+
## This is a heading
26+
27+
1. We want everything to look good out of the box.
28+
2. Really just the first reason, that's the whole point of the plugin.
29+
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
30+
31+
Now **I'm going to show you** an example of an unordered list to make sure that looks good, too:
32+
33+
- So here is the first item in this list.
34+
- In this example we're keeping the items short.
35+
- Later, we'll use longer, more complex list items.
36+
37+
Let's even style a table:
38+
39+
| Wrestler | Origin | Finisher |
40+
| ----------------------- | ------------ | ------------------ |
41+
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
42+
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
43+
| Randy Savage | Sarasota, FL | Elbow Drop |
44+
| Vader | Boulder, CO | Vader Bomb |
45+
| Razor Ramon | Chuluota, FL | Razor's Edge |
46+
47+
Finally, a figure with a caption:
48+
49+
<figure>
50+
<img
51+
src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&h=500&q=80"
52+
alt=""
53+
/>
54+
<figcaption>
55+
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
56+
classical Latin literature from 45 BC, making it over 2000 years old.
57+
</figcaption>
58+
</figure>
59+
60+
And that's the end of our little demo.

Diff for: ‎demo/pages/_app.js

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import 'tailwindcss/tailwind.css'
22
import React from 'react'
3-
import App from 'next/app'
43

5-
class MyApp extends App {
6-
render() {
7-
const { Component, pageProps } = this.props
8-
return <Component {...pageProps} />
9-
}
4+
export default function App({ Component, pageProps }) {
5+
return <Component {...pageProps} />
106
}
11-
12-
export default MyApp

Diff for: ‎demo/pages/dark.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Head from 'next/head'
2+
import MarkdownSampleShort from '../components/MarkdownSampleShort.mdx'
3+
4+
export default function Index() {
5+
return (
6+
<div className="antialiased text-gray-900">
7+
<Head>
8+
<title>Tailwind CSS Typography</title>
9+
</Head>
10+
<div className="grid">
11+
<div className="bg-white dark:bg-gray-900">
12+
<article className="py-12 px-4 prose prose-gray dark:prose-invert mx-auto">
13+
<h1>Are you happy now?</h1>
14+
<MarkdownSampleShort />
15+
</article>
16+
</div>
17+
</div>
18+
</div>
19+
)
20+
}
21+
22+
export const config = {
23+
unstable_runtimeJS: false,
24+
}

Diff for: ‎demo/pages/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function Index() {
4545
</a>
4646
</div>
4747
</div>
48-
<div className="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto">
48+
<div className="prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl 2xl:prose-2xl mx-auto">
4949
<MarkdownSample />
5050
</div>
5151
</div>

Diff for: ‎demo/pages/list-items.js

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import Head from 'next/head'
2+
import MarkdownSampleShort from '../components/MarkdownSampleShort.mdx'
3+
4+
export default function Index() {
5+
return (
6+
<div className="antialiased text-gray-900 py-12 pl-32 space-y-12">
7+
<Head>
8+
<title>Tailwind CSS Typography</title>
9+
</Head>
10+
<div className="relative">
11+
<div className="absolute inset-0 flex prose prose-sm opacity-0">
12+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
13+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
14+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
15+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
16+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
17+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
18+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
19+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
20+
</div>
21+
<div className="relative prose prose-sm">
22+
<h3>prose-sm</h3>
23+
<p>It's important to cover all of these use cases for a few reasons:</p>
24+
<ol>
25+
<li>We want everything to look good out of the box.</li>
26+
<li>Really just the first reason, that's the whole point of the plugin.</li>
27+
<li>
28+
Here's a third pretend reason though a list with three items looks more realistic than
29+
a list with two items.
30+
</li>
31+
<li>We want everything to look good out of the box.</li>
32+
<li>Really just the first reason, that's the whole point of the plugin.</li>
33+
</ol>
34+
<p>Now we're going to try out another header style.</p>
35+
<ul>
36+
<li>So here is the first item in this list.</li>
37+
<li>In this example we're keeping the items short.</li>
38+
<li>Later, we'll use longer, more complex list items.</li>
39+
</ul>
40+
</div>
41+
</div>
42+
<div className="relative">
43+
<div className="absolute inset-0 flex prose prose-base opacity-0">
44+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
45+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
46+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
47+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
48+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
49+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
50+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
51+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
52+
</div>
53+
<div className="relative prose prose-base">
54+
<h3>prose-base</h3>
55+
<p>It's important to cover all of these use cases for a few reasons:</p>
56+
<ol>
57+
<li>We want everything to look good out of the box.</li>
58+
<li>Really just the first reason, that's the whole point of the plugin.</li>
59+
<li>
60+
Here's a third pretend reason though a list with three items looks more realistic than
61+
a list with two items.
62+
</li>
63+
<li>We want everything to look good out of the box.</li>
64+
<li>Really just the first reason, that's the whole point of the plugin.</li>
65+
</ol>
66+
<p>Now we're going to try out another header style.</p>
67+
<ul>
68+
<li>So here is the first item in this list.</li>
69+
<li>In this example we're keeping the items short.</li>
70+
<li>Later, we'll use longer, more complex list items.</li>
71+
</ul>
72+
</div>
73+
</div>
74+
<div className="relative">
75+
<div className="absolute inset-0 flex prose prose-lg opacity-0">
76+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
77+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
78+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
79+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
80+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
81+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
82+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
83+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
84+
</div>
85+
<div className="relative prose prose-lg">
86+
<h3>prose-lg</h3>
87+
<p>It's important to cover all of these use cases for a few reasons:</p>
88+
<ol>
89+
<li>We want everything to look good out of the box.</li>
90+
<li>Really just the first reason, that's the whole point of the plugin.</li>
91+
<li>
92+
Here's a third pretend reason though a list with three items looks more realistic than
93+
a list with two items.
94+
</li>
95+
<li>We want everything to look good out of the box.</li>
96+
<li>Really just the first reason, that's the whole point of the plugin.</li>
97+
</ol>
98+
<p>Now we're going to try out another header style.</p>
99+
<ul>
100+
<li>So here is the first item in this list.</li>
101+
<li>In this example we're keeping the items short.</li>
102+
<li>Later, we'll use longer, more complex list items.</li>
103+
</ul>
104+
</div>
105+
</div>
106+
<div className="relative">
107+
<div className="absolute inset-0 flex prose prose-xl opacity-0">
108+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
109+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
110+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
111+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
112+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
113+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
114+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
115+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
116+
</div>
117+
<div className="relative prose prose-xl">
118+
<h3>prose-xl</h3>
119+
<p>It's important to cover all of these use cases for a few reasons:</p>
120+
<ol>
121+
<li>We want everything to look good out of the box.</li>
122+
<li>Really just the first reason, that's the whole point of the plugin.</li>
123+
<li>
124+
Here's a third pretend reason though a list with three items looks more realistic than
125+
a list with two items.
126+
</li>
127+
<li>We want everything to look good out of the box.</li>
128+
<li>Really just the first reason, that's the whole point of the plugin.</li>
129+
</ol>
130+
<p>Now we're going to try out another header style.</p>
131+
<ul>
132+
<li>So here is the first item in this list.</li>
133+
<li>In this example we're keeping the items short.</li>
134+
<li>Later, we'll use longer, more complex list items.</li>
135+
</ul>
136+
</div>
137+
</div>
138+
<div className="relative">
139+
<div className="absolute inset-0 flex prose prose-2xl opacity-0">
140+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
141+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
142+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
143+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
144+
<div className="border-l border-red-200" style={{ width: '1em' }}></div>
145+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
146+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
147+
<div className="border-l border-red-100" style={{ width: '1em' }}></div>
148+
</div>
149+
<div className="relative prose prose-2xl">
150+
<h3>prose-2xl</h3>
151+
<p>It's important to cover all of these use cases for a few reasons:</p>
152+
<ol>
153+
<li>We want everything to look good out of the box.</li>
154+
<li>Really just the first reason, that's the whole point of the plugin.</li>
155+
<li>
156+
Here's a third pretend reason though a list with three items looks more realistic than
157+
a list with two items.
158+
</li>
159+
<li>We want everything to look good out of the box.</li>
160+
<li>Really just the first reason, that's the whole point of the plugin.</li>
161+
</ol>
162+
<p>Now we're going to try out another header style.</p>
163+
<ul>
164+
<li>So here is the first item in this list.</li>
165+
<li>In this example we're keeping the items short.</li>
166+
<li>Later, we'll use longer, more complex list items.</li>
167+
</ul>
168+
</div>
169+
</div>
170+
</div>
171+
)
172+
}
173+
174+
export const config = {
175+
unstable_runtimeJS: false,
176+
}

0 commit comments

Comments
 (0)