Skip to content

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

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.

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

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants