After a neither long nor short time for developing Next.js + TailwindCSS app, it is so annoyed at writing TailwindCSS classnames more and more big.
A React example:
export const Demo = () => (
<div className='flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6'>
<div className='space-x-2 pb-8 pt-6 md:space-y-5'>
<h1 className='text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14'>
404
</h1>
</div>
<div className='max-w-md'>
<p className='mb-4 text-xl font-bold leading-normal md:text-2xl'>
{`Sorry we couldn't find this page.`}
</p>
<p className='mb-8'>
{`But don't worry, you can find plenty of other things on our homepage.`}
</p>
</div>
</div>
)
Question: How to make the code looks more nicer?
Answer: After use the new born package tagged-classnames-free:
import { cls } from 'tagged-classnames-free'
export const Demo = () => (
<div
className={cls`
flex flex-col items-start justify-start
md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6
`}
>
<div className='space-x-2 pb-8 pt-6 md:space-y-5'>
<h1
className={cls`
text-6xl font-extrabold leading-9 tracking-tight text-gray-900
dark:text-gray-100
md:border-r-2 md:px-6 md:text-8xl md:leading-14
`}
>
404
</h1>
</div>
<div className='max-w-md'>
<p
className={cls`
mb-4 text-xl font-bold leading-normal
md:text-2xl
`}
>
{`Sorry we couldn't find this page.`}
</p>
<p className='mb-8'>
{`But don't worry, you can find plenty of other things on our homepage.`}
</p>
</div>
</div>
)
cls tag based on clsx, and tw tag integrated tailwind-merge already.
Question: How to auto indent/dedent strings in tagged template if I want to wrap/unwrap tagged classnames by functions or html tags?
Answer: ESLint is a awesome tool, eslint-plugin-unicorn has a template-indent rule for us to auto indent/dedent.
It is also compatiable with prettier-plugin-tailwindcss even if write classnames by multiple lines.
Question: What is the impact on runtime performance, especially for what could have been wrote by pure strings?
Answer: There is also a new born unplugin-polish-tagged-templates for this, It can transform tagged templates without expressions into pure strings at compile time.
Try overall features on Gitpod.
Top comments (0)