# tailwindcss-every-layout

> A plugin for Tailwind CSS to include layout components from Every Layout

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

## Install

```sh
npm install tailwindcss-every-layout
pnpm add tailwindcss-every-layout
yarn add tailwindcss-every-layout
bun add tailwindcss-every-layout
```

## 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.0 |
| Published | 2020-02-26 |
| First published | 2020-02-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Arjan van der Gaag |
| Maintainers | avdgaag |
| Keywords | CSS, Tailwind CSS |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-every-layout
- Repository: https://github.com/avdgaag/tailwindcss-every-layout/issues
- npm.io page: https://npm.io/package/tailwindcss-every-layout

## 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.0 (latest) — 2020-02-26

## README

# Tailwind CSS every layout

A plugin for [Tailwind CSS][1] to include layout components from [Every Layout][2], adapted to fit with the Tailwind CSS style of utility-first CSS.

## Installation

Install in your project:

    npm install --save tailwindcss-every-layout

Add the modules you would like to use in your Tailwind CSS configuration file:

    // in tailwind.config.js
    const tailwindcssEveryLayout = require("tailwindcss-every-layout");
    module.exports = {
      theme: {
        extend: {}
      },
      variants: {},
      plugins: [
        tailwindcssEveryLayout.basis,
        tailwindcssEveryLayout.measure,
        tailwindcssEveryLayout.stack,
        tailwindcssEveryLayout.cluster,
        tailwindcssEveryLayout.center,
        tailwindcssEveryLayout.switcher,
        tailwindcssEveryLayout.cover,
        tailwindcssEveryLayout.imposter,
        tailwindcssEveryLayout.sidebar
      ]
    };

## Pattern

You can use the classes with decent default values but most come with variant based on the spacing scale defined in your Tailwind CSS configuration. For example, you can define a stack:

    <div class="stack">
      <p>Foo</p>
      <p>Bar</p>
    </div>

This will use `spacing.6` for the margin between values. You can tweak this by using a different `stack-n` class:

    <div class="stack stack-12">
      <p>Foo</p>
      <p>Bar</p>
    </div>

## Available classes

- `stack`
- `cluster`
- `cover`
- `center`
- `switcher`
- `imposter`
- `with-sidebar`

For more information on the meaning and working of these classes, refer to [every-layout.dev][2].

## Other modules

### Basis

The basis module uses the spacing scale from your Tailwind CSS configuration to define utility classes for the `flex-basis` attribute, i.e. `basis-6` to set `flex-basis: 1.5rem`.

## Measure

The measure module defines a top-level variable `--measure` on `:root` as `60ch` and uses it to define a maximum width on all but a few tags.

[1]: https://tailwindcss.com
[2]: https://every-layout.dev

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