Tailwind

UnoCSS support is currently in the works!

Just as how UI Toolkit supports a subset of CSS, OneJS implements a subset of Tailwind's utility classes. The Tailwind component is responsible for this (and for most cases you can just leave the default settings unchanged).

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.