✌🏻 TailwindCSS Support

[jd-solanki]

Note
What if we don't use shortcuts at all and instead just pass the classes directly to the component? This will not generate separate CSS for a-btn and instead directly add the classes which might improve performance. Additionally, we can also allow applying classes based on props 🤯

Challenges

• What about h-700px? We have to use h-[700px] to make it compatible with both Uno & Tailwind
• We used uno-layer-base classes
• Create configurable TW plugin (Auto generate)
• Create plugin for presetAnu

---

Differences

Uno	Tailwind	Both
w-100px	w-[100px]	w-[100px]
[&_.a-base-input-input-wrapper]-px-0	[&_.a-base-input-input-wrapper]:px-0	[&_.a-base-input-input-wrapper]:px-0
--un-bg-opacity	--tw-bg-opacity	❌

What does preset-theme-default provides that we should provide in tw plugin?

• Theme - TW theme
• Safelist - TW safelist
• rules - Dynamic Utilities
• shortcuts - Dynamic Utilities with multiple properties
• Variants - TW variants

Requirement for auto generating TW plugin

• Use uno.generate to generate styles for creating utilities & shortcuts

Roadmap

• Check Uno JS API