https://github.com/convertiv/handoff-tailwinds
A demo site for working on handoff tailwinds integration
https://github.com/convertiv/handoff-tailwinds
Last synced: 6 months ago
JSON representation
A demo site for working on handoff tailwinds integration
- Host: GitHub
- URL: https://github.com/convertiv/handoff-tailwinds
- Owner: Convertiv
- Created: 2023-04-28T17:02:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-11T21:46:23.000Z (almost 3 years ago)
- Last Synced: 2025-01-03T07:47:58.312Z (over 1 year ago)
- Language: CSS
- Size: 2.8 MB
- Stars: 0
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Handoff > Tailwind Demo Project
This project is a prototype to experiment with using Handoff (handoff.com) to
generate a Tailwind config file containing the style tokens. This project is
a work in progress as we work out the best way to compile a tailwind token file.
The artifact publishes `/exported/tailwind-tokens/tailwind.config.js`. This project
uses the `/integration/plugin.js` to hook into the figma pipeline and transform
the data stream into a tailwinds format.
This project also includes the tailwindcss, style-loader, and postcss-loader npm
packages in order to build previews of components using the tailwind file. The
plugin.js file provides customization to the webpack build to compile the tailwind
css bundle.
This project publishes to tailwinds.handoff.com on commit or on manual
execution.
This project is currently hooked up to
https://www.figma.com/file/HC3BkyW71SsxV7Md433WbO/Unicorn-Starter
## Help
For more information or if you get stuck, contact brad@convertiv.com
## Requirements
- Node 16+/NVM 8
- Figma developer token to at least read a project
## Quick Start
- Clone this project
- Copy the .env.example and customize it
- Get the `FIGMA_PROJECT_ID` from the url of a figma file
- Get the `DEV_ACCESS_TOKEN` using these steps
- Run `npm install`
- Run `npm run fetch` to pull the latest from your figma file
- Run `npm run start` to boot the GUI locally and give it spin.