Awesome
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
https://github.com/BennyKok/unity-tailwindcss/assets/18395202/8ece12d6-8daf-4043-88f4-b0eb9cfdccfa
✨ 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
https://github.com/BennyKok/unity-tailwindcss/assets/18395202/bcc143cf-dc2d-42d6-96e7-ae6392c160b2
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.
https://cdn.discordapp.com/attachments/750213962716545054/1122496614825738251/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