Skip to content

Style Unity UIToolkit UI elements with Tailwind CSS syntax + Extra helper fonts and icons loading

License

MIT, Unknown licenses found

Licenses found

MIT
LICENSE
Unknown
LICENSE.meta
Notifications You must be signed in to change notification settings

BennyKok/unity-tailwindcss

Repository files navigation

This repo contains three major functional features.

✨ Fonts Finder

Fonts? I've got you, load and hot swap fonts for realtime preview, no more downloading and importing manually.

Window -> Fonts Window
fontsfinder.mp4

✨ Icons Finder

Forget about importing png icons and finding them, NOW, Instantly load any open source icons to your game UI, or editor UI with Icons Finder. Read the original Twitter thread for more info https://twitter.com/BennyKokMusic/status/1675546561277984769

Window -> Icons Window
unity-react-icons.mp4

Tailwind CSS for Unity UIToolkit

⚠️ This is a proof of concept and not ready for production use.

The core idea to use the same Tailwind CSS syntax to style Unity UIToolkit UI elements.


unity-tailwind.mp4

Roadmap

  • Basic styling (w-full, text-white, bg-red-500, etc)
  • Basic layout (flex, flex-col, flex-row, etc)
  • Support Transform (partial done, missing translate and negative values)
  • Support Transition
  • Support Hover, Active, Inactive State
  • Update color palette to latest Tailwind CSS
  • Custom Built-in UI elements that enable styling

Install

Via UPM.

UPM install via git url ->

https://github.com/BennyKok/unity-tailwindcss.git

You can also choose to add this as a submodule in your package folder.

git submodule add https://github.com/BennyKok/unity-tailwindcss.git Packages/unity-tailwindcss

Note

Current implementation is by generating uss compatible utility css class that follows the Tailwind CSS syntax. A better way would be implementing a JIT compiler that generates the uss file on the fly. However that would enable more work to be done. Currently this system if a POC that we can use to evaluate the feasibility of this project. Whether this is a better system and improve UITK usability.

Explore

More about BennyKok and his Unity related work.

Twitter | Website | AssetStore

About

Style Unity UIToolkit UI elements with Tailwind CSS syntax + Extra helper fonts and icons loading

Resources

License

MIT, Unknown licenses found

Licenses found

MIT
LICENSE
Unknown
LICENSE.meta

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages