# tailwindcss-spacing-helpers

> Tailwind plugin to generate classes for setting a predictable and harmonious spacing.

Latest version **1.0.3** (published 2019-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-spacing-helpers
pnpm add tailwindcss-spacing-helpers
yarn add tailwindcss-spacing-helpers
bun add tailwindcss-spacing-helpers
```

## 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.0.3 |
| Published | 2019-10-09 |
| First published | 2019-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Yuri Sementsov |
| Maintainers | semencov |
| Keywords | tailwindcss, tailwind, plugin, spacing, spaced items, child margin |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-spacing-helpers
- Repository: https://github.com/semencov/tailwindcss-spacing
- Issues: https://github.com/semencov/tailwindcss-spacing/issues
- npm.io page: https://npm.io/package/tailwindcss-spacing-helpers

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K 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

## Recent versions

- 1.0.3 (latest) — 2019-10-09
- 1.0.2 — 2019-08-21
- 1.0.1 — 2019-08-21

## README

# TailwindCSS Spacing Plugin

This plugin generates a simple set of css classes for creating a predictable and harmonious spacing.

* **Inset spacing**: For all user interface containers.
* **Inset squish spacing**: Same as previous, but a squished inset reduces space top and bottom, for example by 50%. _Used for buttons, inputs, data table cells, list items, etc._
* **Stack spacing**: For all stacked content. _So for example panels, form fields and anything else that is stacked vertically._
* **Inline spacing**: Things that are displayed inline. _For pills, tags, breadcrumbs, side-by-side form fields etc._

> Read about Space in Design Systems for more details of the concept: https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62


## Install

Using yarn

```bash
yarn add tailwindcss-spacing-helpers
```
Or using npm

```bash
npm i tailwindcss-spacing-helpers
```

## Usage

In tailwind config include the plugin:

```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-spacing-helpers')
  ],
}
```

This will produce css like this for each value in configs [`spacing`](https://tailwindcss.com/docs/theme/#spacing) object:

```css
.inset-space-1 { padding: 0.25rem; }
.inset-squish-space-1 { padding: calc(0.25rem / 1.7 - 1px) 0.25rem calc(0.25rem / 1.7); }
.stack-space-1 { margin-bottom: 0.25rem; }
.stack-space-1:last-child { margin-bottom: 0; }
.inline-space-1 { margin-right: 0.25rem; }
.inline-space-1:last-child { margin-right: 0; }

/* ... */
```

[To override values](https://tailwindcss.com/docs/customizing-spacing/):

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    }
  },
  plugins: [
    require('tailwindcss-spacing-helpers')
  ],
}
```

This will produce:

```css
.inset-space-sm { padding: 8px; }
.inset-squish-space-sm { padding: calc(8px / 1.7 - 1px) 8px calc(8px / 1.7); }

/* ... */
```

### Variants

By default [`responsive`](https://tailwindcss.com/docs/responsive-design/) variant is enabled.

```javascript
// tailwind.config.js
module.exports = {
  variants: {
    spacing: ['responsive'],
  },
}
```

# License

Licensed under the [MIT license](LICENSE).

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