🛌 @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 using tailwind V4

There are two approaches

#### Options 1 - (Recommended) Copy paste into your global.css
Tailwind v4 introduces css based config meaning code can be shared without another npm package to download

* Copy everything in layouts.css
* Paste into your global.css

💥 Boom - you're done and with one less package

#### Options 2 - Link in your node modules

npm i -D @layouts-css/tailwindcss

In global.css add the
``
@import '@layouts-css/tailwindcss-layouts/src/layouts.css';
`

Seriously though don't do this...

Getting Started using tailwind V3

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

#### Install package

npm i -D @layouts-css/tailwindcss

#### Add plugin to your tailwind.config.js

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

#### Add a layout class to the parent container.


`html



`

🎉 The above will center a div horizontally and vertically 🎉

#### Add a sizing layout class


`html




`

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

$3

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

$3

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)

$3

_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

$3

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 Controls

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

$3

The image below is controlled by the html below.

!Example

###### HTML


`html



`

Single Panel Layout Classes

$3

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




$3

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.




$3

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






$3

#### 📐 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.

!Example of layout-packed-tl-x

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-tl-x

#### 📐 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.

!Example of layout-packed-tc-x

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-tc-x

#### 📐 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.

!Example of layout-packed-tr-x

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-tr-x

#### 📐 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.

!Example of layout-packed-ml-x

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-ml-x

#### 📐 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.

!Example of layout-packed-mc-x

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-mc-x

#### 📐 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.

!Example of layout-packed-mr-x

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-mr-x

#### 📐 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.

!Example of layout-packed-bl-x

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-bl-x

#### 📐 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.

!Example of layout-packed-bc-x

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-bc-x

#### 📐 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.

!Example of layout-packed-br-x

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-br-x

#### 📐 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.

!Example of layout-packed-tl-y

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-tl-y

#### 📐 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.

!Example of layout-packed-tc-y

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-tc-y

#### 📐 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.

!Example of layout-packed-tr-y

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-tr-y

#### 📐 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.

!Example of layout-packed-ml-y

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-ml-y

#### 📐 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.

!Example of layout-packed-mc-y

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-mc-y

#### 📐 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.

!Example of layout-packed-mr-y

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-bl-y

#### 📐 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.

!Example of layout-packed-bl-y

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-bl-y

#### 📐 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.

!Example of layout-packed-bc-y

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-bc-y

#### 📐 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.

!Example of layout-packed-br-y

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-packed-br-y

#### 📐 Layout: Spaced down the Left

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

!Example of layout-spaced-l

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-spaced-l

#### 📐 Layout: Spaced down the Center

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

!Example of layout-spaced-c

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-spaced-c

#### 📐 Layout: Spaced down the Right

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

!Example of layout-spaced-r

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-spaced-r

#### 📐 Layout: Spaced across the Top

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

!Example of layout-spaced-t

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-spaced-t

#### 📐 Layout: Spaced across the Middle

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

!Example of layout-spaced-m

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-spaced-m

#### 📐 Layout: Spaced across the Bottom

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

!Example of layout-spaced-b

##### HTML


`html



`

##### Figma Auto Layout Settings

!Figma Auto Layout Example of layout-spaced-b

$3

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.

$3

#### 📐 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.

!Example of layout-spaced-b

##### HTML


`html



`

#### 📐 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.

!Example of layout-spaced-b

##### HTML


`html



`

#### 📐 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.

!Example of layout-spaced-b

##### HTML


`html



`

#### 📐 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.

!Example of layout-spaced-b

##### HTML


`html



`

#### 📐 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.

!Example of layout-spaced-b

##### HTML


`html



`

#### 📐 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.

!Example of layout-spaced-b

##### HTML


`html



`

#### 📐 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.

!Example of layout-spaced-b

##### HTML


`html



`

#### 📐 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.

!Example of layout-spaced-b

##### HTML


`html



`

#### 📐 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.

!Example of layout-spaced-b

##### HTML


`html



`

$3

#### 📐 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.




$3

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.

!Width Examples

##### HTML


`html



`

Bonus

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

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




$3

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.

!Height Examples

##### HTML


`html



`

Bonus

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

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





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 :




$3

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:

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




$3

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

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

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