Tailwind CSS every layout

A plugin for Tailwind CSS to include layout components from Every Layout, 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.

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.