Utilities to parse and create tailwind classnames
yarn add tailwind-utils
or
npm install tailwind-utils
API choice 1:
import { parse, create, Definition } from 'tailwind-utils'
import theme from './tailwind-theme.js'
const definition:Definition = parse(theme, 'md:w-48');
// { responsiveModifier: 'md', property: 'width', prefix: 'w', value: 48 }
const className:string = create(theme, { responsiveModifier: 'md', pseudoModifier: 'hover', property: 'backgroundColor', value: 'red-500' })
// 'md:hover:bg-48'API choice 2:
import { ClassName, Definition } from 'tailwind-utils'
import theme from './tailwind-theme.js'
const { parse, create } = ClassName(theme)
const definition:Definition = parse('md:w-48');
// { responsiveModifier: 'md', property: 'width', prefix: 'w', value: 48 }
const className:string = create({ responsiveModifier: 'md', pseudoModifier: 'hover', property: 'backgroundColor', value: 'red-500' })
// 'md:hover:bg-48'- Set up repo
- Set up typescript
- Set up tests
- Parse theme file
- parse: key-value
- parse: key without value (like
border - parse: value without key (like
block) - parse: responsive modifier
- parse: pseudo modifier
- create: key-value
- create: key without value (like
border - create: value without key (like
block) - create: responsive modifier
- create: pseudo modifier
- Readme
This library will replace the tightly coupled utils - https://github.com/ui-devtools/ui-devtools/blob/main/packages/devtools/src/utils.js