-
Notifications
You must be signed in to change notification settings - Fork 287
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
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 😁