Releases: tailwindlabs/tailwindcss-typography
v0.5.5
v0.5.4
v0.5.3
Added
Fixed
v0.5.2
v0.5.1
v0.5.0
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.
Added
- Added
prose-invert
for easy dark mode support (#216) - Added gray scale modifiers like
prose-slate
andprose-stone
to make it easy to match your typography to your site's gray scale (#216) - Added new element modifiers API like
prose-a:text-blue-500
for easily customizing individual elements directly in your HTML (#216) - Added
not-prose
class for preventing prose styles from affecting a section of HTML (#205) - Updated selectors to use
:where
to reduce specificity, making it possible to override prose children with utilities (#203)
Changes
- Switch from
::before
pseudo-elements to using the native::marker
pseudo-element for styling list bullets and counters (#216)
v0.5.0-alpha.3
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.
Changes
- Use
:where
to reduce specificity, making it possible to override prose children with utilities (#203) - Support "undoing" prose styles using the
not-prose
class on a group of child elements (#205) - Update color palette for v3 (#206)
- Improve customization API, add alternate grays, add dark mode support, use
::marker
instead of pseudo-elements, and add child element variants (eg.prose-h1:underline
)(#216)
v0.4.1
v0.4.0
v0.3.0
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.
Changed
- Add support for Tailwind CSS v2.0 and drops support for v1.0 (#79, #82, #87)
- Use
extend
for any overrides, assigning directly totheme.typography
now completely overrides default configuration - Consistently use
::before
instead of:before
(ba33d77) - Read color values from the user's theme instead of only the default theme
Added
- Add new
className
option for overridingprose
class (#28) - Add color modifiers by default like
prose-blue
for setting link styles (#92)
Upgrading from v0.2.0 to v0.3.0
This version of the plugin is designed for Tailwind CSS v2.0. Make sure you upgrade Tailwind before upgrading this plugin.
Customizations should be moved under extend, default should become DEFAULT
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.
Colors are read from theme by default
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.