Skip to content

Update README.md -- specify typography: "responsive" as default variant #153

New issue

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

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

Already on GitHub? # to your account

Closed
wants to merge 1 commit into from

Conversation

DoctorDerek
Copy link

This fixes a "bug" I had where variants: { typography: ["dark"] } in tailwind.config.js disabled responsive breakpoints only on prose classes. 😅

The "bug" is line 346, which is missing a comment specifying the default value. I couldn't intuit that "responsive" would be the default variant, though it is obvious.

I thought I would expand the README to this great tool while I'm at it 😁

This fixes a "bug" I had where `variants: { typography: ["dark"] }` in `tailwind.config.js` disabled responsive breakpoints only on prose classes. 😅

The "bug" is line 346, which is missing a comment specifying the default value. I couldn't intuit that "responsive" would be the default variant, though it is obvious.

I thought I would expand the README to this great tool while I'm at it
@DoctorDerek
Copy link
Author

This pull request closes #69 and is partially copy-pasta from @adamwathan here #69 (comment) ... it just formally puts it into the docs with some tips.

@DoctorDerek
Copy link
Author

Of course, this could have been deprecated today by @tailwindlabs/jit (just-in-time engine)

https://twitter.com/adamwathan/status/1371505992840663051

@DoctorDerek
Copy link
Author

I can confirm that configuring https://github.com/tailwindlabs/tailwindcss-jit according to the Just-in-Time Tailwind announcement video does in fact close #69 and fix my "bug" without needing the tailwind.config.js file.

If you want to merge the pull request, I can correct these docs when jit is merged into Tailwind main. That will probably be a semver change, so these docs are helpful in the meantime.

@danjac
Copy link

danjac commented Mar 30, 2021

Not sure if related, but applying any theme modifications in tailwind-jit breaks typography completely (can't see any errors, but no prose styles are applied):

https://gist.github.com/danjac/4559a13e29c4db3bdd4392fbb76adce6#file-tailwind-config-js-L17

For example applying the solution https://play.tailwindcss.com/xTOjz3kR3m?file=config referenced in #69 will not work, so I can't enable dark mode (and typography is pretty much illegible in dark mode, breaking accessibility guidelines).

@DoctorDerek
Copy link
Author

Hey @danjac yeah that could definitely be related, let me open an issue.

Here's an example repo that uses dark theme with prose / Tailwind typography: https://github.com/timlrx/tailwind-nextjs-starter-blog/ (not jit) and it's live here: https://tailwind-nextjs-starter-blog.vercel.app/

As you can see, prose works fine with dark mode in the old system (except for the caveat about responsive classes addressed by this PR, #153):
image

However when I tried that in a derivative from that template using the new jit engine, prose doesn't work with dark mode.
image

Source code: https://github.com/DoctorDerek/steven-terner.github.io/blob/master/pages/demo.js Live version: http://steven-terner-github-io.vercel.app/demo (That page won't stay up for particularly long, but I didn't want to spin up a new project just for this issue, sorry.)

 <article className="mx-auto space-y-6 prose">
        <SectionContainer>
          <p>
            My portfolio showcases 

Great catch!

@reinink
Copy link
Member

reinink commented Jan 7, 2022

Hey thanks for this! 🙏

We've since added first-class support for dark mode to the typography plugin via the new dark:prose-invert class, and have updated the documentation on the website to include instructions on how to use this: https://tailwindcss.com/docs/typography-plugin#adapting-to-dark-mode

The "variants" config setting has also since been removed in Tailwind v3.0, thanks to the new Just-in-Time engine 💪

Since this is no longer relevant I am going to close this PR, but appreciate the contribution either way!

@reinink reinink closed this Jan 7, 2022
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants