DocsWikiVanillaBoxStore
To request access to the OneJS private repo, please message Singtaa on Discord with your Invoice # and Github username. Our Discord is also a great place to chat and search for answers already asked by the community.
VERSION
Doc Menu
Why OneJSGetting StartedTutorial 101C#-JS WorkflowDeploymentLimitationsUpgradingChangelog

Engine

ScriptEngineLive ReloadBundlerDom

UI Library

TailwindUI CompsRuntime USSStyled Comps

Misc

Async AwaitCustom ControlsC# to TS Def Converter

Samples

Basic UsageMain SampleFortnite UIOverwatch UI

Tailwind

Tailwind support went through a major rework in v1.6. Now the workflow will involve the Tailwind compiler (CLI) and the tailwind.config.js file for better theming and customization.

Usage

  • Enter Playmode with ScriptEngine in the scene.

This will create a new tailwind.config.js file under the working directory ({ProjectDir}/OneJS) if one is not found. Remember to append to the content array to include all .js files you'd like to monitor. Use wildcards like "./MyFolder/**/*.js" to include entire folders.

  • Install tailwindcss under directory {ProjectDir}/OneJS
npm install -D tailwindcss
  • Run the tailwindcss compiler in watch mode
npx tailwindcss -i ./input.css -o ./output.css --watch

To make things easier, a default VSCode Task (tasks.json) is provided so you can quickly start the tailwind compiler without opening a separate Shell/Terminal. You can use Ctrl + Shift + B to access the task tailwindcss: watch in VSCode.

For IntelliJ IDEA, you can set up a Shell Script in Run/Debug Configurations, like so:

Caveats

USS only supports a subset of CSS features. Some utility classes will not work because of the following USS limitations.

  • Complex selectors are not supported. So things like space-y-0.5 that uses advanced selectors (> * + *) won't work.
  • var() usage inside of another function like rgb() is not supported.

But since we now have the full power of the Tailwind compiler, we can make various workarounds via tailwind.config.js. Refer to ScriptLib/onejs/onejs-tw-config.js for examples and the Tailwind Customization docs for more info.