Show dev: Figma design kit built for Tailwind CSS

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 w…


This content originally appeared on DEV Community and was authored by Zoltán Szőgyényi

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 page.

I have also posted it on Github under the CC license (open-source).

Screenshots

Check out some of the screenshots from the free edition of Tailwind Figma:

Dashboard page

Tailwind Figma Dashboard Page

Mobile screens

Tailwind Figma Mobile

Colors

Tailwind Figma Colors

Spacers

Tailwind Figma Spacers

Icons

Tailwind Figma Icons

Typography

Tailwind Figma Typography

Buttons

Tailwind Figma Buttons

Badges

Tailwind Figma Badges

Sidebar and menu

Tailwind Figma Sidebar and Menu

Footer

Tailwind Figma Footer

404 Not Found page

Tailwind Figma 404 not found page

Duplicate on Figma Community

The project is also available on the Figma community and you can duplicate it from there.

Unlock the full design kit

Get access to the full version of Tailwind Figma 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.


This content originally appeared on DEV Community and was authored by Zoltán Szőgyényi


Print Share Comment Cite Upload Translate Updates
APA

Zoltán Szőgyényi | Sciencx (2021-05-13T12:19:38+00:00) Show dev: Figma design kit built for Tailwind CSS. Retrieved from https://www.scien.cx/2021/05/13/show-dev-figma-design-kit-built-for-tailwind-css/

MLA
" » Show dev: Figma design kit built for Tailwind CSS." Zoltán Szőgyényi | Sciencx - Thursday May 13, 2021, https://www.scien.cx/2021/05/13/show-dev-figma-design-kit-built-for-tailwind-css/
HARVARD
Zoltán Szőgyényi | Sciencx Thursday May 13, 2021 » Show dev: Figma design kit built for Tailwind CSS., viewed ,<https://www.scien.cx/2021/05/13/show-dev-figma-design-kit-built-for-tailwind-css/>
VANCOUVER
Zoltán Szőgyényi | Sciencx - » Show dev: Figma design kit built for Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/13/show-dev-figma-design-kit-built-for-tailwind-css/
CHICAGO
" » Show dev: Figma design kit built for Tailwind CSS." Zoltán Szőgyényi | Sciencx - Accessed . https://www.scien.cx/2021/05/13/show-dev-figma-design-kit-built-for-tailwind-css/
IEEE
" » Show dev: Figma design kit built for Tailwind CSS." Zoltán Szőgyényi | Sciencx [Online]. Available: https://www.scien.cx/2021/05/13/show-dev-figma-design-kit-built-for-tailwind-css/. [Accessed: ]
rf:citation
» Show dev: Figma design kit built for Tailwind CSS | Zoltán Szőgyényi | Sciencx | https://www.scien.cx/2021/05/13/show-dev-figma-design-kit-built-for-tailwind-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.