Skip to content
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

Bring back "Adding new modifiers" section to README.md #356

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,35 @@ When stacking these modifiers with other modifiers like `hover`, you most likely

Read the Tailwind CSS documentation on [ordering stacked modifiers](https://tailwindcss.com/docs/hover-focus-and-other-states#ordering-stacked-modifiers) to learn more.

### Adding new modifiers

You can add a new modifier by creating a new key in the `typography` section of your theme and providing your own styles under the `css` key:

```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
typography: {
'3xl': {
css: {
fontSize: '1.875rem',
h1: {
fontSize: '4rem',
},
// ...
},
},
},
}
},
plugins: [
require('@tailwindcss/typography'),
// ...
],
}
```

### Overriding max-width

Each size modifier comes with a baked in `max-width` designed to keep the content as readable as possible. This isn't always what you want though, and sometimes you'll want the content to just fill the width of its container.
Expand Down