Tailwind Jun Layout

A powerful Tailwind CSS plugin for building dynamic layouts with ease. This plugin provides utility classes to create flexible and responsive layouts in your web applications.

Installation

``bash
npm install tailwindcss-jun-layout
`

Then add the plugin to your tailwind.config.js file:

`js
// tailwind.config.*
{
...
plugins: [
// ...other plugins
require("tailwindcss-jun-layout")
]
}
`

That's it. You will be able to just jun-* as Tailwind classes.

Structure

!image

- jun-layout (required): The root container that establishes the layout grid. It creates a flexible layout structure with support for header, footer, edge sidebars, and main content areas.

- jun-header: The header of the layout.

- jun-edgeSidebar: A sidebar component that can be placed on either edge of the layout. Supports multiple modes:

- Drawer mode for mobile (toggleable)
- Permanent mode for desktop
- Collapsible functionality
- Auto-collapse at specified breakpoints
- Customizable widths for different states

- jun-content: The main content area of the layout. Automatically adjusts its width and position based on the presence and state of edge sidebars. Provides proper spacing and padding while maintaining content flow.

- jun-insetSidebar: A secondary sidebar that lives within the content area rather than at the layout edges. Useful for secondary navigation, filters, or table of contents.

- jun-footer: The header of the layout.

`jsx


- On mobile: Sidebar becomes a drawer that can be toggled with the drawer trigger button
- On medium screens (md):
- Sidebar is permanently visible
- Collapses to 48px width when collapsed
- Expands to 200px width when expanded
- On large screens (lg):
- Sidebar width increases to 256px when expanded
- Auto-collapses when the breakpoint is lower than lg

The header spans full width and contains controls for toggling the drawer on mobile and collapsing the sidebar on desktop. The main content area automatically adjusts its width based on the sidebar state.

`jsx
import { triggerEdgeDrawer, triggerEdgeCollapse } from "tailwindcss-jun-layout";