-
Notifications
You must be signed in to change notification settings - Fork 293
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
Conversation
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 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. |
Of course, this could have been deprecated today by @tailwindlabs/jit (just-in-time engine) |
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 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. |
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). |
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): However when I tried that in a derivative from that template using the new jit engine, prose doesn't work with dark mode. 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.)
Great catch! |
Hey thanks for this! 🙏 We've since added first-class support for dark mode to the typography plugin via the new 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! |
This fixes a "bug" I had where
variants: { typography: ["dark"] }
intailwind.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 😁