A utility-first CSS framework for rapidly building custom user interfaces.

Tailwind CSS box-sizing utilities

This is a Tailwind CSS plugin that adds utilities to modifiy the CSS Box Model property: box-sizing. It's useful to override defaults coming from Preflight or normalize.css or any other CSS reset.

Note: box-sizing utilities were added to Tailwind 1.2.0 as .box-border and .box-content.

Maintained by: Joan Piedra → @neojp

Installation

Install as a node module with either npm or yarn on your command line

# Install via npm
npm install --save-dev @neojp/tailwindcss-box-sizing-utilities

# Install via yarn
yarn add --dev @neojp/tailwindcss-box-sizing-utilities

Add this module as a plugin on your Tailwind configuration file (tailwind.config.js).

module.exports = {
  plugins: [
      require('@neojp/tailwindcss-box-sizing-utilities')
  ]
};

Variants

Note that this plugin allows the usage of variants through the key boxSizing and will default to your global variant setting.

module.exports = {
  variants: {
    boxSizing: ['responsive']
  }
};

Usage

Use the Tailwind utility classes provided by this plugin.

<div class="border-box"></div>
<div class="content-box"></div>

About overriding browsers' default box-sizing

There is a debate about whether border-box is better than content-box, and how it should be used by default across projects and browsers. Hence it's been included in several popular CSS libraries as a hard-set default. Preflight is one of them.

The browsers' default box-sizing value is content-box.

Overriding the default to border-box with Preflight or any other CSS reset can do wonders for your project's code, but it can and probably will wreak havoc to third-party code, plugins, and widgets that expect it to be content-box.

This utility should help remediate this scenario:

<div class="content-box">
  <!-- insert third-party code here -->
</div>

My personal preference is to avoid Preflight, and just use the .border-box utility classes as needed.

Output

Tailwind will be outputed as follows.

.border-box  { box-sizing: border-box; }
.content-box { box-sizing: content-box; }

Contributing

Feel free to submit an issue or a pull request, and send me a message on Twitter (@neojp) about it.

License

This project has been licensed under the Hippocratic License.