Tailwind 4.0?

[geniuskrul]

@adamwathan
Coming soon:?

1

• xl:flex => xl(flex)
• xl:hover:bg-white => xl:hover(bg-white)
• xl:hover:bg-white xl:hover:text-gray-700 => xl:hover(bg-white text-gray-700)
• xl:bg-white xl:hover:text-gray-700 => xl(bg-white hover(text-gray-700))

2

• top-4 => t-4
• right-4 => r-4
• bottom-4 => b-4
• left-4 => l-4
• top-4 bottom-4 => y-4
• right-4 left-4 => x-4

3

• inline-block => iblock
• inline-flex => iflex
• inline-grid => igrid

4

• leading-4 => lh-4

5

• min-w-4 => minw:4
• max-w-4 => maxw:4
• Same for height...

6

Better class names for:

• Justify Content
• Justify Items
• Justify Self
• Align Content
• Align Items
• Align Self
• Place Content
• Place Items
• Place Self

7

Add new 2xl(10px) size for Font Size. Maybe 8px too.

8

font-normal => font-regular

I confuse between font-normal and text-base. it's usually called "regular", in font name and etc.

---

The hard opinions part begins😂

x1

Use : in class name to separate property name from it's value, like CSS.

• bg-white => bg:white
• text-gray-700 => text:gray-700

x2

• Justify Content => jc
• Justify Items => ji
• Justify Self => js
• Align Content => ac
• Align Items => ai
• Align Self => as
• Place Content => pc
• Place Items => pi
• Place Self => ps

---

I while ago I wanted to work on the docs website, help to fix some bugs and UX issues, it didn't even took me 30min to hate React and be careless about helping at all😅. It was so buggy and so slow. Sense you guys are working on the new version, can you please build the website with Svelte and SvelteKit? It will be so much easier for you guys to build the website with Svelte, it will be less buggy and it will me much faster, also others be able to read the code and contribute easily.

That's all. Thank you for working so hard on this project❤️, it's very well appreciated🙏

[geniuskrul]

You may want to share your thoughts instead of just downvoting!
@xiBread, @PositiveUser, @xstevenyung

[PositiveUser]

Yes

[PositiveUser]

Although I liked these, maybe you mean to add these classes instead of changing and letting the old code work. I have used Tailwind CSS a lot and if classes are changed, I will have to change many classes. That will be very time consuming. Tailwind CSS uses MIT license. So, you can build your own CSS framework by modifying Tailwind too.

x-4 exists as inset-x-4
y-4 exists as inset-y-4
There is no font-base class

By the way, your post is well formatted.

Thank you very much

[geniuskrul]

Although I liked these, maybe you mean to add these classes instead of changing and letting the old code work.

Maybe they can add an option to be enabled by the user for backward compatibility. (Disabled by default for the new projects/users).

That will be very time consuming.

True, doing compatibility stuff isn't fun at all.

x-4 exists as inset-x-4
y-4 exists as inset-y-4

Just to make it shorter.

font-base

I confused that again😂 I meant text-base.

By the way, your post is well formatted.
Thank you very much

Thank you🌼

[delioribas]

production mode, classes are renamed

[delioribas]

production mode, classes are renamed

[ErwinAI]

What is the benefit of shortening so many class names?

[delioribas]

group classes to a single renamed one, example: (hidden sm:inline-block sm:mt-0 sm:text-xl xl:text-4xl text-white font-bold) to (4764bfgdsh)

[delioribas]

development mode: hidden sm:inline-block sm:mt-0 sm:text-xl xl:text-4xl text-white font-bold
production mode: 4764bfgdsh,

[delioribas]

It would be unreadable for people and would make the project professional.

[InsightfulFuture]

How can they change your html to match the prod class?

[FalkoJoseph]

This is probably already possible if you’re using Vue or React, since the HTML is generated by JavaScript on the fly, and could be minified during a build process.

But other than JS based applications or websites, I don’t see this happening. When using Tailwind in PHP for example, it wouldn’t be able to change the output HTML, unless there was a Tailwind integration for each PHP framework or CMS.

[pujayana]

It seems like bootstrap classes?

[codeflow-lab]

Font Size fs-[size]
The only class i like in bootstrap is fs-13 => font size 13.
If you love this then vote for fs-[size] for tailwindcss

