7 Commits
Author SHA1 Message Date
Oleg Isonen 3e715e9b7c fix: Add tests for breakpoint creation in tailwind conversion (#5582)
## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2026-01-25 11:36:01 +01:00
Bogdan Chadkin 395ebc44f2 fix: convert space-* on breakpoints when paste tailwind (#5308)
Ref https://github.com/webstudio-is/webstudio/issues/2651

Didn't consider spaces on breakpoints when converted space-* to gap for
example `md:space-x-6` -> `md:gap-x-6`
2025-06-30 13:33:18 +03:00
Bogdan Chadkin 232847ced1 fix: add unset values to adapt tailwind breakpoints (#5303)
Ref https://github.com/webstudio-is/webstudio/issues/2651

When convert tailwind breakpoints to webstudio breakpoints our algorithm
can find holes and will stop conversion. Though this will create
mobile-first breakpoints which users do not expect.

Here I added workaround to specify "unset" value on property when
tailwind breakpoints has holes. Here's examples

**sm:opacity-20** - here the hole is in the beginning, opacity: 0.2 can
be defined on base breakpoint but we need to fill with something
`max-width: 479`

**max-sm:opacity-10 md:opacity-20** - here the holr is in the middle, we
have `max-width: 479` and base breakpoint but no `max-width: 767`
2025-06-28 17:55:24 +03:00
Bogdan Chadkin 310ab3aa1d fix: support max-* breakpoints in tailwind (#5299)
Ref https://github.com/webstudio-is/webstudio/issues/2651

Tailwind has max-sm, max-lg etc endpoints which need to adapt to ours as
well
2025-06-27 16:32:41 +03:00
Bogdan Chadkin 701793d8b8 experimental: use --tw- prefix for tailwind css variables (#5294)
Ref https://github.com/webstudio-is/webstudio/issues/2651
2025-06-26 16:31:00 +03:00
Bogdan Chadkin 274c8d84c2 experimental: adapt tailwind to webstudio breakpoints (#5244)
Ref https://github.com/webstudio-is/webstudio/issues/2651

There is an edge case which will prevent from converting breakpoints.
When there is no base breakpoint there is no value to fill with inverted
space. Though it should be very rare usecase. Need to test how often it
will create new breakpoints.
2025-06-09 15:32:52 +03:00
Bogdan Chadkin de61cffde6 experimental: paste tailwind (#5217)
Ref https://github.com/webstudio-is/webstudio/issues/2651

Added "Paste Html With Tailwind Classes" command.

For now only tailwind 3 is supported.
Also fixed a few issues with css parser.


<img width="547" alt="Screenshot 2025-05-18 at 00 38 01"
src="https://github.com/user-attachments/assets/470b63e0-9b17-4769-8a65-679b90d73a89"
/>
2025-05-23 13:19:04 +03:00