🛌 @layouts-css/tailwindcss-plugin

Easy-to-understand layout classes for css, inspired by Figma's Auto Layout and repeatedly having to figure out common website layouts. Combined with the power of Tailwind CSS

| Getting Started | Key Concepts | Usage | Single Panel Layout | Sizing Layout | Tailwind CSS Plugin Options | Demo | FAQs |

Sleep like a baby and kiss those flexbox & CSS grid nightmares goodbye! Rest well, as you effortlessly create HTML layouts without a worry!

Yes - you can center a div with ease 😌

layouts-css makes it a breeze to layout HTML with it's easy-to-understand CSS layout classes. As a Tailwind CSS plugin, you can combine layouts-css's intuitive layout classes with the power of Tailwind CSS.

Getting Started

ℹ️ This guide assume you have Tailwind already setup and configured.

Install package

npm i -D @layouts-css/tailwindcss

Add plugin to your tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [require('@layouts-css/tailwindcss')],
};

Add a layout class to the parent container.

<div class="layout-packed-mc-x">
  <div>Hello World</div>
</div>

🎉 The above will center a div horizontally and vertically 🎉

Add a sizing layout class

<!-- Sizing Class on the Parent -->
<div class="layout-packed-mc-x w-fill w-fill">
  <!-- Sizing Class on the Parent -->
  <div class="h-fixed-24 w-fixed-24">Hello World</div>
</div>

🎉 The above displays at full screen height and width with a 96px x 96px centered div. 🎉

Note: Sizing classes are designed to work anywhere regardless of whether or not a layout class is present on the parent element.

Key Concepts

layouts-css builds on the idea of utility-first classes popularised by Tailwind CSS and introduces the concept of layout classes. The difference is that utility-first classes wrap a single concept in css where as the a layout class wraps multiple to achieve an intent.

Sizing Layout Classes

Sizing layout classes describe the desired behavior of the dimensions (width & height) of an element regardless of the parent layout class:

• fill: width and/or height in parent
• hug: the contents of the child content along the width add/or heigh
• fixed: the size of the element along the width and/or height

Single-Panel Layout Classes

Single-panel layout classes describe how the child elements behave in the container bases on the following properties:

Single Axis (x or y)

💡 TIP single axis layouts map directly to the Auto-Layout features in the popular design tool and is the inspiration for this library. For each implementation of layouts-css the docs will specify how the class maps to Figma Auto-Layout controls.

• spacing: packed together or spaced apart
• horizontal-alignment: of child elements in the parent container (left, center, or right)
• vertical-alignment: of child elements in the parent container (top, middle, bottom)
• axis: x or y the child elements are layed out along.

Grid (x & y)

• horizontal-alignment: of child elements within the cells of the grid (left, center, or right)
• vertical-alignment: of child elements within the cells of the grid (top, middle, bottom)

🚧 Responsive-Multi-Panel Layout Classes

Coming soon Responsive-multi-panel layout classes describe the behaviours commonly seen on websites across the web and how they behave across the different form factors.

• headers & navigation
• content, columns and side bars
• footers

Usage

Control the layout and how the child components resize

Figma is a popular tool for designing websites and apps. The Auto Layout Feature dynamically arranges elements on the page so you don't have to manually position everything when resizing a component.

The following image features the Auto Layout controls in Figma. The table details what can be done out-of-the box with Tailwind CSS and where the layouts-css is required.

| Figma Control | CSS Approach | | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | 1.a. Horizontal resizing 1.b. Vertical resizing | @layouts-css/tailwindcss-plugin Figma Component Resizing | | 2. Corner radius | Tailwind CSS Border Radius | | 3. Visibility if overflow | Tailwind CSS Overflow | | 4.a. Direction child components flow 4.b. Alignment of child components in container | @layouts-css/tailwindcss-plugin Figma Component Alignment | | 5. Space between child components | Tailwind CSS Gap | | 6.a. Horizontal padding, 6.b. Vertical padding | Tailwind CSS Padding |

Example

The image below is controlled by the html below.

HTML

<div class="layout-packed-tl-x gap-4 p-4 overflow-hidden w-fill h-fixed-40">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-fill">div</div>
  <span class="w-fill h-fixed-48">span</span>
</div>

Single Panel Layout Classes

Layout Class Structure

A layout class is made up of up to two parts LayoutType-AlignmentType e.g. layout-packed-tl-x

Layout Properties

layout-packed: packs the child elements together in the container.

layout-spaced: spaces the child elements across the full width of the container.

layout-grid: spaces the child elements within the cell of a grid.

Alignment Properties

layout-packed-[horizontal][vertical]-[axis] has three properties: horizontal alignment, vertical alignment and axis

