# @ui-devtools/tailwind-utils

> Utilities to parse and create tailwindcss class names

Latest version **0.0.2** (published 2022-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ui-devtools/tailwind-utils
pnpm add @ui-devtools/tailwind-utils
yarn add @ui-devtools/tailwind-utils
bun add @ui-devtools/tailwind-utils
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-11-14 |
| First published | 2022-11-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | siddharthkp |
| Maintainers | siddharthkp |
| Keywords | tailwindcss, parser, utils |

## Links

- npm: https://www.npmjs.com/package/@ui-devtools/tailwind-utils
- Repository: https://github.com/ui-devtools/tailwind-utils
- Homepage: https://github.com/ui-devtools/tailwind-utils#readme
- Issues: https://github.com/ui-devtools/tailwind-utils/issues
- npm.io page: https://npm.io/package/@ui-devtools/tailwind-utils

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2022-11-14
- 0.0.2-alpha.2 — 2022-11-11
- 0.0.2-alpha.1 — 2022-11-11
- 0.0.1 — 2022-11-11

## README

<p align="center">
  <img src="https://avatars2.githubusercontent.com/u/71650913?s=200&v=4" height="50px"/>
  <br><br>
  <b>Utilities to parse and create tailwind classnames</b>
  <br><br/>
  <img src="https://github.com/ui-devtools/tailwind-utils/actions/workflows/test.yml/badge.svg"/>
</p>

&nbsp;

### Installation

```
yarn add @ui-devtools/tailwind-utils

or

npm install @ui-devtools/tailwind-utils
```

&nbsp;

### Usage

[Open demo in codesandbox](https://codesandbox.io/s/tailwind-utils-m0lvu5?expanddevtools=1)

<br/>

Setup:

```ts
import Utils from '@ui-devtools/tailwind-utils';
import config from './tailwind.config.js'; // your tailwind config file, optional

const { parse, classname } = Utils(config);
```

<br/>

classname → definition:

```ts
const definition = parse('w-48');
// { prefix: 'w', property: 'width', value: '12rem' }

const definition = parse('md:hover:bg-red-200/50');
// { responsiveModifier: 'md', pseudoModifier: 'hover', property: 'backgroundColor' value: '#fecaca80' }

```
<br/>

definition → classname:

```ts
const { className } = classname({ property: 'margin', value: '-16rem' });
// -m-64

const { className } = classname({
  responsiveModifier: 'md',
  pseudoModifier: 'hover',
  property: 'backgroundColor',
  value: '#fecaca80'
});
// md:hover:bg-red-200/50

const { className, error } = classname({
  responsiveModifier: 'small',
  property: 'textColor',
  value: '#fecaca80'
});
/*
{
  error: {
    responsiveModifier: 'Unidentified responsive modifier, expected one of [sm, md, lg, xl, 2xl], got small'
  }
}
*/
```

&nbsp;

#### like it?

:star: this repo

&nbsp;

#### license

MIT © [siddharthkp](https://github.com/siddharthkp)

---
_Source: https://npm.io/package/@ui-devtools/tailwind-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._