Usage

The wrapper object sets the max-width of an element to match a predefined width, set in the theme config.

This is usually achieved in Tailwind by applying classes like the following:

<div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 xl:px-10">
    <!-- ... -->
</div>

However, this is often immediately outsourced to a component, as it's repeated constantly across the project.

The Wrapper object in Captain provides a standardised way to define your wrapper widths and paddings, and then use it effortlessly.

<div class="wrapper">
    <!-- ... -->
</div>

The wrapper class applies a max-width and padding as defined in your Tailwind config.

The padding can be set per breakpoint, and will apply when the screen reaches that breakpoint.

Finally, when the screen width is wider than the wrapper, it will be automatically centered in its container.

See customization options for more information on customizing the wrapper.

Modifiers

The wrapper class also includes two modifiers out of the box, for different sized wrappers:

<!-- Max width changed to 60rem -->
<div class="wrapper wrapper--sm">
  <!-- ... -->
</div>

<!-- Max width changed to 90rem -->
<div class="wrapper wrapper--lg">
  <!-- ... -->
</div>

The modifier names and width sizes can be overridden or extended in your tailwind config. See customization options below.

Elements

The wrapper class has two elements that can be applied to any child inside of a wrapper.

These elements are designed to easily allow content to 'break out' of the wrapper, such as for full-screen bleeding images within content posts, for example.

<!-- Content will be a bit wider than the wrapper -->
<div class="wrapper">
    <img class="wrapper__wide">
        <!-- ... -->
    </img>
</div>

<!-- Content will be the full width of the screen -->
<div class="wrapper">
    <img class="wrapper__bleed">
        <!-- ... -->
    </img>
</div>

Customizing

Max Width

To change the max-widths available to the wrapper class, specify the name and width using the maxWidth option in the theme.wrapper section of your config file:

// tailwind.config.js
module.exports = {
  theme: {
    wrapper: {
+     maxWidth: {
+       DEFAULT: '80rem',
+       sm: '70rem', 
+     },
    },
  },
}

If you only have a single wrapper width, you can specify a single width as a shorthand:

// tailwind.config.js
module.exports = {
  theme: {
    wrapper: {
+     maxWidth: '80rem',
    },
  },
}

Horizontal padding

To change the horizontal padding added to the wrapper class, specify the breakpoint name and padding amount you'd like using the padding option in the theme.wrapper section of your config file:

// tailwind.config.js
module.exports = {
  theme: {
    wrapper: {
+     padding: {
+       DEFAULT: '1rem',
+       md: '2rem',
+       lg: '3.5rem',
+     },
    },
  },
}

Any breakpoints not defined will inherit from the previous breakpoint's value in ascending order, or the default if there is nothing lower specified.

If you don't want a different padding at each breakpoint, you can specify a single padding value to use for all breakpoints instead:

// tailwind.config.js
module.exports = {
  theme: {
    wrapper: {
+     padding: '1rem',
    },
  },
}

You can use values from the rest of the theme config as well, either by using the theme helper or by importing the default config:

// tailwind.config.js
module.exports = {
  theme: {
    wrapper: {
+     padding: (theme) => ({
+       DEFAULT: theme('spacing.4'),
+       'md': theme('spacing.6'), 
+     }),
    },
  },
};

Learn more about this at Tailwind's docs for referencing other values.

Variants

By default, only responsive variants are generated for wrapper utilities.

You can control which variants are generated for the wrapper utilities by modifying the wrapper property in the variants section of your tailwind.config.js file.

For example, this config will disable all variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
+     wrapper: [],
    }
  }

Disabling entirely

If you don't plan to use the wrapper utilities in your project, you can disable them entirely by setting the wrapper property to false in the captain.plugins section of your config file:

  // tailwind.config.js
  module.exports = {
    captain: {
      plugins: {
        // ...
+       wrapper: false,
      }
    }
  }