Work with Tailwind projects.

Bring your Tailwind code into Unbondr

1. 1

   Connect GitHub

   Choose Connect GitHub, sign in when requested, and select the repository containing your project. GitHub access must be available on your plan.

2. 2

   Select the source branch

   In Import Repository, choose the branch you want to edit. The importer loads and analyzes that branch’s supported source and styling information.

3. 3

   Check the imported page

   Wait for analysis to finish. Open the relevant page and inspect its layout and styling before editing. In a Tailwind project, the properties panel exposes Tailwind utility fields.

Edit a selected element

1. 1

   Select the element

   Click the element on the canvas or find it in Layers. Select a parent container for section layout, or a child element for a single label, image, or link.

2. 2

   Use the relevant property field

   Edit the element’s content and supported attributes, or use the dedicated background, text color, and spacing utility fields. Use the full Tailwind classes field for layout and other class changes.

3. 3

   Apply the utility

   For the dedicated utility inputs, press Enter or leave the field to apply your change. Escape discards the uncommitted draft. Incomplete or invalid values show an error and are not applied.

4. 4

   Review the result

   Check the canvas and preview at several widths. Confirm that the intended element and breakpoint changed, then continue editing.

Which field should I use?

Edit responsive and state variants

Start with base utilities, then add the appropriate responsive variants. For example, p-6 md:px-8 sets base padding and changes horizontal padding at the project’s md breakpoint. A layout such as flex flex-col md:flex-row belongs in the full classes field.

The dedicated utility editor preserves other responsive and state variants unless your new utility addresses the same variant and utility group. Replacing a base background does not automatically remove a separate hover background.

Use the Tailwind project’s own breakpoint and theme definitions. Do not assume Hygular and Tailwind use the same numeric breakpoints. Inspect widths around each layout change, not only the device presets.

Keep source logic intact

The visual editor works with the supported static projection of your source. Dynamic class expressions, application state, and protected source regions are not freely replaceable static markup. If the editor identifies a dynamic property as protected, edit that expression in your source code instead.

Do not delete a component solely because its live application behavior is missing from the preview. External dependencies and framework-specific runtime behavior still need testing in the original application.

• Use the Tailwind blocks and utilities appropriate to the imported project.
• Do not expect Hygular-only modal, drawer, or toast actions to work just because Tailwind styling is present.
• Figma import currently creates Hygular content; it does not directly convert a Figma screen into a Tailwind-linked repository page.

Send your changes back to GitHub

1. 1

   Open Sync

   When your edits are ready, open the GitHub Sync flow in the editor.

2. 2

   Review the destination and files

   Check Target Repository, Base Branch, and Files Changed. Add a clear Commit Message. If no visual changes are detected, there may be nothing to synchronize.

3. 3

   Create the pull request

   Choose Create Pull Request. The sync flow creates a branch and a PR for your changes; it does not merge directly into the base branch.

4. 4

   Review and merge in GitHub

   Open the resulting PR, review the source diff, and run the repository’s build and tests. Merge when ready, then deploy through your normal application workflow.

When you need newer code from the repository

If the selected branch changes after you imported it, synchronization can show Conflict Detected and block the write to prevent overwriting newer code. Acknowledge closes that message; it does not pull or merge the newer branch.

Before importing again, preserve your current work with a project backup and inspect the latest changes in GitHub. Import the updated branch through the repository import flow in a separate project when you need to compare it safely. Reapply only the changes you still want against that source.

The current interface does not provide an automatic Git merge or rebase workflow inside the canvas. Resolve repository-level conflicts in your normal Git workflow.

If an edit does not appear