# tailwindcss-schrift

> Font Plugin for

Latest version **1.1.0** (published 2020-02-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-schrift
pnpm add tailwindcss-schrift
yarn add tailwindcss-schrift
bun add tailwindcss-schrift
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-02-02 |
| First published | 2020-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Sarah Schütz |
| Maintainers | sarahschuetz |
| Keywords | font, tailwind, fluid, modular scale, schrift |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-schrift
- Repository: https://github.com/sarahschuetz/tailwindcss-schrift
- Homepage: https://github.com/sarahschuetz/tailwindcss-schrift#readme
- Issues: https://github.com/sarahschuetz/tailwindcss-schrift/issues
- npm.io page: https://npm.io/package/tailwindcss-schrift

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^7.0.26

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
- [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-02-02
- 1.0.0 — 2020-01-18

## README

# Schrift
## Plugin for Tailwind CSS

This Tailwind CSS plugin adds additional utility classes for a fluid font system using modular scales. The font base sizes and necessary scales as well as the ratios between them can be configured.

### Installation

*Schrift* is part of the npm registry and can be installed using *npm* or *yarn*:

```
npm install tailwindcss-schrift
```
or
```
yarn add tailwindcss-schrift
```

Then you can require the plugin in your Tailwind config:

```
plugins: [
  require('tailwindcss-schrift')
]
```

### Usage

*Schrift* will generate one utility class for each configured scale following the scheme `text-ms-{number of scale}`. For example `text-ms-0` and `text-ms-1` relate to scale 0 and scale 1, respectively.

Negative scales are also possible (e.g. `text-ms--1`).

### Settings
The font base sizes and necessary scales as well as the ratios between them can be adjusted on project basis in your `tailwind.config.js` file. The following section contains a list of all options, which can be used to tweak the font sizes.

#### Available Settings

| Setting       | Description                                                            |
|---------------|------------------------------------------------------------------------|
| minFontSize   | Defines the font-size for the configured minimum breakpoint and below. |
| maxFontSize   | Defines the font-size for the configured maximum breakpoint and above. |
| minRatio      | Ratio used for the minimum breakpoint and below.                       |
| maxRatio      | Ratio used for the maximum breakpoint and above.                       |
| scales        | All the scales for which utility classes should be created.            |
| minBreakpoint | Minimum breakpoint, where the font should start to scale.              |
| maxBreakpoint | Maximum breakpoint, where the font should stop to scale.               |

Between `minBreakpoint` and `maxBreakpoint` the font-size and ratio is interpolated linearly.

#### Default Configuration
If no custom settings are defined, *Schrift* defaults to the following values:
```
schrift: {
  minFontSize: '16px',
  maxFontSize: '18px',
  minRatio: 1.1,
  maxRatio: 1.15,
  scales: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8],
  minBreakpoint: '320px',
  maxBreakpoint: '1200px',
}
```

---
_Source: https://npm.io/package/tailwindcss-schrift · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._