tagged-classnames-free
v0.1.1
Published
Free to use tagged classnames, powered by clsx and tailwind-merge.
Downloads
420
Maintainers
Readme
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