Tailwind CSS Container Sizes Plugin

Requirements

• Tailwind CSS >= v1.0.0

Installation

Install via Yarn:

$ yarn add tailwindcss-container-sizes

Usage

// tailwind.config.js
{
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    container: {
      center: true,
      padding: '1.5rem',
      sizes: {}, // defaults to breakpoint (screens) sizes
    },
  },
  plugins: [
    require('tailwindcss-container-sizes')(),
  ],
}

This plugin generates the following utilities:

.container-sm {
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem
}

.container-md {
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem
}

.container-lg {
  max-width: 1024px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem
}

.container-xl {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem
}

Testing

Tests are handled with Jest and can be ran using:

$ yarn run test

Bug Reports

If you discover a bug in Tailwind CSS Container Sizes, please open an issue.

Contributing

Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.

License

Tailwind CSS Container Sizes provided under the MIT License.