https://github.com/semencov/tailwindcss-spacing

Tailwind plugin to generate classes for setting a predictable and harmonious spacing
https://github.com/semencov/tailwindcss-spacing

Last synced: 30 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/semencov/tailwindcss-spacing
• Owner: semencov
• License: mit
• Created: 2019-08-19T16:01:57.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2019-10-09T12:21:04.000Z (about 5 years ago)
• Last Synced: 2024-10-12T22:32:30.610Z (about 1 month ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 4
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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).