Tailwind aware padding

[bkrmendy]

Problem

The padding controls cannot be used to read/write values in projects that use Tailwind for styling.

Fix

Use the style plugins and the StyleInfo system to make this possible.

Specifically,

• Add the padding shorthand prop/padding longhand prop to the StyleInfo interface
• Update InlineStylePlugin and TailwindStylePlugin to support the new props in StyleInfo
• Refactor the padding strategy, the padding control handle and the subdued padding control to read element styles through a StyleInfoReader instance
• Add a new property patcher in style-plugins@patchers to take care of patching removed padding props
• Add tests with a tailwind project to the padding strategy test suite

Out of scope

The jump in the bounding box after the interaction ends (video) will be addressed on a follow-up PR

Manual Tests

I hereby swear that:

• I opened a hydrogen project and it loaded
• I could navigate to various routes in Play mode

[github-actions]

Try me

[relativeci]

#15132 Bundle Size — 58.08MiB (~+0.01%).

79399a8(current) vs d1d46c1 master#15127(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics   2 changes 1 regression

	Current #15132	Baseline #15127
Initial JS	41.05MiB(~+0.01%)	41.05MiB
Initial CSS	0B	0B
Cache Invalidation	21.42%	18.01%
Chunks	20	20
Assets	22	22
Modules	4169	4169
Duplicate Modules	213	213
Duplicate Code	27.3%	27.3%
Packages	477	477
Duplicate Packages	70	70

Bundle size by type   2 changes 1 regression 1 improvement

	Current #15132	Baseline #15127
JS	58.07MiB (~+0.01%)	58.07MiB
HTML	7.37KiB (-0.24%)	7.39KiB

Bundle analysis report Branch feature/tailwind-aware-padding Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}