• Vertical Alignment: Top t | Middle m | Bottom b
• Horizontal Alignment: Left l | Center c | Right r
• Axis: X x | Y y

layout-spaced-[alignment] has one property alignment

• Alignment: Top t | Middle m | Bottom b | Left l | Center c | Right r

layout-grid-[horizontal][vertical] has two properties: horizontal alignment and vertical alignment.

• Vertical Alignment: Top t | Middle m | Bottom b
• Horizontal Alignment: Left l | Center c | Right r

Single Axis Layouts Classes

📐 Layout: Packed Top-Left across the X-axis

Use layout-packed-tl-x to align child elements at the top left of the container with them packed together.

HTML

<div class="layout-packed-tl-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-fill">div</div>
  <span class="w-hug h-fixed-48">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Top-Center across the X-axis

Use layout-packed-tc-x to align child elements at the top center of the container with them packed together.

HTML

<div class="layout-packed-tc-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Top-Right across the X-axis

Use layout-packed-tr-x to align child elements at the top right of the container with them packed together.

HTML

<div class="layout-packed-tr-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Middle-Left across the X-axis

Use layout-packed-ml-x to align child elements at the middle left of the container with them packed together.

HTML

<div class="layout-packed-ml-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Middle-Center across the X-axis

Use layout-packed-mc-x to align child elements at the middle center of the container with them packed together.

HTML

<div class="layout-packed-mc-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Middle-Right across the X-axis

Use layout-packed-mr-x to align child elements at the middle right of the container with them packed together.

HTML

<div class="layout-packed-mr-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Bottom-Left across the X-axis

Use layout-packed-bl-x to align child elements at the bottom left of the container with them packed together.

HTML

<div class="layout-packed-bl-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Bottom-Center across the X-axis

Use layout-packed-bc-x to align child elements at the bottom center of the container with them packed together.

HTML

<div class="layout-packed-bc-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Bottom-Right across the X-axis

Use layout-packed-br-x to align child elements at the bottom right of the container with them packed together.

HTML

<div class="layout-packed-br-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Top-Left across the Y-axis

Use layout-packed-tl-y to align child elements at the top left of the container with them packed together.

HTML

<div class="layout-packed-tl-y gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Top-Center across the Y-axis

Use layout-packed-tc-y to align child elements at the top center of the container with them packed together.

HTML

<div class="layout-packed-tc-y gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Top-Right across the Y-axis

Use layout-packed-tr-y to align child elements at the top right of the container with them packed together.

HTML

<div class="layout-packed-tr-y gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Middle-Left across the Y-axis

Use layout-packed-ml-y to align child elements at the middle left of the container with them packed together.

HTML

<div class="layout-packed-ml-y gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Middle-Center across the Y-axis

Use layout-packed-mc-y to align child elements at the middle center of the container with them packed together.

HTML

<div class="layout-packed-mc-y gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Middle-Right across the Y-axis

Use layout-packed-mr-y to align child elements at the middle right of the container with them packed together.

HTML

<div class="layout-packed-mr-y gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Bottom-Left across the Y-axis

Use layout-packed-bl-y to align child elements at the bottom left of the container with them packed together.

HTML

<div class="layout-packed-bl-y gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Bottom-Center across the Y-axis

Use layout-packed-bc-y to align child elements at the bottom center of the container with them packed together.

HTML

<div class="layout-packed-bc-y gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Packed Bottom-Right across the Y-axis

Use layout-packed-br-y to align child elements at the bottom right of the container with them packed together.

HTML

<div class="layout-packed-br-y gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Spaced down the Left

Use layout-spaced-l to space child elements down along the left of the container.

HTML

<div class="layout-spaced-l p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Spaced down the Center

Use layout-spaced-c to space child elements down along the center of the container.

HTML

<div class="layout-spaced-c p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Spaced down the Right

Use layout-spaced-r to space child elements down along the right of the container.

HTML

<div class="layout-spaced-r p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Spaced across the Top

Use layout-spaced-t to space child elements across the top of the container.

HTML

<div class="layout-spaced-t p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Spaced across the Middle

Use layout-spaced-m to space child elements across the middle of the container.

HTML

<div class="layout-spaced-m p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

📐 Layout: Spaced across the Bottom

Use layout-spaced-b to space child elements across the bottom of the container.

HTML

<div class="layout-spaced-b p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <p class="w-hug h-hug">paragraph</p>
  <div class="w-hug h-hug">div</div>
  <span class="w-hug h-hug">span</span>
</div>

Figma Auto Layout Settings

⭐️ Bonus ⭐️ : Auto Layout Grids

Figma doesn't have a capability for Grids in Auto Layout - this is my attempt at how it could work. These component classes are aimed at simplifying the use of CSS Grid Layout with Tailwind CSS.

Grid Layout Classes

📐 Layout: Grid with items in the cell's Top Left

Use layout-grid-tl to align child elements at the top left of each cell in the grid.

HTML

<div class="layout-grid-tl grid-cols-3 gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">0A</div>
  <div class="w-hug h-hug">0B</div>
  <div class="w-hug h-hug">0C</div>
  <div class="w-hug h-hug">1A</div>
  <div class="w-hug h-fill">1B</div>
  <div class="w-fill h-hug">1C</div>
  <div class="w-fill h-fill">2A</div>
  <div class="w-fill h-fill">2B</div>
  <div class="w-fill h-fill">2C</div>
</div>

📐 Layout: Grid with items in the cell's Top Center

Use layout-grid-tc to align child elements at the top center of each cell in the grid.

HTML

<div class="layout-grid-tc grid-cols-3 gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">0A</div>
  <div class="w-hug h-hug">0B</div>
  <div class="w-hug h-hug">0C</div>
  <div class="w-hug h-hug">1A</div>
  <div class="w-hug h-fill">1B</div>
  <div class="w-fill h-hug">1C</div>
  <div class="w-fill h-fill">2A</div>
  <div class="w-fill h-fill">2B</div>
  <div class="w-fill h-fill">2C</div>
</div>

📐 Layout: Grid with items in the cell's Top Right

Use layout-grid-tr to align child elements at the top right of each cell in the grid.

HTML

<div class="layout-grid-tr grid-cols-3 gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">0A</div>
  <div class="w-hug h-hug">0B</div>
  <div class="w-hug h-hug">0C</div>
  <div class="w-hug h-hug">1A</div>
  <div class="w-hug h-fill">1B</div>
  <div class="w-fill h-hug">1C</div>
  <div class="w-fill h-fill">2A</div>
  <div class="w-fill h-fill">2B</div>
  <div class="w-fill h-fill">2C</div>
</div>

📐 Layout: Grid with items in the cell's Middle Left

Use layout-grid-ml to align child elements at the middle left of each cell in the grid.

HTML

<div class="layout-grid-ml grid-cols-3 gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">0A</div>
  <div class="w-hug h-hug">0B</div>
  <div class="w-hug h-hug">0C</div>
  <div class="w-hug h-hug">1A</div>
  <div class="w-hug h-fill">1B</div>
  <div class="w-fill h-hug">1C</div>
  <div class="w-fill h-fill">2A</div>
  <div class="w-fill h-fill">2B</div>
  <div class="w-fill h-fill">2C</div>
</div>

📐 Layout: Grid with items in the cell's Middle Center

Use layout-grid-mc to align child elements at the middle center of each cell in the grid.

HTML

<div class="layout-grid-mc grid-cols-3 gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">0A</div>
  <div class="w-hug h-hug">0B</div>
  <div class="w-hug h-hug">0C</div>
  <div class="w-hug h-hug">1A</div>
  <div class="w-hug h-fill">1B</div>
  <div class="w-fill h-hug">1C</div>
  <div class="w-fill h-fill">2A</div>
  <div class="w-fill h-fill">2B</div>
  <div class="w-fill h-fill">2C</div>
</div>

📐 Layout: Grid with items in the cell's Middle Right

Use layout-grid-mr to align child elements at the middle right of each cell in the grid.

HTML

<div class="layout-grid-mr grid-cols-3 gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">0A</div>
  <div class="w-hug h-hug">0B</div>
  <div class="w-hug h-hug">0C</div>
  <div class="w-hug h-hug">1A</div>
  <div class="w-hug h-fill">1B</div>
  <div class="w-fill h-hug">1C</div>
  <div class="w-fill h-fill">2A</div>
  <div class="w-fill h-fill">2B</div>
  <div class="w-fill h-fill">2C</div>
</div>

📐 Layout: Grid with items in the cell's Bottom Left

Use layout-grid-bc to align child elements at the bottom left of each cell in the grid.

HTML

<div class="layout-grid-bl grid-cols-3 gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">0A</div>
  <div class="w-hug h-hug">0B</div>
  <div class="w-hug h-hug">0C</div>
  <div class="w-hug h-hug">1A</div>
  <div class="w-hug h-fill">1B</div>
  <div class="w-fill h-hug">1C</div>
  <div class="w-fill h-fill">2A</div>
  <div class="w-fill h-fill">2B</div>
  <div class="w-fill h-fill">2C</div>
</div>

📐 Layout: Grid with items in the cell's Bottom Center

Use layout-grid-bc to align child elements at the bottom center of each cell in the grid.

HTML

<div class="layout-grid-bc grid-cols-3 gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">0A</div>
  <div class="w-hug h-hug">0B</div>
  <div class="w-hug h-hug">0C</div>
  <div class="w-hug h-hug">1A</div>
  <div class="w-hug h-fill">1B</div>
  <div class="w-fill h-hug">1C</div>
  <div class="w-fill h-fill">2A</div>
  <div class="w-fill h-fill">2B</div>
  <div class="w-fill h-fill">2C</div>
</div>

📐 Layout: Grid with items in the cell's Bottom Right

Use layout-grid-br to align child elements at the bottom right of each cell in the grid.

HTML

<div class="layout-grid-br grid-cols-3 gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">0A</div>
  <div class="w-hug h-hug">0B</div>
  <div class="w-hug h-hug">0C</div>
  <div class="w-hug h-hug">1A</div>
  <div class="w-hug h-fill">1B</div>
  <div class="w-fill h-hug">1C</div>
  <div class="w-fill h-fill">2A</div>
  <div class="w-fill h-fill">2B</div>
  <div class="w-fill h-fill">2C</div>
</div>

Layout Helpers

📐 Layout: Initial HTML

Use layout-initial-html sets the html defaults using the CSS initial property.

📐 Layout: Revert HTML

Use layout-revert-html sets the html defaults using the CSS revert property.

Sizing Layout Classes

Controlling size and resizing behavior in CSS through the specification of properties on both parent and child elements can be challenging. 🛌 layouts-css simplifies this process by giving control to the child component for resizing within the parent. This library shares the same opinion as Figma, advocating for child components to dictate their own resizing behavior.

🚨 Attention: The use of Tailwind CSS size utility classes such as h-full or w-full, h-{number}, and w-{number} may not produce expected results when combined with layouts-css classes. This is due to hiding complexity of setting width in flex-box, flex-direction, and grid.

↔️ Width

w-hug the element hugs the width of it's content.

w-fill the element fills the remaining width of it's parent element.

w-fixed-{number} fixed width based on sizes set in Tailwind CSS Config.

w-fixed-[css-size] fixed width based on Tailwind CSS JIT.

HTML

<div class="layout-packed-tl-x gap-4 p-2 overflow-hidden w-fill h-fixed-40 rounded-lg">
  <div class="w-hug h-hug">w-hug</div>
  <div class="w-fill h-hug">w-fill</div>
  <div class="w-fixed-44 h-hug">w-fixed-44</div>
  <div class="w-fixed-[160px] h-hug">w-fixed-[160px]</div>
</div>

Bonus

w-min-{number} the element can have a min width set

w-max-{number} the element can have a max width set

↕ Height

h-hug the element hugs the height of it's content.

h-fill the element fills the remaining height of it's parent element.

h-fixed-{number} fixed height based on sizes set in Tailwind CSS Config.

h-fixed-[css-size] fixed height based on Tailwind CSS JIT.

HTML

<div class=" gap-4 p-2 overflow-hidden w-fill h-hug rounded-lg">
  <div class="w-fill h-hug">h-hug</div>
  <div class="w-fill h-fill">h-fill</div>
  <div class="w-fill h-fixed-20">h-fixed-44</div>
  <div class="w-fill h-fixed-[64px]">h-fixed-[160px]</div>
</div>

Bonus

h-min-{number} the element can have a min height set

h-max-{number} the element can have a max height set

🔲 Size

Shorthand helper class for setting the same width and height property.

s-hug the element hugs the width and height of it's content.

s-fill the element fills the remaining width and height of it's parent element.

Tailwind CSS Plugin Options

Note: To ensure height and width work consistently layouts-css sets the following overrides which can be turned off if need be :

Html and Body elements maximum a height and width

In most cases it's desirable to have the top most elements fill the entire viewport.

It can be disable by configuring one or both of the following:

// ./tailwind.config.js
module.exports = {
  plugins: [
    require(@layouts-css/tailwindcss)({
      pageHeightDefaultFill: false,  // Default TRUE
      pageWidthDefaultFill: false,   // Default TRUE
    }),
  ],
};

Default behavior

• Elements without a layout class will respect default html block & inline element behavior.
• body & html both have width and height set to 100%

Demo

If you are interested in comparing layouts with and without check out the following Tailwind CSS play links:

• ❌ Without layouts-css 🚧 Coming Soon

• ✅ With layouts-css 🚧 Coming Soon

FAQs

This is a list of questions so far. Join the Tailwind Discord for more and to share your ideas and feedback in the plugins channel.

Q: Do I need Tailwind CSS to use this layouts-css?

A: Hopefully not for long 🚧 Coming soon

• @layouts-css/plain-css
• @layouts-css/vanilla-extract (CSS in JS/TS)

Q: Why not just learn how CSS Felxbox and Grid work?

A: How many times have you read the reference and still not remember how it works... this indicates these concepts as they are in the CSS specification aren't intuitive enough. Figma's model for thinking about layout is more intuitive.