tailwindcss-fluid-layout weekly downloads statistics

Tailwind CSS Fluid Layout Plugin

This plugin makes flexible grid layouts with breakouts super easy! Forget about wrapping everything in containers—just use this plugin to generate grids of all sizes that seamlessly handle breakouts. It’s simple, clean, and ready to roll. Plug it in and let your layouts flow!

Installation

To get started, add the plugin to your Tailwind setup:

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

Usage

Start by defining your layout(s) with the desired sizes in the tailwind.config.js file:

Now, set an element as a container using grid-cols-{name} for a column-based layout or grid-rows-{name} for a row-based layout. Then apply styles to the child elements to control their sizing and positioning within the grid.

If you would like to position an element to start and end at different grid areas, you could do:

Additional Options

The tailwindcss-fluid-layout plugin comes with optional parameters that allow for further customization. When initializing the plugin, you can pass in an object to set various options. For example:

Options Explained:

• path (default: layouts): This option lets you specify a custom path for your layout configurations. By default, the plugin looks for layout values under layouts in the tailwind.config.js file, but you can rename this path to whatever you prefer. • throwOnError (default: false): When set to false, this option prevents the plugin from throwing an error if there are any issues with the layout configurations. If you'd prefer the plugin to throw errors for easier debugging, you can set this option to true

Limitations

• Currently, all size values within the same layout must be length literals and use the same unit.

Description from the npm listing.