{"repo":"jan-dh/figma-tailwindcss","free":true,"listed":false,"github":"https://github.com/jan-dh/figma-tailwindcss","clone":"git clone https://github.com/jan-dh/figma-tailwindcss.git","description":"A plugin that tries to bridge the gap between designs and code. Figma tailwindcss lets you export aspects of a design made in Figma to a javascript theme file that you can import into your tailwindcss config","language":"TypeScript","stars":210,"topics":["figma","tailwindcss","figma-plugin"],"license":null,"category":"ui-components","readme_excerpt":"Figma Tailwindcss A plugin that tries to bridge the gap between design and code. Figma Tailwindcss lets you export aspects of a design made in Figma to a javascript theme file that can easily be used with Tailwindcss. The plugin: Figma TailwindCSS --- Table of Contents - Usage - Roadmap - License Usage Creating your theme The plugin gets it's info from the Local Styles. At this point it picks up: - colors - font-families - text-sizes - box-shadow - border-radius Colors Colors are taken from the Figma Local Paint Styles. Colors can be grouped in the export step. If you want to group codes,prefix them with the same name. Font-families The plugin will pick up all font-families used in the Local Text Styles. Text-sizes All the different font-sizes used in the Local Text Styles will be picked up by the plugin. Pick a base font-size and the rest of the font-size names are calculated accordingly. The logic used: The font-sizes the plugin spits out will also be converted into a rem based scale. Box-shadows Taken from the effectStyles from your document. Border-radius Taken from the nodeStyles from your document. Importing your theme Import the theme.js file in to your tailwind.config.js configuration file to use it: Require syntax const myTheme = require(./theme); the require syntax will make sure your custom values get picked up by the Intelligent Tailwind CSS plugin. If you want to use this syntax, remove the export default theme statement from your theme file Import syntax import ","default_branch":null,"files":null,"tree":[],"storefront":"/r/jan-dh","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/jan-dh/figma-tailwindcss/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}