Awesome
Figma Kit for Tailwind CSS
<p align="center">
<a align='center' href='https://www.figma.com/c/file/768809027799962739'>
<img height="150px" width="auto" src="images/banner.png" />
</a>
</p>
Information
Click the banner or here to get to the project
Limitations
- Font styles need to be overwritten separately
- Figma does not support spread shadow styles
Changelog (dd/mm/yy):
- 24.11.2020: Update to Tailwind v2 colors
- 10.08.2020: Update Heroicons
- 30.07.2020: Add TailwindUI colors
- 19.07.2020: Rename default colors
- 25.04.2020: Update Heroicons
- 12.04.2020: Fix line-height
- 27.02.2020: Update Heroicons
- 04.01.2020: Update to Auto Layout
Alternatively this repo also contains a .fig file that can be imported into Figma.
Need an easy way to import tailwind config styles? Check my Figma Plugin
Icons included: Heroicons UI by Steve Schoger and Adam Wathan
Screenshots
Colors
<p align="center">
<img height="auto" width="auto" src="images/frame-0.png" />
</p>
Typography
<p align="center">
<img height="auto" width="auto" src="images/frame-4.png" />
</p>
Buttons
<p align="center">
<img height="auto" width="auto" src="images/frame-5.png" />
</p>
Pills
<p align="center">
<img height="auto" width="auto" src="images/frame-6.png" />
</p>
Input
<p align="center">
<img height="auto" width="auto" src="images/frame-11.png" />
</p>
Shadows
<p align="center">
<img height="auto" width="auto" src="images/frame-12.png" />
</p>
Navigation
<p align="center">
<img height="auto" width="auto" src="images/frame-3.png" />
</p>
Forms
<p align="center">
<img height="auto" width="auto" src="images/frame-11.png" />
</p>
Alerts
<p align="center">
<img height="auto" width="auto" src="images/frame-8.png" />
</p>
Cards
<p align="center">
<img height="auto" width="auto" src="images/frame-14.png" />
</p>
Heroicons Outline
<p align="center">
<img height="auto" width="auto" src="images/frame-1.png" />
</p>
Heroicons Solid
<p align="center">
<img height="auto" width="auto" src="images/frame-2.png" />
</p>
Container
<p align="center">
<img height="auto" width="auto" src="images/frame-10.png" />
</p>
Spacing
<p align="center">
<img height="auto" width="auto" src="images/frame-9.png" />
</p>
Grid
<p align="center">
<img height="auto" width="auto" src="images/frame-13.png" />
</p>