DEV Community

Yuns
Yuns

Posted on • Edited on

A fullstack solution for structuring TailwindCSS classnames

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> )
Enter fullscreen mode Exit fullscreen mode

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> )
Enter fullscreen mode Exit fullscreen mode

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)