open-index/open-npm huggingface dataset:
npm package: @nattui/tailwind-colors
Description: Centralized CSS and Tailwind color definitions for consistent styling across projects
Author: Natt Nguyen
Latest version: 0.0.8

# @nattui/tailwind-colors

Centralized CSS and Tailwind color definitions for consistent styling across projects.

## Installation

```bash
npm install @nattui/tailwind-colors
# or
pnpm add @nattui/tailwind-colors
# or
bun add @nattui/tailwind-colors
```

## Usage

### Import in your CSS

```css
@import "@nattui/tailwind-colors";
```

Or import directly in your main CSS file:

```css
@import "@nattui/tailwind-colors/src/index.css";
```

### Using CSS Variables

All colors are available as CSS custom properties:

```css
.my-element {
  background-color: var(--color-gray-1);
  color: var(--color-primary-9);
  border-color: var(--color-gray-4);
}
```

### Using with Tailwind CSS

The package includes Tailwind CSS theme definitions. After importing, you can use colors in your Tailwind classes:

```html
<div class="bg-gray-1 text-primary-9 border-gray-4">
  Content
</div>
```

### Theme Classes

Apply theme classes to switch between color variants:

```html
<!-- Gray theme -->
<div class="color-gray-gray">
  <!-- Uses gray color palette -->
</div>

<!-- Primary theme (gold) -->
<div class="color-primary-gold">
  <!-- Uses gold color palette -->
</div>
```

## Color System

### Color Scales

Each color palette includes:

- **Base colors**: `--color-{name}-1` through `--color-{name}-12`
- **Light variants**: `--color-{name}-light-1` through `--color-{name}-light-12`
- **Dark variants**: `--color-{name}-dark-1` through `--color-{name}-dark-12`

### Available Color Palettes

- **Gray**: Neutral grayscale palette with light and dark variants
- **Primary**: Brand color palette with multiple color options (e.g., gold) and light/dark variants
npm package: @nattui/tailwind-exact
Description: Precision styling, mapped one to one
Author: Natt Nguyen
Latest version: 0.0.5

# @nattui/tailwind-exact

**Precision styling, mapped one to one**

A Tailwind CSS theme library providing pixel-perfect utility classes with exact, precise spacing and sizing values. Perfect for design systems that require precise control over measurements.

## Features

- 🎯 **Precision styling** - Exact spacing and sizing values mapped one-to-one
- 📏 **Two base scales** - Available in base 10 and base 16 configurations
- 🎨 **Comprehensive utilities** - Container, spacing, text, radius, shadows, blur, and more
- ⚡ **Tailwind v4 compatible** - Built with modern `@theme` syntax
- 📦 **Lightweight** - Import only what you need

## Installation

```bash
npm install @nattui/tailwind-exact
# or
bun add @nattui/tailwind-exact
# or
yarn add @nattui/tailwind-exact
```

## Usage

### Base 10 Scale

```css
@import "@nattui/tailwind-exact";
```

### Base 16 Scale

```css
@import "@nattui/tailwind-exact/styles/16/index.css";
```

### Individual Utilities

Import specific utilities as needed:

```css
@import "@nattui/tailwind-exact/styles/10/spacing.css";
@import "@nattui/tailwind-exact/styles/10/text.css";
@import "@nattui/tailwind-exact/styles/shadow.css";
```

## Available Utilities

### Spacing

Precise spacing values from 0 to 384 (in 0.1rem increments for base 10, or equivalent for base 16).

### Text Sizes

Exact text sizing from 12px to 128px with custom intermediate sizes.

### Radius

Border radius utilities for consistent rounded corners.

### Container

Container sizing utilities for responsive layouts.

### Shadows & Effects

- Drop shadow
- Inset shadow
- Text shadow
- Blur effects
- Perspective dramatic effects

### Typography

- Font weight
- Line height (leading)
- Letter spacing (tracking)

### Layout

- Aspect ratio utilities
- Breakpoint utilities

## Examples

```html
<!-- Spacing -->
<div class="p-10 m-20">Precise padding and margin</div>

<!-- Text -->
<h1 class="text-24">Exact text size</h1>

<!-- Radius -->
<div class="rounded-12">Precise border radius</div>
```

## Version Structure

The library provides two main versions:

- **`styles/10/`** - Base 10 scale (default)
- **`styles/16/`** - Base 16 scale

Each version includes:

- `container.css` - Container utilities
- `radius.css` - Border radius utilities
- `spacing.css` - Spacing utilities
- `text.css` - Text size utilities
- `index.css` - Complete bundle with all utilities