Tailwind CSS: Cheat Sheet (Chrome Extension)

Tailwind CSS Cheat Sheet Chrome Extension

Are you new to Tailwind CSS or maybe you’re returning to give it a second try? In any case, having quick access to the Tailwind CSS cheat sheet is a fundamental part of working with the framework. Everyone knows Tailwind CSS has a peculiar syntax.

The two most popular cheat sheets are either the official documentation from Tailwind Labs or the custom-built reference by Tailwind Components. And now, thanks to Shahid Shaikh, you can also get the Tailwind CSS cheat sheet as a Chrome extension.

You can get it directly from the Google Web Store or visit the GitHub project page.

All the references are taken from the Tailwind Components page.

Once you install the extension, you can click on the icon in your extension bar and have quick access to various classes and their associated properties. For each property, there’s also a link to the official docs page in case you need additional details. There is a search feature also.

So, for example, if you need a quick reference to all the available place-items properties, you can just search for that and click to copy to the clipboard.

The project is open-source, so feel free to contribute. I think the search feature could use a little bit of fine-tuning, as I found quite a few overlaps when searching for classes. And, it would probably be nice if someone could port this over for Mozilla users, too.