tw-layout

Small tailwind layout components for super common use-cases.

Installation

Install with your package manager of choice. npm example:

$ npm install tw-lucide

require the plugin in tailwind.config.js

module.exports = {
    // ...
    plugins: [
        // ...
        require('tw-layout'),
    ],
}

Usage

.bar

Horizontal bars with gaps defined by spacing.

Alias for .flex.items-center.gap-4

<nav class="bar">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</nav>

<h2>Set spacing immediately:</h2>
<nav class="bar-8">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</nav>

stack

Vertical stacks with gaps defined by spacings

Alias for .flex.flex-col.gap-4

vise

Alias for mx-4.md:mx-auto.max-w-screen-md