Figma Kit for TailwindCSS
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
Add the TailwindUI colors
The changelog indicates that TailwindUI colors are added, but when inspecting the latest .fig file, the colors available don't match the Tailwind UI documentation, and don't include the
50
shade of each color. Not sure what the mismatch is — is the wrong file published?set tailwind's default line-height
Problem
line height of styles is not the same as tailwind.
Expected
Styles use same line-height as tailwind: 150%
Details
Tailwind sets 1.5 as the default line height in the base.css overwrite.
The tailwindcss-figma-kit currently uses
Auto
which represents 100% of the font defined line-height:(source)
Adding tailwind custom forms
Do you have any interest in adding the custom forms library from tailwind to the Figma kit? It was made by Adam
https://tailwindcss-custom-forms.netlify.com
Update to Tailwind v2
Tailwind v2 is coming out today. I'll update the color scheme and adjust the components accordingly.
Since adding the colors as a preview by hand is quite a tedious process, I'll be integrating something to automate it in my Figma plugin.
All colour styles are prefixed with `default/`
When I import my config using the plugin, I need to add "default" as the prefix in order to overwrite the built-in styles. I'd prefer these to not have this prefix - this will help people using the plugin to overwrite the styles in the .fig.
The font styles don't include
default
as a prefix.Changing colours
`is there a way I can change background colours for all my components at once without editing the existing styles? Eg: if I want my background to be light blue 500 instead of gay600 in figma , where can I make changes that would change everywhere with one click?
Card with header and footer/Desktop Not scaling correctly
Hello, thanks for all the components! Our team found an issue while scaling the Card with header and footer/Desktop.
Basically the footer stays up and the content box does not grows with the scaled card.
We fixed it by doing this:
Now it scales :)
Thank you.