useEventfulState() has landed! Check Here for more info.

New features and bug fixes will land in the private github repo before becoming available on the Asset Store. To request access to the repo, please send an email or pm Singtaa#4915 on Discord with your Github username and OneJS Order/INV number.

Tailwind

Just as how UI Toolkit supports a subset of CSS, OneJS implements a subset of Tailwind's utility classes. To enable Tailwind, just drag the Tailwind component onto a ScriptEngine GameObject and setup the stylesheets. Please refer to the included ScriptEngine prefab for default setup of the Tailwind component.

Supported Categories:

  • Backgrounds: Background Color, Unity Specific (bg-crop, bg-fit, bg-fill)
  • Borders: Border Radius, Border Width, Border Color
  • Effects: Opacity
  • Flexbox: Basis, Direction, Wrap, Grow, Shrink, Justify Content, Align Content, Align Items, Align Self
  • Layout: Container, Display, Overflow, Position, Top, Right, Bottom, Left
  • Sizing: Width, Min-Width, Max-Width, Height, Min-Height, Max-Height
  • Spacing: Padding, Margin
  • Transforms: Translate, Rotate, Scale
  • Transitions: (Arbitrary values only; time in seconds) i.e. transition-[color], ease, delay-[0.5], duration-[0.2]
  • Typography: Font Size, Italic & Bold, Text Alignment, Text Color, Whitespace

Negative values are supported for Margin, Top, Right, Bottom, Left (i.e. -mt-8 -left-4 -top-4). Arbitrary values and responsive breakpoints also work as you'd expect.

Notable Caveats

  • Currently you cannot use pseudo-classes and arbitrary values together. In other words, hover:text-[#FFFFFF] is not supported yet. hover:text-rose-200 and text-[#ABCDEF] work fine individually.

VSCode Extension support

You can use the official Tailwind VSCode extension. Just remember to npm install -D tailwindcss and include a default tailwind.config.js first at your working directory ({ProjectDir}/OneJS):

// tailwind.config.js
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note the resulting node_module directory and tailwind.config.js are not actually needed/used by OneJS. They are just required for the Tailwind VSCode extension to activate.

Quick Example


import { render, h } from "preact"

const App = () => {
    return (
        <div class="w-full h-full flex justify-center p-3">
            <div class="max-w-md mx-auto bg-white rounded-xl overflow-hidden md:max-w-2xl">
                <div class="md:flex md:flex-row md:h-full">
                    <div class="md:shrink-0 md:h-full">
                        <div class="h-60 w-full bg-crop md:h-full md:w-56" style={{ backgroundImage: `Samples/skyrim.jpg` }}></div>
                    </div>
                    <div class="p-8">
                        <div class="text-sm text-indigo-500 bold">Quote of the Day</div>
                        <a href="#" class="mt-1 text-lg text-black">I used to be an adventurer like you, until I took an arrow to the knee.</a>
                        <p class="mt-2 text-slate-500">- Town Guard, Elder Scrolls 5: Skyrim</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

render(<App />, document.body)

This is almost the exact little demo shown on this page.