Free to use tagged classnames, powered by clsx and tailwind-merge.
npm install tagged-classnames-freeFree to use tagged classnames, powered by clsx and tailwind-merge.
 
``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-covertext-lg ${moreClassName}
const className = tw`
`json5((?:\\S|\\s)*?)
// .vscode/settings.json
{
'tailwindCSS.experimental.classRegex': [
['tw', "'([^']+)'"],((\\S|\\s)*?)
'tw',((?:\\S|\\s)*?)
['cls', "'([^']+)'"],((\\S|\\s)*?)
'cls',`
],
}
Based on clsx, support inline comment. Free to use _clsx_ supported expressions.
Based on cls, support inline comment. Merge Tailwind CSS classes without style conflicts by tailwind-merge.
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.
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._
- npm run buildnpx changeset
- npx changeset version
- git commit
- npx changeset publish
- git push --follow-tags`
-