https://github.com/hazae41/labase
The Tailwind framework for monochrome apps
https://github.com/hazae41/labase
Last synced: 3 months ago
JSON representation
The Tailwind framework for monochrome apps
- Host: GitHub
- URL: https://github.com/hazae41/labase
- Owner: hazae41
- Created: 2025-01-25T00:04:40.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-01-25T01:11:21.000Z (3 months ago)
- Last Synced: 2025-01-25T01:11:23.732Z (3 months ago)
- Language: CSS
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-ccamel - hazae41/labase - The Tailwind framework for monochrome apps (CSS)
README
# LaBase
The Tailwind framework for monochrome apps
```bash
npm i @hazae41/labase
```
[**Node Package 📦**](https://www.npmjs.com/package/@hazae41/labase)
## Features
- 100% CSS
- Made for Tailwind 4.0
- Easy setup
## Setup
```css
@import "../node_modules/@hazae41/labase/src/index.css";
```
## Usage
### Text
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)
### Background
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
}
```
### Border
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
}
```
### Divide and outline
They both have the same classes as `border-*` without the side-specific ones
### Safe padding and margin
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 `safe-area-inset-*` value
### Oblong padding and margin
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
}
```
### Scrollbars
You can use `scrollbar-default` and `scrollbar-opposite` to style scrollbars
```tsx
function Example() {
return
This div will have everything opposite-colored
}
```
### Animations
You can use animations such as
- `animate-opacity-in` and `animate-opacity-out`
- `animate-scale-in` and `animate-scale-out`
- `animate-flip-in` and `animate-flip-out`
- `animate-opacity-scale-in` and `animate-opacity-scale-in`
- `animate-scale-xy-in` and `animate-scale-xy-out`
- `animate-scale-xywh-in` and `animate-scale-xywh-out`
- `animate-vibrate-loop`
### Dark mode
Dark mode is automatic based on system, but you can also force it on a subtree with `data-theme="dark"`
```tsx
function Example() {
return
This will depend on the system
This will always be dark
}
```