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
yarn add tailwindcss-spacing-helpers
Or using npm
npm i tailwindcss-spacing-helpers
Usage
In tailwind config include the plugin:
// tailwind.config.jsmoduleexports = plugins:
This will produce css like this for each value in configs spacing
object:
/* ... */
// tailwind.config.jsmoduleexports = theme: spacing: sm: '8px' md: '12px' lg: '16px' xl: '24px' plugins:
This will produce:
/* ... */
Variants
By default responsive
variant is enabled.
// tailwind.config.jsmoduleexports = variants: spacing: 'responsive'
License
Licensed under the MIT license.