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