[aggestor]

Maybe not change the names for now, but add them as new classes and remove the old classes in the next versions (mark as deprecated but still do the job) ?

Maybe when rebuilding the project with v4, it changes everything for so you don't have to edit them yourself?

[everton-dgn]

I have some suggestions for utility classes to simplify existing classes and to add new functionalities. In fact, I created the lib eleganceui-tailwind-utilities specifically for this purpose: https://www.npmjs.com/package/eleganceui-tailwind-utilities

Example:

- {/* before */}
- <div className="container mx-auto px-4">
-   <div className="flex w-full flex-row flex-wrap gap-4">
-     <div className="flex size-72 min-h-72 min-w-72 flex-col gap-4 overflow-hidden rounded-xl shadow border-2 border-blue-500">
-       <div className="flex h-32 w-full animate-pulse bg-slate-200" />
-       <div className="gap-4 rounded-lg p-4">
-         <h3 className="truncate text-lg font-bold text-blue-500">
-           Example long title omitted with ellipsis
-         </h3>
-         <hr className="border-0 rounded bg-slate-200 h-px w-full" />
-         <p className="text-sm font-normal text-gray-800">Brief description.</p>
-       </div>
-     </div>
-     {/* ... */}
-   </div>
- </div>
+ {/* after */}
+ <div className="px-4 container-row g-4">
+   <div className="ov-hidden br-xl shadow col g-4 square-72 bw-2-blue-500">
+     <div className="h-32 col-full animate-skeleton" />
+     <div className="br-lg p-4 g-4">
+       <h3 className="ellipsis fs-lg-bold-blue-500">
+         Example long title omitted with ellipsis
+       </h3>
+       <hr className="hr-x" />
+       <p className="fs-sm-normal-gray-800">Brief description.</p>
+     </div>
+   </div>
+   {/* ... */}
+ </div>

• fs-{fontSize}-{fontWeight}-{color}:
  • Before: <div class="text-lg font-bold text-blue-500" />
  • After: <div class="fs-lg-bold-blue-500" />

• gap-x-{suffix} => gx-{suffix}.

  • Before: <div class="gap-x-0" />
  • After: <div class="gx-0" />
  
  

• bw-{borderWidth}-{borderStyle}-{borderColor}:

  • Before: <div class="border-4 border-dashed border-blue-500" />
  • After: <div class="bw-4-dashed-blue-500" />
  
  

• hr-y:

  • Before: <hr class="border-0 rounded-[100px] bg-gray-200 w-px h-full" />

  • After: <hr class="hr-y" />

  • Before: <hr class="border-0 rounded-[100px] bg-blue-500 w-px h-full" />

  • After: <hr class="hr-y-blue-500" />

• backface-{suffix}:

  • <div class="backface-visible" />.
  • <div class="backface-hidden" />.
  
  

• row-full:

  • Before: <div class="flex flex-row w-full" />
  • After: <div class="row-full" />
  
  

• center:

  • Before: <div class="items-center justify-center" />
  • After: <div class="center" />

[davidwebca]

I like some of these ideas, but my main gripe - and how I stumbled onto this in the first place - is that font-normal exists at all. All the other names match what's expected : font-bold, font-medium, etc. But not regular? I need font-regular to exist... I've made this error SO MANY TIMES. 😭

[adamwathan]

We use the names from the OpenType spec:

https://learn.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass

Also font-weight: normal is the vanilla CSS for 400.

[prpanto]

"text-sm font-bold text-center text-wrap text-gray-900" -> text-[s:sm,_a:center,_w:wrap,_c:rgay-900] font-[w:bold] Why not?

[tiarebalbi]

Is there a timeline for when v4 will become GA?

[zoltanszogyenyi]

It's now available to try out in v4-beta:

https://tailwindcss.com/blog/tailwindcss-v4-alpha
https://flowbite.com/blog/tailwind-v4/

[Nefcanto]

I remember that almost 15 years ago I read on Microsoft's documentation this sentence:

Do prefer readability over brevity

I think that counts up to this day, and to be honest, even for thousands of years to come.
When brevity kills readability, we should avoid it. But if it's brief yet still readable, we should go for it.
r-4 is brief, yet readable. So we should use it instead of right-4.
But iblock is not readable. inline-block is more readable and less confusing.