npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tailwindcss-fluid-layout

v0.1.3

Published

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 l

Downloads

899

Readme

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:

npm install tailwindcss-fluid-layout

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

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-fluid-layout'),
    // ...
  ],
};

Usage

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

module.exports = {
  theme: {
    layouts: {
      main: {
        sizes: {
          content: '800px',
          popout: '1200px',
          // Add as many sizes as you like! You can also use other CSS units like em, %, and more to keep your layouts super flexible.
        },
        padding: '16px', // optional
      },
      // You can create multiple grid layouts, with each key you define serving as the name for its respective grid template.
    },
  },
};

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.

<div class="grid-cols-main">
  <div class="col-full">
    <!-- The `full` size is automatically configured for you and set to 100% to fit within the main layout. Please note that this area will ignore any padding settings and will always match the size of the parent layout. -->
  </div>
  <div class="col-content">
    <!-- This element will be sized at `800px` or less to fit within the parent layout. -->
  </div>
  <div class="col-popout">
    <!-- This element will be sized at `1200px` or less to fit within the parent layout. -->
  </div>
</div>

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

<div class="grid-cols-main">
  <div class="col-start-full col-end-content">
    <!-- This element will be positioned at the start of the parent layout and extend to the end of the content area. -->
  </div>
  <div class="col-start-content-end col-end-full">
    <!-- This element will be positioned starting at the end of the content area and extending to the end of the parent layout. -->
  </div>
</div>

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:

require('tailwindcss-fluid-layout')({
  path: 'layouts',
  throwOnError: false,
});

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.