Tailwind CSS, the utility-first framework, just released v1.0 and you can start using it today! For the launch of v1, the Tailwind team has been working hard on improving the documentation, highlighting what all it can do, and adjusting some of the API to add additional clarity.

If you are not familiar with Tailwind, here is how they describe it related to most other CSS frameworks:

They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.

Tailwind is different.

Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

The creators

Here is a snippet of how this framework can be used.

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

You can start using this version today and check out the Installation instructions as well as the upgrade guide.

(Visited 57 times, 1 visits today)

Leave A Comment

Your email address will not be published. Required fields are marked *