Giter VIP home page Giter VIP logo

unity-tailwindcss's Introduction

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

unity-tailwindcss's People

Contributors

bennykok avatar sebastianfeistl avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.