Browser Support

Understanding how to think about browser support with a utility-first framework.

Tailwind includes support for a lot of CSS features that are only available in modern evergreen browsers, such as grid layout, object-fit/position, and sticky positioning, and uses other modern CSS features like custom properties to implement utilities like translate, rotate, and scale.

That said, because Tailwind is such a low-level framework you can still easily use it to build sites that need to support older browsers like IE10/11.

Using Tailwind with older browsers

In popular component-based frameworks like Bootstrap or Bulma, it’s important to know what browsers are supported because the implementation details for each component are abstracted away from you.

For example, when you are building a grid with classes like .row or .col-4, you need to know which browsers the framework author is targeting because you have no idea if those classes are implemented using floats, Flexbox, or CSS Grid.

Tailwind on the other hand is a low-level utility framework, where most of the classes map directly to individual CSS properties. This means that which browsers you support is really up to you, not the framework.

For example, here is a three column grid built with Tailwind’s Flexbox utilities, so it will only work in IE10+ since Flexbox isn’t supported in IE9:

<div class="flex">
  <div class="w-1/3"><!-- ... --></div>
  <div class="w-1/3"><!-- ... --></div>
  <div class="w-1/3"><!-- ... --></div>
</div>

If you needed to support IE9, you could build your grids with floats instead, since they are supported in virtually all browsers:

<div class="clearfix">
  <div class="float-left w-1/3"><!-- ... --></div>
  <div class="float-left w-1/3"><!-- ... --></div>
  <div class="float-left w-1/3"><!-- ... --></div>
</div>

Because Tailwind doesn’t impose any opinions about how you build the components in your UI, you can implement them however you like according to your own browser support policy.

For the latest information about which CSS features are supported by which browsers, search the excellent Can I Use database.

Vendor Prefixes

Tailwind doesn’t automatically add vendor prefixes to any of its styles. Instead, we recommend that you use Autoprefixer.

To use it, install it via npm:

# Using npm
npm install autoprefixer
# Using Yarn
yarn add autoprefixer

Then add it to the very end of your plugin list in your PostCSS configuration:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

← Controlling File Size   IntelliSense →