tailwind-utils

KO | EN

gitlite — search

#hacktoberfest #react #go #golang #machine-learning #linux #docker #java #windows #awesome #cli #security #ios #mcp

(★ 18)

Utilities to parse and create tailwindcss classes

tailwind-utils 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<img src="https://avatars2.githubusercontent.com/u/71650913?s=200&v=4" height="50px"/>
 
 Utilities to parse and create tailwindcss classnames
 
 <img src="https://github.com/ui-devtools/tailwind-utils/actions/workflows/test.yml/badge.svg"/>
 
 Extracted from the source code for <a href="https://www.ui-devtools.com">UI Devtools</a> and optimised for open source.

&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)

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);
```

classname → definition:

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

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

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

tailwind-utils

tailwind-utils 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

tailwind-utils

tailwind-utils 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README