tagged-classnames-free

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

Usage

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

const className = tw`mx-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 = tw`text-lg ${moreClassName}`

VS Code Integration

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

Functions

`cls`

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

`tw`

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

Furthermore

Developer eXperience

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.

Runtime performance

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