{"id":13456524,"url":"https://github.com/jan-dh/figma-tailwindcss","last_synced_at":"2025-07-02T23:35:09.499Z","repository":{"id":39275755,"uuid":"226738135","full_name":"jan-dh/figma-tailwindcss","owner":"jan-dh","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","archived":false,"fork":false,"pushed_at":"2024-05-22T12:40:52.000Z","size":2075,"stargazers_count":190,"open_issues_count":7,"forks_count":19,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-03T02:11:21.473Z","etag":null,"topics":["figma","figma-plugin","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jan-dh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-08T22:00:59.000Z","updated_at":"2025-03-28T11:00:31.000Z","dependencies_parsed_at":"2024-05-22T08:45:31.450Z","dependency_job_id":"53ba10e5-6f6b-4d20-ad87-b5d73096ff9b","html_url":"https://github.com/jan-dh/figma-tailwindcss","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/jan-dh/figma-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jan-dh%2Ffigma-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jan-dh%2Ffigma-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jan-dh%2Ffigma-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jan-dh%2Ffigma-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jan-dh","download_url":"https://codeload.github.com/jan-dh/figma-tailwindcss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jan-dh%2Ffigma-tailwindcss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263233955,"owners_count":23434890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["figma","figma-plugin","tailwindcss"],"created_at":"2024-07-31T08:01:23.501Z","updated_at":"2025-07-02T23:35:09.463Z","avatar_url":"https://github.com/jan-dh.png","language":"JavaScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Figma Tailwindcss\n\nA 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.\n\nThe plugin: [Figma TailwindCSS](https://www.figma.com/community/plugin/785619431629077634/Figma-Tailwindcss)\n\n---\n\n## Table of Contents\n\n-   [Usage](#usage)\n-   [Roadmap](#roadmap)\n-   [License](#license)\n\n## Usage\n\n### Creating your theme\n\nThe plugin gets it's info from the Local Styles. At this point it picks up:\n\n-   colors\n-   font-families\n-   text-sizes\n-   box-shadow\n-   border-radius\n\n#### Colors\n\nColors 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.\n\n#### Font-families\n\nThe plugin will pick up all font-families used in the Local Text Styles.\n\n#### Text-sizes\n\nAll 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:\n\n```javascript\n...\n'3xs'\n'2xs'\n'xs'\n'sm'\n'base'\n'lg'\n'xl'\n'2xl'\n'3xl'\n...\n```\n\nThe font-sizes the plugin spits out will also be converted into a rem based scale.\n\n#### Box-shadows\nTaken from the effectStyles from your document.\n\n#### Border-radius\nTaken from the nodeStyles from your document.\n\n### Importing your theme\n\nImport the `theme.js` file in to your `tailwind.config.js` configuration file to use it:\n\n**Require syntax**\n\n`const myTheme = require(./theme);`\n\nthe require syntax will make sure your custom values get picked up by the [Intelligent Tailwind CSS plugin](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss). If you want to use this syntax, remove the `export default theme` statement from your theme file\n\n**Import syntax**\n\n`import 'myTheme' from './theme`\n\n#### Extending the default theme\n\nYou can extend the default theme like so:\n\n```\nmodule.exports = {\n    theme: {\n        extend: {\n            colors: myTheme.colors\n        }\n    }\n```\n\nMore info on extending the default theme:\n- https://tailwindcss.com/docs/theme#extending-the-default-theme\n- https://www.youtube.com/watch?v=0l0Gx8gWPHk\u0026ab_channel=TailwindLabs\n\n## Contributing\n\nAll feedback is welcome. Feel free to submit [issues or suggestions](https://github.com/jan-dh/figma-tailwindcss/issues).\n\nThe plugin shows you some random messages when you're missing one of the exportable properties. If you want to add your own, feel free to make a Pull Request for [this file](https://github.com/jan-dh/figma-tailwindcss/blob/master/src/js/helpers/randomMessages.js).\n\n## Roadmap\n\n-  line-height\n\n## License\n\nThis project is licensed under the terms of the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjan-dh%2Ffigma-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjan-dh%2Ffigma-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjan-dh%2Ffigma-tailwindcss/lists"}