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.

Sign up for GitHub

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

Jump to bottom

Update README.md #95

Merged
merged 2 commits into from
Dec 14, 2020
Merged

Update README.md #95

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56139c4
Update README.md
frankspin89 Nov 19, 2020
218a18f
Merge branch 'master' into master
RobinMalfait Dec 14, 2020
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
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,17 +220,17 @@ module.exports = {
}
```

Customizations should be applied to a specific modifier like `default` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](https://tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind plugins.
Customizations should be applied to a specific modifier like `DEFAULT` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](https://tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind plugins.

It's important to note that all customizations are **merged** with the defaults. If you'd like to completely override a provided size modifier, you can do so by disabling that modifier so the default styles are not included.

See [the default styles](./src/styles.js) for this plugin for more in-depth examples of configuring each modifier.

### Customizing shared styles

Many styles _(for example colors, font weight, and text decoration)_ are shared between all size modifiers, and are therefore defined only for the `default` modifier, since modifiers are designed to be used with the [multi-class modifier pattern](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/#component-modifiers).
Many styles _(for example colors, font weight, and text decoration)_ are shared between all size modifiers, and are therefore defined only for the `DEFAULT` modifier, since modifiers are designed to be used with the [multi-class modifier pattern](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/#component-modifiers).

If you'd like to customize these sorts of styles, do so using the `default` modifier:
If you'd like to customize these sorts of styles, do so using the `DEFAULT` modifier:

```js
// tailwind.config.js
Expand Down Expand Up @@ -326,7 +326,7 @@ module.exports = {

This option acts as a _safelist_, so you can list only the modifiers you'd actually like included and the others will be removed.

The `default` modifier is always included and cannot be disabled.
The `DEFAULT` modifier is always included and cannot be disabled.

### Disabling responsive variants

Expand Down