tailwindcss-fluid-container

Fluid Container Plugin for Tailwind CSS

Requirements

This plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (npm install tailwindcss-fluid-container@2.x).

Installation

npm install tailwindcss-fluid-container

Usage

Simple

// tailwind.config.js
module.exports = {
  theme: {
    fluidContainer: {
      'default': {
        maxWidth: '800px', // defaults to null (no max width)
        padding: '15px', // defaults to '15px'
      },
    },
  },
  variants: { // for the utilities
    fluidContainer: ['responsive'], // defaults to ['responsive']
  },
  plugins: [
    require('tailwindcss-fluid-container'),
  ],
};

The above configuration would generate the following CSS:

/* the container component itself */
.c-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding-left: 15px;
  padding-right: 15px;
}

/* a bunch of utilities to help you align things with the container */
.w-container {
  width: 800px;
}
.min-w-container {
  min-width: 800px;
}
.max-w-container {
  max-width: 800px;
}
.p-container {
  padding: 15px;
}
.py-container {
  padding-top: 15px;
  padding-bottom: 15px;
}
.px-container {
  padding-left: 15px;
  padding-right: 15px;
}
.pt-container {
  padding-top: 15px;
}
.pr-container {
  padding-right: 15px;
}
.pb-container {
  padding-bottom: 15px;
}
.pl-container {
  padding-left: 15px;
}
.m-container {
  margin: 15px;
}
.my-container {
  margin-top: 15px;
  margin-bottom: 15px;
}
.mx-container {
  margin-left: 15px;
  margin-right: 15px;
}
.mt-container {
  margin-top: 15px;
}
.mr-container {
  margin-right: 15px;
}
.mb-container {
  margin-bottom: 15px;
}
.ml-container {
  margin-left: 15px;
}
.-m-container {
  margin: -15px;
}
.-my-container {
  margin-top: -15px;
  margin-bottom: -15px;
}
.-mx-container {
  margin-left: -15px;
  margin-right: -15px;
}
.-mt-container {
  margin-top: -15px;
}
.-mr-container {
  margin-right: -15px;
}
.-mb-container {
  margin-bottom: -15px;
}
.-ml-container {
  margin-left: -15px;
}

Advanced

// tailwind.config.js
module.exports = {
  theme: {
    fluidContainer: {
      'small': {
        maxWidth: { // defaults to null (no max width)
          default: '800px',
          lg: '1000px',
        },
        padding: { // defaults to '15px'
          default: '15px',
          sm: '30px',
        },
      },
      'large': {
        maxWidth: '1200px', // defaults to null (no max width)
        padding: { // defaults to '15px'
          default: '15px',
          sm: '30px',
        },
      },
    },
  },
  variants: { // for the utilities
    fluidContainer: ['responsive'], // defaults to ['responsive']
  },
  plugins: [
    require('tailwindcss-fluid-container')({
      componentPrefix: 'c-',          // defaults to 'c-'
      widthUtilities: true,           // defaults to true
      paddingUtilities: true,         // defaults to true
      marginUtilities: true,          // defaults to true
      negativeMarginUtilities: true,  // defaults to true
    }),
  ],
};

The above configuration would generate the following CSS:

/* custom property definitions */
html {
  --container-small-max-width: 800px;
  --container-small-padding: 15px;
  --container-small-padding-negative: calc(var(--container-small-padding) * -1);
  --container-large-padding: 15px;
  --container-large-padding-negative: calc(var(--container-large-padding) * -1);
}
@media (min-width: 1024px) {
  html {
    --container-small-max-width: 1000px;
  }
}
@media (min-width: 640px) {
  html {
    --container-small-padding: 30px;
    --container-large-padding: 30px;
  }
}

/* the container components */
.c-container-small {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  max-width: var(--container-small-max-width);
  padding-left: 15px;
  padding-left: var(--container-small-padding);
  padding-right: 15px;
  padding-right: var(--container-small-padding);
}
.c-container-large {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-left: 15px;
  padding-left: var(--container-large-padding);
  padding-right: 15px;
  padding-right: var(--container-large-padding);
}

/* a bunch of utilities to help you align things with the containers */
.w-container-small {
  width: 800px;
  width: var(--container-small-max-width);
}
.min-w-container-small {
  min-width: 800px;
  min-width: var(--container-small-max-width);
}
.max-w-container-small {
  max-width: 800px;
  max-width: var(--container-small-max-width);
}
/* etc. (see the simple example above for the whole list) */

Changelog

[4.0.0] - 2020-05-10

Changed

• The maxWidth and padding options can now be set to an object to provide a default value and breakpoint-specific overrides, like the core container plugin since Tailwind v1.3

Removed

• Removed the responsiveMaxWidth and responsivePadding options; set maxWidth and/or padding to an object instead