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
andtext-[#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.