Skip to content

Improve customizability and v3 color support #216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adamwathan merged 26 commits into from
Nov 7, 2021
Merged

Improve customizability and v3 color support #216

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
b5e3df5
Start scaffolding out components/modifiers
adamwathan Oct 2, 2021
1a59fec
WIP
adamwathan Oct 4, 2021
ea10b46
Updated pre-code and pre-bg colors
sschoger Oct 4, 2021
a71d918
WIP
adamwathan Oct 6, 2021
1a59466
Add some notes
adamwathan Oct 6, 2021
ce113c4
WIP
adamwathan Oct 8, 2021
da526ff
handle nested objects, e.g.: `@media`
RobinMalfait Oct 8, 2021
d39ae9f
WIP
adamwathan Oct 28, 2021
d46c458
simplify invert mode
RobinMalfait Oct 29, 2021
376ebe8
simplify base styles
RobinMalfait Oct 29, 2021
a025111
add `prose-XXX` variants
RobinMalfait Oct 29, 2021
b51b8ae
update demo pages
RobinMalfait Oct 29, 2021
a2b6a80
bump tailwind version
RobinMalfait Oct 29, 2021
d564a7d
mark insiders as a valid peer dependency
RobinMalfait Oct 29, 2021
16fac3b
bump next
RobinMalfait Oct 29, 2021
9a3afb8
use package-lock.json file
RobinMalfait Oct 29, 2021
a0b4ce5
cleanup
RobinMalfait Oct 29, 2021
f907e68
add more variants
RobinMalfait Oct 29, 2021
d432845
rename `rules` to `hr`
RobinMalfait Nov 2, 2021
68afb20
update test snapshots
RobinMalfait Nov 2, 2021
1270ac0
cleanup index file
RobinMalfait Nov 2, 2021
138122d
improve API
RobinMalfait Nov 2, 2021
e058363
Simplify variants, add more element variants
adamwathan Nov 2, 2021
a698d74
Refactor to use ::marker
adamwathan Nov 3, 2021
b2b08c5
Tweak marker positions to work better across multiple browsers
adamwathan Nov 4, 2021
785e83f
Simplify testing strategy
adamwathan Nov 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
WIP
  • Loading branch information
@adamwathan
adamwathan committed Oct 4, 2021
commit 1a59fec89ad119e6531a9fa25f589e18bf4c46cf
56 changes: 56 additions & 0 deletions demo/components/MarkdownSampleShort.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<p className="lead">
Until now, trying to style an article, document, or blog post with Tailwind has been a very
tedious task.
</p>

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.

> 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?

```html
<p>
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
springing up around the country.
</p>
```

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).

---

## This is a heading

1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.

Now **I'm going to show you** an example of an unordered list to make sure that looks good, too:

- So here is the first item in this list.
- In this example we're keeping the items short.
- Later, we'll use longer, more complex list items.

Let's even style a table:

| Wrestler | Origin | Finisher |
| ----------------------- | ------------ | ------------------ |
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
| Randy Savage | Sarasota, FL | Elbow Drop |
| Vader | Boulder, CO | Vader Bomb |
| Razor Ramon | Chuluota, FL | Razor's Edge |

Finally, a figure with a caption:

<figure>
<img
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"
alt=""
/>
<figcaption>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old.
</figcaption>
</figure>

And that's the end of our little demo.
238 changes: 238 additions & 0 deletions demo/pages/themes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
import Head from 'next/head'
import MarkdownSampleShort from '../components/MarkdownSampleShort.mdx'

