tagged-classnames-free

Free to use tagged classnames, powered by clsx and tailwind-merge.

 

Usage

``tsx
import { cls, tw } from 'tagged-classnames-free'

const className = twmx-auto max-w-4xl
const className = cls
w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto
object-cover

const className = twtext-lg ${moreClassName}
`

VS Code Integration

`json5
// .vscode/settings.json
{
'tailwindCSS.experimental.classRegex': [
['tw((?:\\S|\\s)*?)', "'([^']+)'"],
'tw((\\S|\\s)*?)',
['cls((?:\\S|\\s)*?)', "'([^']+)'"],
'cls((\\S|\\s)*?)',
],
}
`

Functions

$3

Based on clsx, support inline comment. Free to use _clsx_ supported expressions.

$3

Based on cls, support inline comment. Merge Tailwind CSS classes without style conflicts by tailwind-merge.

Furthermore

$3

Wrap/unwrap tagged classnames by functions or html tags at sometime is unavoidable, you must NOT want to indent/dedent manually.

Luckily, eslint-plugin-unicorn has a template-indent rule for us to auto indent/dedent.

$3

You might also worried about the package increase extra burdens to runtime performance? Don't worry. there is a plugin unplugin-polish-tagged-templates to optimize for you.

After enhanced by unplugin-polish-tagged-templates, feel free to use cls and tw tags.

> _Try overall features on Gitpod._

Build & Publish

- npm run build
- npx changeset
- npx changeset version
- git commit
- npx changeset publish
- git push --follow-tags`

> _changeset_ prerelease doc

License

MIT License © 2023 Yuns