open-index/open-npm huggingface dataset:
npm package: @reallygoodwork/style-to-tailwind
Description: Convert CSS style objects to Tailwind CSS classes.
Latest version: 1.3.1

# @reallygoodwork/style-to-tailwind

Convert CSS style objects to Tailwind CSS classes.

[![npm](https://img.shields.io/npm/v/@reallygoodwork/style-to-tailwind)](https://www.npmjs.com/package/@reallygoodwork/style-to-tailwind)

## Installation

```bash
npm install @reallygoodwork/style-to-tailwind
# or
pnpm add @reallygoodwork/style-to-tailwind
# or
yarn add @reallygoodwork/style-to-tailwind
```

## Overview

This package converts CSS style objects into Tailwind CSS utility classes. It's useful for converting inline styles or style objects to Tailwind's utility-first approach.

## API Reference

### Functions

#### `styleToTailwind(style)`

Converts a CSS style object to Tailwind CSS classes.

```typescript
import { styleToTailwind } from '@reallygoodwork/style-to-tailwind'

// Basic usage
const styles = {
  backgroundColor: '#fafafa',
  paddingBlockStart: 96,
  paddingBlockEnd: 96,
}

const tailwindClasses = styleToTailwind(styles)
// "backgroundColor-#fafafa paddingBlockStart-96 paddingBlockEnd-96"
```

**Parameters:**
- `style: StyleObject` - CSS style object with camelCase property names

**Returns:**
- `string` - Space-separated Tailwind CSS classes

---

### Types

```typescript
type StyleObject = {
  [key: string]: string | number | ColorObject | StyleObject
}

type ColorObject = {
  hex?: string
  rgb?: {
    r: number
    g: number
    b: number
    a: number
  }
  hsl?: {
    h: number
    s: number
    l: number
    a: number
  }
}
```

---

## Example: With Nested Styles

The function handles nested style objects for responsive breakpoints:

```typescript
import { styleToTailwind } from '@reallygoodwork/style-to-tailwind'

const styles = {
  paddingBlockStart: 96,
  paddingBlockEnd: 96,
  sm: {
    paddingBlockStart: 128,
    paddingBlockEnd: 128,
  },
}

const tailwindClasses = styleToTailwind(styles)
```

---

## Example: With Color Objects

Color objects with hex/rgb/hsl values are also supported:

```typescript
import { styleToTailwind } from '@reallygoodwork/style-to-tailwind'

const styles = {
  backgroundColor: {
    hex: '#fafafa',
    rgb: { r: 250, g: 250, b: 250, a: 1 },
    hsl: { h: 0, s: 0, l: 98, a: 1 },
  },
}

const tailwindClasses = styleToTailwind(styles)
```

---

## Related Packages

- [@reallygoodwork/coral-core](https://www.npmjs.com/package/@reallygoodwork/coral-core) - Core Coral types
- [@reallygoodwork/coral-tw2css](https://www.npmjs.com/package/@reallygoodwork/coral-tw2css) - Tailwind to CSS
- [@reallygoodwork/coral-to-react](https://www.npmjs.com/package/@reallygoodwork/coral-to-react) - Coral to React

## License

MIT © [Really Good Work](https://reallygoodwork.com)
npm package: @reallyland/tools
Description: A collection of opinionated tools for the Reallyland projects
Author: Rong Sen Ng
Latest version: 0.9.7

<div align="center" style="text-align: center;">
  <h1 style="border-bottom: none;">@reallyland/tools</h1>

  <p>A collection of opinionated tools for the Reallyland projects</p>
</div>

<hr />

> This repo is used to host a collections of tools to help reduce the maintenance effort in multiple Reallyland projects.

## Table of contents

- [Table of contents](#table-of-contents)
- [Pre-requisites](#pre-requisites)
- [Tools available](#tools-available)
- [License](#license)

## Pre-requisites

- [Node.js][nodejs-url] >= 18.x
- [NPM][npm-url] >= 9.x ([NPM][npm-url] comes with [Node.js][nodejs-url], no separate installation is required.)

## Tools available

- ESLint config for `lit`, `vue`, and generic `TypeScript` projects
- Shell scripts to generate `.editorconfig`, `.gitattributes`, `.gitignore`, and `.npmrc`
- Shell scripts used for CI
- TSConfig (_NOTE: Copied and extended from `@reallyland/tsconfig` as TypeScript failed to resolve `extends` with nested dependencies within `node_modules`_)

## License

[MIT License](https://motss.mit-license.org/) © Rong Sen Ng (motss)

<!-- [MIT License](https://motss.mit-license.org/) © Rong Sen Ng (motss) -->

<!-- Links -->
[home.ts]: /src/home.ts
[sitemap.xml]: /assets/sitemap.xml

<!-- References -->
[typescript-url]: https://github.com/Microsoft/TypeScript
[nodejs-url]: https://nodejs.org
[npm-url]: https://www.npmjs.com
[node-releases-url]: https://nodejs.org/en/download/releases
[vscode-url]: https://code.visualstudio.com/
[vscode-lit-html-url]: https://github.com/mjbvz/vscode-lit-html

<!-- MDN -->
[array-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
[boolean-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[function-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
[map-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
[number-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
[object-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
[promise-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
[regexp-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
[set-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
[string-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String