export default function Index() {
return (
<div className="antialiased text-gray-900">
<Head>
<title>Tailwind CSS Typography</title>
</Head>
<div className="grid grid-cols-2">
<div className="bg-white dark:bg-slate-900">
<article className="py-12 px-4 prose prose-slate dark:prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-slate-900">
<article className="py-12 px-4 prose prose-slate prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-gray-50">
<article className="py-12 px-4 prose prose-gray mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-gray-900">
<article className="py-12 px-4 prose prose-gray prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-zinc-50">
<article className="py-12 px-4 prose prose-zinc mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-zinc-900">
<article className="py-12 px-4 prose prose-zinc prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-neutral-50">
<article className="py-12 px-4 prose prose-neutral mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-neutral-900">
<article className="py-12 px-4 prose prose-neutral prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-stone-50">
<article className="py-12 px-4 prose prose-stone mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-stone-900">
<article className="py-12 px-4 prose prose-stone prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-white">
<article className="py-12 px-4 prose prose-red mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-black">
<article className="py-12 px-4 prose prose-red prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-orange-100">
<article className="py-12 px-4 prose prose-orange mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-orange-900">
<article className="py-12 px-4 prose prose-orange prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-amber-100">
<article className="py-12 px-4 prose prose-amber mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-amber-900">
<article className="py-12 px-4 prose prose-amber prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-yellow-100">
<article className="py-12 px-4 prose prose-yellow mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-yellow-900">
<article className="py-12 px-4 prose prose-yellow prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-lime-100">
<article className="py-12 px-4 prose prose-lime mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-black">
<article className="py-12 px-4 prose prose-lime prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-green-100">
<article className="py-12 px-4 prose prose-green mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-green-900">
<article className="py-12 px-4 prose prose-green prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-emerald-100">
<article className="py-12 px-4 prose prose-emerald mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-emerald-900">
<article className="py-12 px-4 prose prose-emerald prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-teal-100">
<article className="py-12 px-4 prose prose-teal mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-teal-900">
<article className="py-12 px-4 prose prose-teal prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-cyan-100">
<article className="py-12 px-4 prose prose-cyan mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-cyan-900">
<article className="py-12 px-4 prose prose-cyan prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-sky-100">
<article className="py-12 px-4 prose prose-sky mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-sky-900">
<article className="py-12 px-4 prose prose-sky prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-blue-100">
<article className="py-12 px-4 prose prose-blue mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-blue-900">
<article className="py-12 px-4 prose prose-blue prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-indigo-100">
<article className="py-12 px-4 prose prose-indigo mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-indigo-900">
<article className="py-12 px-4 prose prose-indigo prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-violet-100">
<article className="py-12 px-4 prose prose-violet mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-violet-900">
<article className="py-12 px-4 prose prose-violet prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-purple-100">
<article className="py-12 px-4 prose prose-purple mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-purple-900">
<article className="py-12 px-4 prose prose-purple prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-fuchsia-100">
<article className="py-12 px-4 prose prose-fuchsia mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-fuchsia-900">
<article className="py-12 px-4 prose prose-fuchsia prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-pink-100">
<article className="py-12 px-4 prose prose-pink mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-pink-900">
<article className="py-12 px-4 prose prose-pink prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-rose-100">
<article className="py-12 px-4 prose prose-rose mx-auto">
<MarkdownSampleShort />
</article>
</div>
<div className="bg-rose-900">
<article className="py-12 px-4 prose prose-rose prose-invert mx-auto">
<MarkdownSampleShort />
</article>
</div>
</div>
</div>
)
}

export const config = {
unstable_runtimeJS: false,
}
24 changes: 23 additions & 1 deletion demo/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,29 @@ module.exports = {
mdx: (content) => mdx.sync(content),
},
},
theme: {},
theme: {
extend: {
colors: {
red: { 1000: '#530F0F' },
orange: { 1000: '#521C0B' },
amber: { 1000: '#54240B' },
yellow: { 1000: '#4D280A' },
lime: { 1000: '#213708' },
green: { 1000: '#0F3D23' },
emerald: { 1000: '#02392C' },
teal: { 1000: '#073937' },
cyan: { 1000: '#09364A' },
sky: { 1000: '#072F49' },
blue: { 1000: '#17275C' },
indigo: { 1000: '#1F1C53' },
violet: { 1000: '#2F1265' },
purple: { 1000: '#3D1061' },
fuchsia: { 1000: '#4C0C4F' },
pink: { 1000: '#4E0B26' },
rose: { 1000: '#4E071B' },
},
},
},
variants: {},
plugins: [require('../src/index.js')],
}
Loading