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 likergb()
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.