BT

Facilitating the spread of knowledge and innovation in professional software development

Contribute

Topics

Choose your language

InfoQ Homepage News Tailwind CSS V2.0 - First Major Update

Tailwind CSS V2.0 - First Major Update

This item in japanese

Bookmarks

Tailwind CSS, a popular utility framework, recently received its first major update that offers significant improvements, including dark mode support, extended color palette, improved form support, and many other features that were requested by the community.

Tailwind CSS offers developers and designers the ability to easily compose sophisticated web applications by breaking down the CSS into small composable building blocks (or classes) such as text-center and rotate-90.

Using composable building blocks, Tailwind CSS offers broader control over the user interface than existing CSS frameworks such as Bootstrap, which offers a set of built-in components with predefined design.

The v2.0 release focuses on expanding the framework capabilities and addressing some of the pain points that surfaced after the initial release.

These changes include:

  1. An extended color palette featuring 220 colors with a new workflow for building your own color schemes.
  2. Dark mode support, making it easier than ever to change your design when dark mode is enabled dynamically.
  3. Extra-wide 2XL breakpoint for designing at 1536px and above.
  4. New outline ring utilities that emulate outline-radius in CSS.
  5. Utility-friendly form styles, a new form reset that makes it easy to customize form elements with just utility classes.
  6. Default line-heights per font size.
  7. Extended spacing, typography, and opacity scales, for fine-tuning things at the micro-level.
  8. Use @apply with anything, including responsive, hover, focus, and other variants.
  9. New text-overflow utilities for controlling things more precisely than you can with truncate alone.
  10. Extend variants, so you can enable extra variants like focus-visible without redeclaring the entire list or thinking about order.
  11. Group-hover and focus-within by default.
  12. Default transition duration and easing curve.

To find out more about the individual features, head over to the Tailwind blog or read through the extensive documentation provided by the development team.

Upgrading to Tailwind CSS v2.0 is relatively straightforward by using the upgrade-guide. It's important to note that while the Tailwind CSS team has kept breaking changes to a minimum, IE11 support has been dropped, and organizations that still need to support it are advised not to upgrade.

Tailwind CSS is open source software available under the MIT license. Contributions are welcome under the Tailwind CSS contribution guidelines.

We need your feedback

How might we improve InfoQ for you

Thank you for being an InfoQ reader.

Each year, we seek feedback from our readers to help us improve InfoQ. Would you mind spending 2 minutes to share your feedback in our short survey? Your feedback will directly help us continually evolve how we support you.

Take the Survey

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.