The Tailwind framework for monochrome apps
npm install @hazae41/labaseThe Tailwind framework for monochrome apps
``bash`
npm i @hazae41/labase
`css`
@import "../node_modules/@hazae41/labase/src/index.css";
You can use text-default for a black text in light mode and a white text in dark mode
`tsx`
function Example() {
return
This text will be black in light mode and white in dark mode
}
And you can use text-opposite for a white text in light mode and a black text in dark mode
`tsx`
function Example() {
return
This text will be white in light mode and black in dark mode
}
You also have text-default-contrast and text-opposite-contrast for the same color but with less opacity (e.g. secondary text)
You can use bg-default for a white background in light mode and a black background in dark mode
`tsx`
function Example() {
return
This div will be white in light mode and black in dark mode
}
And you can use bg-opposite for a black background in light mode and a white background in dark mode
`tsx`
function Example() {
return
This div will be black in light mode and white in dark mode
}
You have bg-default-contrast and bg-opposite-contrast for low opacity (e.g. div inside div)
`tsx`
function Example() {
return
This div will contrast with its parent
}
And you have bg-default-double-contrast and bg-opposite-double-contrast for high opacity (e.g. effect on already contrasted background)
`tsx`
function Example() {
return
This div will contrast with its parent and contrast again on hover
}
You can use border-default and border-opposite
`tsx`
function Example() {
return
This div will have a black border in light mode and a white border in dark mode
}
Along with border-default-contrast and border-opposite-contrast
`tsx`
function Example() {
return
This div will contrast with its parent
}
On every side
`tsx`
function Example() {
return
This div will only have a border on the left and on the right
}
They both have the same classes as border-* without the side-specific ones
You can use p-safe and m-safe and their side-specific variants
`tsx
function Example() {
return
This will avoid browser interface
This will use the
value$3
You can use oblong padding or margin to have more padding or margin on the x-axis than on the y-axis
`tsx
function Example() {
return
This will have px-8 and py-4
$3
You can use
and scrollbar-opposite to style scrollbars`tsx
function Example() {
return
This div will have everything opposite-colored
$3
You can use animations such as
-
and animate-opacity-out-
and animate-scale-out-
and animate-flip-out-
and animate-opacity-scale-in-
and animate-scale-xy-out-
and animate-scale-xywh-out-
$3
Dark mode is automatic based on system, but you can also force it on a subtree with
tsx
function Example() {
return
This will depend on the system
data-theme="dark">
This will always be dark