Hacker News Reader

Comment by meerita | Hacker News Reader

Imagine you need an AI to write some bespoke syntax. This is one of the reasons Tailwind is not good: they wrote unnatural syntax. Functional CSS must have natural syntax https://www.fcss.club/syntax, something you don't need cheatsheets or AIs to work.

View on HN

`color--green:hover` is not a giant (or perhaps any) improvement over `hover:text-green-400`

what is the 400 for?

https://tailwindcss.com/docs/text-color

Any tailwind class can have named colors ("green"), semantic colors "danger" and then you can chose the number of the gradient of that color.

There are thousands of them. Only the ones you use get compiled into the css file.

To have more than one type of green. You can use Tailwind with only one green if you want, too, but it doesn't make any sense (either in Tailwind or in FCSS)

We solve that with color--green, color--light-green, color--lighter-green, color--lightest-green, etc.

Writing the whole css syntax as classes is almost like using the style="" attribute, and comes with an enormous css payload cost

In practice it has a much smaller css payload cost than standard hand-written css classes.

> Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network. - https://tailwindcss.com/docs/optimizing-for-production

What does increase is the html or react payload. But at least it's only sending what you use.

Most websites are sending all of the styling for all of the pages and states, even though the user never sees it. It takes work to optimize that away, and things go wrong often.

There are many clever macros like `space-x-4` that compile to very tricky effects. You couldn't write that in the style attribute at all. https://tailwindcss.com/docs/space#add-horizontal-space-betw...

Yes! I was talking about the fcss framework and syntax proposed by the parent poster ( which doesn't have a "compilation" step for reducing the amount of unnecessary css as tailwind does )

Not really: https://www.fcss.club/why

What? This isn't a syntax generator it's building full components.

They’re making a joke.

Said another way (my interpretation):

Imagine that you need an AI to write the bespoke tailwind syntax for you instead of having it write normal css.

Reply on news.ycombinator.com