What’s New in Tailwind CSS v1

Celý článek

Tailwind has finally released a major version of the utility based styling library.

Tailwind is a utility-based CSS framework that just hit a big milestone: v1!!!

Tailwind’s approach to a CSS framework comes in the form of a configurable utility CSS generation based on PostCSS. While I would love to get into the nitty-gritty, there’s already a great article titled Introducing Tailwind.

Today’s article will focus on Tailwind hitting their first major version which has been almost two years in the making.

Even before hitting v1, Tailwind has been adopted by companies like Mozilla and Algolia which shows that it’s not just a gimmick and rather something to stand the test of time.

So, now that we are all caught up, let’s talk about what’s new.

New home page with an awesome animation

The new home page does a better job at explaining what Tailwind is and how people can get started. One of the biggest hurdles when starting with Tailwind is the the mental shift away from pre-defined components like Bootstrap to utility classes. The new navigation and home page animation do a good job at explaining.

No need to create a config file

The configuration file for previous versions used to be a huge blob of configuration options, a default design system. It can actually be a little off-putting. But, with this current iteration, it’s completely optional and only accepts your customization as they come.

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

Now, it’s easier to keep track of customization that only applies your project’s scope.

In the configuration above, you can also see an extend property. This allows you to extend the default Tailwind properties instead of overwrite them.

New Color Palette: 9 shades per color instead of 7

Tailwind now comes with a numeric color palette.

So, it can properly handle having a color and several variations of it. Of course, we can modify the colors to suit our needs.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        lighter: '#b3bcf5',
        default: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

Note: Tailwind will still takes the default property as a special property.

And to access the configuration in your CSS files, you use the theme helper function and use dot-notation to get the values.

.btn-blue {
  background-color: theme('colors.indigo.dark');
}

New Order Utilities

The order utilities are useful for rendering flex items in a different order than they appear in the DOM.

<div class="flex">
  <div class="order-last">1</div>
  <div>2</div>
  <div>3</div>
</div>

In the example above, the div with the class order-last will appear at the end of the list — Same behavior to expect from flexbox’s order CSS property. By default, it has a first, last and none suffix which moves an item to the first, last, and normal positions respectively.

It also supports a 12 column grid, which you can extend to fit your project’s requirement.

New Position Top/Right/Bottom/Left Utilities

The Top / Right / Bottom / Left utilities allows you easily control the placement of positioned elements.

Before, we just had the option to pin something to a side completely:

<div class="pin-t"><!-- ... --></div>

Now we have control over the spacing:

<div class="top-16"><!-- ... --></div>

Quick Upgrade Guide

The first thing you need to do is update Tailwind. Run yarn add -D tailwindcss. If you use npm, run npm install tailwindcss --save-dev.

Then, follow the steps below or head over to the upgrade guide for an in-depth analysis:

• Rename tailwind.js to tailwind.config.js or you could delete it entirely from your project.
• Replace @tailwind preflight to @tailwind base.
• Replace the config() helper with theme() and don’t forget it uses dot-notation to access the properties.

  Conclusion

Tailwind is now stable, has an easy configurable interface, and it’s a delight to use. If you haven’t tried it out before, go give it a shot.