TailwindCSS base theme design tokens

Contribution
,
1

Hi,
I wanted to share a collection of design tokens I created to mimic most used TailwindCSS utilities : TailwindCSS default theme design tokens for Penpot implementation. There are spacing, border-width, border-radius and sizing tokens. · GitHub

You can import the JSON file in Penpot with the import button at the bottom.
You will then have access to the default values in Tailwind : spacing (padding, margin, …), sizing, border-radius and border-width.

Feature request : this setup would benefit from a way to sort tokens by name (and maybe values), because the order of imported tokens seems to be random. I would love to have size-1, size-2, size-3, … in order to find the correct token more easily ==> this has been fixed !

{F651C803-A9F0-46A6-87C5-EC7ADB22F049}
{F651C803-A9F0-46A6-87C5-EC7ADB22F049}266×453 8.92 KB

3 Likes
2

Very cool, thanks for sharing!

2 Likes
3

Awesome contribution! Have you already submitted it to the PenpotHub? That way it could reach many more people.

About the request, tokens are shown in alphabetical order. You could get what you want by normalizing the number of digits of the numeric part. That way you could get something like “size-001”, “size-002”, (…), “size-012”…

2 Likes
4

Thanks ! I updated the file to normalize the number of digits, and they are correctly sorted now !
Will see how to submit it to PenpotHub.

3 Likes