mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
34 lines
1.0 KiB
Markdown
34 lines
1.0 KiB
Markdown
# Use Tailwind Typography Prose In Dark Mode
|
|
|
|
Tailwindcss can be set up to provide styled defaults for both standard (light)
|
|
mode and dark mode. Once this is set up, you can add a toggle mechanism to
|
|
switch between light and dark mode. [This
|
|
post](https://egghead.io/blog/tailwindcss-dark-mode-nextjs-typography-prose)
|
|
goes into all those details.
|
|
|
|
This can even be used with [Tailwind's
|
|
typography](https://github.com/tailwindlabs/tailwindcss-typography) plugin.
|
|
`typography` provides default styling which is great if you don't control the
|
|
markup that is being rendered or if you want to provide some defaults to a
|
|
chunk of markup.
|
|
|
|
A chunk of markup that uses typography will minimally look something like this:
|
|
|
|
```jsx
|
|
<div className="prose">
|
|
<h1>{title}</h1>
|
|
{markdownAsHtml}
|
|
</div>
|
|
```
|
|
|
|
To give this reasonable dark mode defaults, you'll need to add a `dark`-mode
|
|
class as well. Using the `dark` prefix, you can apply the `prose-dark` class to
|
|
the top-level div.
|
|
|
|
```jsx
|
|
<div className="prose dark:prose-dark">
|
|
<h1>{title}</h1>
|
|
{markdownAsHtml}
|
|
</div>
|
|
```
|