What’s new in Tailwind CSS v2?

I. Introduction

Tailwindcss – a utility-first CSS framework, is gaining popularity among frontend developers with 34.7k stars per github and nearly 2k fork contribute. Tailwindcss can be seen gradually improving to continue the influence of bootstrap in the present time.

Through development and release of multiple versions, Tailwindcss released v2, which has significantly improved: placeholder styling, screenreader visibility, CSS grid, transitions, transforms, animations, layout utilities, integrated tree-shaking, gradients , … and many pretty “delicious” utilities for Frontend Developer.

II. main content

1. Tailwindcss provide new color code table

• If in v1: https://v1.tailwindcss.com/docs/customizing-colors Tailwindcss only 10 main colors, in v2 the number increased to 22 main colors with 10 shades of each color bringing the total number of colors up. number 220.
• Tailwindcss preconfigured for 8 basic colors, you can import tailwindcss/colors and use. When needed, we import it in tailwind.config.js offline

2. Dark mode

As you can see most of the websites today use two main themes: Dark mode and Light mode. Can be mentioned as: Facebook, Github, Viblo, … We just need to declare in tailwind config:

3. Expand 2XL breakpoint

To support responsive on larger screens, in particular, Tailwindcss in the default config:

and then use:

Personally, right from v1.9, you can completely customize the size of the responsive screen: so this change is nothing special.

4. New facilities for outline ring

• Ring provides a solid box-shadow for the card, for example when you want to focus on a button and it will have a solid box-shadow add the following:

• You can add effects with ring-offset-{width}

• The use of ring can also be combined with shadow :

5. Utility-friendly form styles

TailwindCss provides one more plugin for forms which is declared at @tailwindcss/forms

6. Default line-heights according to font-size

When declaring font-size, it will declare line-heights attached.

So when we use the font-size base , the tag will receive a line-height of 1.5rem . For example:

In addition, the leading (line-height) property, when written with the same font-size, overrides the tag’s line-height.

7. Expand spacing, typography, and opacity

• Add starting values 0.5 , 1.5 , 2.5 , and 3.5 for the gaps as we use padding, margin, …

• And ends with the values 72 , 80 , and 96 :

• Add the inset property to align the position (top / right / bottom / left):

• Fontsize extends 7xl , 8xl , and 9xl :

• Opacity range from 0 to 100 :

8. Use @apply with everything

You can use @apply to inline the utility classes for tags:

9. Add a new widget for text overflow

• Add overflow-ellipsis and overflow-clip

10. Extend variants

In previous versions, if you wanted to use the focus-visible for backgroundColor , you had to list in the config all the properties like:

As for TailwindCss v2:

11. Declare group-hover and focus-within

group-hover and focus-within are enabled by default:

12. Register the transition duration and easing curve

Previously when adding a transition you had to add 3 classes:

Now you need to register the effects in the config

We use:

And of course, we can also override properties if we write the old style:

13. No longer compatible with IE11

You should consider using it if your project uses IE11.

III. Conclusion

TailwindCss v2 has improved a lot of utilities, but you see how. Personally, I am still waiting for another breakthrough from Tailwind.