[idea] alternative syntax to tailwind

thought.md

semantic approach

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

tailwind proposal

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Actually there are a lot of compositions, and it kind of nice, but add extra layer of mentality

Idea is nice, just there is no need to persue the shortness of classnames I believe

functional proposal

Problem is that we stick to HTML syntax too much, let's forget about web

div(
  div(
    img()
      .src('/img/logo.svg')
      .alt('ChitChat Logo')
      .height(Height.12)
      .width(Width.12)
  ).flexShrink(0),
  div(
    div('ChitChat')
      .text(Text.xl)
      .font(Font.medium)
      .textColor(TextColor.black),
     p('You have a new message!')
      .textColor(Text.gray.500)
  )
).fontSize(Fontsize.6)
.maxWidth(MaxWidth.sm)
.marginX(Margin.auto)
.borderRadius(BorderRadius.xl)
.shadow(Shadow.md)
.display('flex')
.justifyItems('center')
.childrenSpace(4)

There needs to be perfect design for styling grouping.

Also functional approch might be more natural when meeting pseudo class, or pseudo element.

consider the case below

<button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white...">
  Hover me
</button>

why not just

button('Hover me')
  .bg(Background.transparent)
  .textColor(Text.Blue.700)
  .hover((el) => el.bg(Background.Blue.500).textColor(Text.White))

or with some global like $

button('Hover me')
  .bg(Background.transparent)
  .textColor(Text.Blue.700)
  .hover($.bg(Background.Blue.500).textColor(Text.White))

or with some conditions like styled compoenent does

button('Hover me')
  .bg((state) => state.hovered ? Background.Blue.500: Background.transparent)
  .textColor((state) => state.hovered? Text.White : Text.Blue.700)

Consider the pseudo element

<div
  class="relative
    before:aspect-ratio-4/3
    hover:before:aspect-ratio-1/1
    before:empty-content"
>
  <img class="absolute pin w-full h-full" src="..." />
</div>

<p
  class="text-lg text-blue-600 content-before content-after content-hover-before"
  tw-content-before="🧡"
  tw-content-hover-before="💖"
  tw-content-after="💙️"
>
  Tailwind CSS
</p>

what about

div(
  img().position('absolute')
    .pin()
    .width('full')
    .height('full')
    .src('...')
)
  .position('relative')
  .before($.aspectRatio(4/3))
  .hover($.before($.aspectRatio(1))
  .before($.emptyContent()
  
p('Tailwind CSS')
  .textSize('lg')
  .textBlue('600')
  .before('🧡')
  .hover($.before('💖')
  .after('💙️')

Or just abandon pseudo element elements or pseudo classes

Swift UI or Flutter doesn't have these stuff. They can be done by keeping a state.

Reference of Swift UI

https://developer.apple.com/documentation/swiftui/views-and-controls

Take button as an example

https://developer.apple.com/documentation/swiftui/button

HStack {
    Button("Sign In", action: signIn)
    Button("Register", action: register)
}
.buttonStyle(BorderedButtonStyle())

Provide common style settings, and full control in buttonStyle

Concern

1. readability: more verbose than tailwind, but more readable I think
2. performance: developers only care about the source code, during build phase, it could be parsed and transformed to any fashion, or even tailwind is fine, so not getting any worse
3. scalability: the syntax are all javascript, easy to scale
4. system design: this could be forced by types or lint I believe
5. why not just inline style?: we don't need to care for the web tech, so no inline style, no jsx.