npm package: @strato-css/preset-base
Description: Base preset for Strato CSS - Tailwind compatible utilities
Latest version: 1.1.0

# @strato-css/preset-base

Base preset for Strato CSS - Tailwind compatible utilities.

## Installation

```bash
pnpm add @strato-css/preset-base
```

## Usage

```typescript
// unocss.config.ts
import { defineConfig } from 'unocss';
import presetBase from '@strato-css/preset-base';

export default defineConfig({
  presets: [
    presetBase()
  ]
});
```

## Features

### Spacing Utilities

- Padding: `p-4`, `px-2`, `py-4`, `pt-2`, `pr-4`, `pb-6`, `pl-2`
- Margin: `m-4`, `mx-auto`, `my-2`, `mt-0`, `mr-4`, `mb-6`, `ml-2`
- Gap: `gap-2`, `gap-4`, `gap-6`, `gap-x-4`, `gap-y-2`

### Layout Utilities

- Display: `block`, `inline-block`, `inline`, `flex`, `grid`, `hidden`
- Position: `static`, `fixed`, `absolute`, `relative`, `sticky`
- Overflow: `overflow-auto`, `overflow-hidden`, `overflow-visible`, `overflow-scroll`

### Color Utilities

- Text color: `text-white`, `text-primary`, `text-gray-500`
- Background: `bg-white`, `bg-primary`, `bg-gray-100`
- Border: `border-gray-200`, `border-primary`

### Typography Utilities

- Font size: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`
- Font weight: `font-thin`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`
- Line height: `leading-none`, `leading-tight`, `leading-normal`, `leading-relaxed`
- Text align: `text-left`, `text-center`, `text-right`, `text-justify`

### Border Utilities

- Border width: `border`, `border-0`, `border-2`, `border-4`
- Border radius: `rounded-none`, `rounded-sm`, `rounded`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`

### Flexbox Utilities

- Direction: `flex-row`, `flex-row-reverse`, `flex-col`, `flex-col-reverse`
- Wrap: `flex-wrap`, `flex-nowrap`, `flex-wrap-reverse`
- Justify: `justify-start`, `justify-end`, `justify-center`, `justify-between`, `justify-around`, `justify-evenly`
- Align: `items-start`, `items-end`, `items-center`, `items-baseline`, `items-stretch`
- Flex: `flex-1`, `flex-auto`, `flex-initial`, `flex-none`

### Grid Utilities

- Columns: `grid-cols-1`, `grid-cols-2`, `grid-cols-3`, `grid-cols-4`, `grid-cols-6`, `grid-cols-12`
- Rows: `grid-rows-1`, `grid-rows-2`, `grid-rows-3`, `grid-rows-4`, `grid-rows-6`
- Column span: `col-span-1`, `col-span-2`, `col-span-full`, `col-auto`, `col-start-1`, `col-end-3`
- Row span: `row-span-1`, `row-span-2`, `row-span-full`, `row-auto`, `row-start-1`, `row-end-3`

### Responsive Variants

```html
<!-- Mobile: 1 column, tablet: 2 columns, desktop: 4 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- content -->
</div>
```

### Dark Mode Variant

```html
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Adaptive content
</div>
```

### State Variants

```html
<button class="bg-primary hover:bg-primary-600 focus:ring-2 active:bg-primary-700">
  Button
</button>
```

### Shortcuts

Pre-built component combinations:

- Buttons: `btn`, `btn-primary`, `btn-secondary`, `btn-success`, `btn-danger`, `btn-sm`, `btn-lg`
- Cards: `card`, `card-dark`
- Inputs: `input`, `input-primary`, `input-error`
- Layouts: `flex-center`, `flex-between`, `flex-col-center`, `grid-2`, `grid-3`, `grid-4`
- Typography: `heading-1`, `heading-2`, `heading-3`, `heading-4`, `text-body`, `text-small`, `text-muted`
- Spacing: `section`, `gap-2`, `gap-4`, `gap-6`, `gap-8`
- Effects: `shadow`, `shadow-lg`, `shadow-xl`, `shadow-none`, `rounded`, `rounded-lg`, `rounded-full`
- Transitions: `transition`, `transition-fast`, `transition-slow`

## License

MIT