Beautiful typographic defaults for HTML you don't control.
MIT License
Bot releases are visible (Hide)
Published by thecrypticace about 1 year ago
Published by thecrypticace over 2 years ago
&:hover
work (#246)This release of @tailwindcss/typography
is an exciting one, and finally includes easy support for dark mode, the ability to escape prose styles, and a brand new HTML-based customization API that is a lot more fun to work with than the configuration based API we've offered in the past.
To upgrade, make sure you are on the latest version of Tailwind CSS, then install @tailwindcss/typography@latest
:
npm install -D @tailwindcss/typography@latest
This version is designed for Tailwind CSS v3.0+, and is not compatible with earlier versions.
prose-invert
for easy dark mode support (#216)prose-slate
and prose-stone
to make it easy to match your typography to your site's gray scale (#216)prose-a:text-blue-500
for easily customizing individual elements directly in your HTML (#216)not-prose
class for preventing prose styles from affecting a section of HTML (#205):where
to reduce specificity, making it possible to override prose children with utilities (#203)::before
pseudo-elements to using the native ::marker
pseudo-element for styling list bullets and counters (#216)v0.5.0 will drop support for Tailwind CSS v2.0 and is intended for use with Tailwind CSS v3.0+.
To upgrade, install @tailwindcss/typography@next
:
npm install -D @tailwindcss/typography@next
This is an alpha release, so some things might be broken. I don't know about them otherwise I would have fixed them, but you are gonna find them! So try it, break it, and tell me about it when you do so we can get this thing really battle-tested for a proper v3.0 release in a few weeks.
:where
to reduce specificity, making it possible to override prose children with utilities (#203)not-prose
class on a group of child elements (#205)::marker
instead of pseudo-elements, and add child element variants (eg. prose-h1:underline
)(#216)Published by RobinMalfait almost 4 years ago
600
variant, breaks everything (#107)pre code
tags (#125)start
and reversed
attribute on ol
elements (#110)type
on ul
and ol
elements (#126)This release drops support for Tailwind CSS v1.0.
Some of the changes needed to support Tailwind CSS v2.0 necessitate dropping support for v1.0. You should stay on v0.2.0 until you can upgrade your projects to Tailwind CSS v2.0.
Read the Tailwind CSS v2.0 upgrade guide for information on upgrading your projects.
extend
for any overrides, assigning directly to theme.typography
now completely overrides default configuration::before
instead of :before
(ba33d77)className
option for overriding prose
class (#28)prose-blue
for setting link styles (#92)This version of the plugin is designed for Tailwind CSS v2.0. Make sure you upgrade Tailwind before upgrading this plugin.
The biggest difference is that any customizations you had under theme.typography
should be moved to theme.extend.typography
, and the default
key should be uppercased to DEFAULT
:
module.exports = {
theme: {
- typography: {
- default: {
- css: {
- color: theme("colors.gray.700"),
- '[class~="lead"]': {
- color: theme("colors.gray.600"),
- },
- a: {
- color: theme("colors.indigo.600"),
- fontWeight: 600,
- textDecoration: "none",
- },
- },
- },
- },
+ extend: {
+ typography: {
+ DEFAULT: {
+ css: {
+ color: theme("colors.gray.700"),
+ '[class~="lead"]': {
+ color: theme("colors.gray.600"),
+ },
+ a: {
+ color: theme("colors.indigo.600"),
+ fontWeight: 600,
+ textDecoration: "none",
+ },
+ },
+ },
+ },
+ },
},
};
Any customizations directly under theme.typography
will now completely replace the defaults, which is consistent with how theme modification generally works in Tailwind.
In previous versions, all of the colors used by this plugin were read from Tailwind's default theme rather than from your theme. The plugin now looks for colors in your theme first, falling back to the defaults if they don't exist. So if the plugin is looking for gray.700
for the main body color, it will use your defined gray.700
if present, or fall back to the default one.
If your colors are totally custom and the numbers don't line up with Tailwind's defaults from a contrast perspective, you probably won't get good results out of the box. In this case you should manually override the colors like you were likely already doing using the existing customization API.