🌶️ Tailwind v4 & Writing classes instead of CSS-in-JS for addComponent + Aliasing classes

[jd-solanki]

Hi 👋🏻

I love to use UnoCSS and Tailwind. However while using tailwind I miss some of the features of the UnoCSS which I would like to highlight which will me working with Tailwind breeze.

Before reading this, I want you to think that Tailwind is not just for Landing pages, It can be used everywhere and even for the sites which highly reuse the components. More accurate example will be using Tailwind for building UI library and what v4 can help improving existing API.

Shortcuts + unocss-transformer-alias

We can replace tailwind's addComponent feature with shortcuts which allows us to write classes rather than writing CSS-in-JS syntax.

Talking about unocss-transformer-alias (coupled with addComponents), It allows use to write semantic classes (e.g. btn, alert) in source code that will get transformed into utility classes.

<!-- You write this -->
<button class="btn" />

<!-- DOM will look like this -->
<button class="py-2 px-4 bg-primary text-white rounded-xl" />

Another question may arise why not use @apply. Let me ask you, Wouldn't be it much convinient to write shortcuts with classes rather than creating seperate CSS file and using @apply there. If you ask lib authors, Using shortcuts will be much easier to integrate in their plugin.

Why

• Shortcuts are better than addComponent, Here's proof.

   addComponents({
       '.btn': {
           padding: '.5rem 1rem',
           borderRadius: '.25rem',
           fontWeight: '600',
       },
       '.btn-blue': {
           backgroundColor: '#3490dc',
           color: '#fff',
           '&:hover': {
           backgroundColor: '#2779bd'
           },
       },
       '.btn-red': {
           backgroundColor: '#e3342f',
           color: '#fff',
           '&:hover': {
           backgroundColor: '#cc1f1a'
           },
       },
   })

   shortcuts: {
       'btn': 'py-2 px4 font-semibold',
       'btn-blue': 'bg-[#3490dc] text-white hover:bg-[#2779bd]',
       'btn-red': 'bg-[#e3342f] text-white hover:bg-[#cc1f1a]',
   }

• Daisy UI uses @apply classes to style components rather than using addComponent and CSS-in-JS.

• Shortcuts are faster to write understand and squzee last drop of convinience from tailwind

• Regarding unocss-transformer-alias, when you just use addComponent it will generate CSS which won't be reusable however when you use unocss-transformer-alias like thing this will reuse the existing utilities and won't impact performance if you are using lots of addComponent.