Show dev: Figma design kit built for Tailwind CSS
Tags: figma, tailwindcss, showdev
Published: 2021-05-13 12:19:38

Hello devs,

Today I want to show you a project that we've been working on for a while now. Basically, it's a design kit built in Figma specifically for integration with Tailwind CSS.

All of the properties, variants, and style guideline is identical with the default Tailwind CSS utility classes, which means that once you're finished designing your website, it will be super easy to just write the HTML using the Tailwind classes right away.

You can duplicate the project on the [Tailwind Figma Community](https://www.figma.com/community/file/973638860086718856) page.

I have also posted it on [Github](https://github.com/themesberg/tailwind-figma) under the CC license (open-source).

## Screenshots

Check out some of the screenshots from the free edition of Flowbite:

### Dashboard page

[![Tailwind Figma Dashboard Page](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-dashboard.png)](https://www.figma.com/community/file/973638860086718856)

### Mobile screens

[![Tailwind Figma Mobile](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-mobile.png)](https://www.figma.com/community/file/973638860086718856)

### Colors

[![Tailwind Figma Colors](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-colors.png)](https://www.figma.com/community/file/973638860086718856)

### Spacers

[![Tailwind Figma Spacers](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-spacers.png)](https://www.figma.com/community/file/973638860086718856)

### Icons

[![Tailwind Figma Icons](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-icons.png)](https://www.figma.com/community/file/973638860086718856)

### Typography

[![Tailwind Figma Typography](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-typography.png)](https://www.figma.com/community/file/973638860086718856)

### Buttons

[![Tailwind Figma Buttons](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-buttons.png)](https://www.figma.com/community/file/973638860086718856)

### Badges

[![Tailwind Figma Badges](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-badges.png)](https://www.figma.com/community/file/973638860086718856)

### Sidebar and menu

[![Tailwind Figma Sidebar and Menu](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-sidebar-and-navbars.png)](https://www.figma.com/community/file/973638860086718856)

### Footer

[![Tailwind Figma Footer](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-footers.png)](https://www.figma.com/community/file/973638860086718856)


### 404 Not Found page

[![Tailwind Figma 404 not found page](https://tailwind-figma.s3.us-east-2.amazonaws.com/public/tailwind-figma-404.png)](https://www.figma.com/community/file/973638860086718856)


## Duplicate on Figma Community

The project is also available on the [Figma community](https://www.figma.com/community/file/973638860086718856) and you can duplicate it from there.

## Unlock the full design kit

[Get access to the full version](https://flowbite.com/#pricing) of Flowbite which includes 27 hand-crafted pages, responsive screen examples for mobile, tablet, and desktop devices, advanced UI elements using Figma variants, auto-layouts, style guideline, and many more.

- Learn more about Flowbite Figma design kit: [flowbite.com](https://flowbite.com/)
- Learn more about Themesberg: [themesberg.com](https://themesberg.com)