Tailwind CSS is a CSS framework that's designed to make creating reusable components easier, facilitate development by minimizing the repeated CSS you'll have to write yourself, and optimize the size of the final compiled CSS file by tree-shaking unused classes.

In this article, we'll go over some libraries and plugins that will be useful during your development using Tailwind CSS.

DaisyUI

DaisyUI uses Tailwind's utility classes to provide you with components and utility classes that you'll frequently need in different projects. So, instead of creating the same Button component in your project with the following code:

<button class="inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600">Button</button>

You can just use the classes btn btn-primary:

<button class="btn btn-primary">Button</button>

This uses the familiar Bootstrap class names into Tailwind CSS. You can also customize the components and utility classes using any of Tailwind's utility classes.

Heroicons

Heroicons is an official library from Tailwind CSS. Heroicons provide a large set of icons you can use in React and Vue. You can also just copy the SVG of each icon from the website directly, without having to use the library or in case you're not using React and Vue.

It's pretty simple and handy. For example, to use a User icon:

<UserIcon className="h-5 w-5 text-blue-500"/>

As you can see, you can also add Tailwind's utility classes and it will work perfectly.

Windmill React UI

Windmill React UI provides UI components in React that use Tailwind's utility classes. Similar to DaisyUI, Windmill React UI provides frequently used components to be used in your projects. However, the difference is that instead of providing the components as utility classes like DaisyUI, it provides the components as React components. This can be easier if your project is a React project.

Tailwind Typography

Tailwind Typography is an official Tailwind plugin that allows you to style text neatly and beautifully. In addition, you can make your text's size responsive and add beautiful styling to the text with different colors.

Twin

Twin allows you to combine Tailwind CSS with css-in-js easily. Using Twin allows you to conditionally apply stylings, use Sass stylings, create styled components and more.

Here's an example of how you would conditionally apply a style with Twin:

import tw from 'twin.macro'

const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && tw`hover:border-black`]} />
)

Tailwind CSS Line Clamp

Tailwind CSS Line Clamp is another Tailwind official plugin. It allows you to truncate text based on the number of lines you want to appear. For example, if you want a text to show only the first 4 lines and truncate the rest:

<p class="line-clamp-4">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultrices, urna ut interdum posuere, lectus nulla mattis massa, sed rutrum quam mi a ex. Sed nec lacus ut justo porta vehicula et quis diam. Vestibulum vitae nulla in elit pretium volutpat in a orci. Quisque nec efficitur metus. Fusce dictum convallis volutpat. Donec porta dolor ac erat porttitor, eu rhoncus ante vehicula. Praesent varius ante arcu, fermentum pellentesque ex fermentum id. Nam consequat venenatis auctor. Praesent placerat, ante id venenatis mollis, leo sem eleifend mi, in rutrum massa lorem id enim. Nunc varius enim libero, in tincidunt ex porttitor vitae. Nunc non tellus enim. In quis turpis id arcu vulputate feugiat eu ut nibh. Aenean vel justo velit. Vivamus venenatis lectus non odio fermentum malesuada. Ut vel risus quis mi tincidunt posuere. Fusce tempor rutrum nibh ac cursus.
</p>

Material Tailwind

Material Tailwind is another UI components library that provides easy-to-use React components to use in your projects. It's pretty similar to Windmill React UI, however, it has a wider set of UI components and colors with various options as well.

Conclusion

As Tailwind CSS keeps rising in popularity, we'll see even more helpful and useful libraries and plugins for the framework. Make sure to share with others good resources about Tailwind CSS to help them in their projects, as well!