Published on May 15, 2020

What's new in Tailwind CSS 1.2, 1.3 & 1.4

I will tell you the realase notes for tailwind version and also the example in every update, so let's dive in.

Here are the features you're probably going to be the most excited about:

Tailwind CSS v1.2

Grid support

Utilities for specifying the columns in a grid layout. This is very usefull but, at this time it's writing there's couple browser doesn't suppoert this property, so I recomend you to use flex, it's flexibel and easy to use.

<div class="grid grid-cols-3 gap-4">
    <div>1</div>
    <!-- ... -->
    <div>9</div>
</div>

Transition Property

I'm one of person are waiting for it, this is very usefull if you need a little transition animation in your design, Use the transition-{properties} utilities to specify which properties should transition when they change.

<button class="transition duration-500 ease-in-out bg-blue-500 hover:bg-red-500 transform hover:-translate-y-1 hover:scale-110 ...">
    Hover me
</button>

Transforms support (Scale)

Control the scale of an element by first enabling transforms with the transform utility, then specifying the scale using the scale-{percentage}, scale-x-{percentage}, and scale-y-{percentage} utilities.

<img class="transform scale-75 ...">
<img class="transform scale-100 ...">
<img class="transform scale-125 ...">
<img class="transform scale-150 ...">

Tailwind CSS v1.3

Super useful new features, including:

"space between" layout utilities

Control the horizontal space between elements using the space-x-{amount} utilities.

<div class="flex space-x-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

"border between" utilities

Add borders between horizontal elements using the divide-x-{amount} utilities.

<div class="grid grid-cols-3 divide-x divide-gray-400">
    <div class="text-center">1</div>
    <div class="text-center">2</div>
    <div class="text-center">3</div>
</div>

It also have divide-y, so please play around it until you know what's going on.

transition-delay utilities

I like this one, transition delay. Use the delay-{amount} utilities to control an element's transition-delay.

<button class="transition delay-150 duration-300 ease-in-out ...">
    Hover me
</button>
<button class="transition delay-300 duration-300 ease-in-out ...">
    Hover me
</button>
<button class="transition delay-700 duration-300 ease-in-out ...">
    Hover me
</button>

group-focus variant

Styling elements on hover, focus, and more can be accomplished by prefixing utilities with the appropriate pseudo-class.

<form>
    <input class="bg-gray-200 hover:bg-white hover:border-gray-300 focus:outline-none focus:bg-white focus:shadow-outline focus:border-gray-300 ...">
    <button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline ...">
        Sign Up
    </button>
</form>

Not all pseudo-class variants are enabled for all utilities by default due to file-size considerations

Tailwind CSS v1.4

This is the last version of tailwind now, which is v1.4, there's two new features in this release.

New color opacity utilities

Control the opacity of an element's background color using the .bg-opacity-{amount} utilities.

<div class="bg-blue-500 bg-opacity-100">
    <!-- ... -->
</div>
<div class="bg-blue-500 bg-opacity-75">
    <!-- ... -->
</div>
<div class="bg-blue-500 bg-opacity-50">
    <!-- ... -->
</div>
<div class="bg-blue-500 bg-opacity-25">
    <!-- ... -->
</div>
<div class="bg-blue-500 bg-opacity-0">
    <!-- ... -->
</div>

Built-in PurgeCSS support

You know what, this is exactly what I expect for long time, the purgeCSS built-in from Tailwind itself. Now, when you generate the tailwind config file npx tailwind init, it will add one option for purge, what file you want to purge.

module.exports = {
    purge: [],
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}

Let's assume you're working with laravel project, the file you're trying to purge is inside your resources, either its blade or .vue, etc.

module.exports = {
    purge: [
        './resources/**/*.vue',
        './resources/views/**/*.blade.php',
        './resources/**/*.ts',
        './resources/**/*.tsx',
    ],
    ...
}

Alright, that's it. Share if you think it's usefull.

Login to make a comments. Don't worry, it's free.
© 2020 Irsyad Notes