<el style="display:flex;justify-content: start;">...
?* media queries
* @apply
* low specificity (tailwind doesn't do !important)
EDIT: It "does" important, but only when instructed so, in 1.x it was a global switch, apparently since 2.x its available as a per-class modifier. Thanks dcre
* the theming abstraction
* brevity
https://tailwindcss.com/docs/just-in-time-mode#built-in-impo...
https://github.com/tailwindlabs/tailwindcss/releases/tag/v2....
Media queries are a good call out, they're definitely a benefit tailwind's approach has to the built-in browser support for inline styles. Another benefit is hover and focus states, which are very difficult to apply with inline styles.
With tailwind you can do “block md:flex hover:font-bold” and you’ve covered pseudo class cases and media queries very succinctly.
<el class="[display: flex] [justify-content: start]">...
I wish I were being hyperbolic, but alas, no: https://tailwindcss.com/blog/tailwindcss-v3#arbitrary-proper...FWIW, I also hated using header files in C++ and also wrote a Ruby library for inlining all my tests immediately following the functions they test. I like having more context when looking at code without having to flip around from file to file to piece a bigger picture together.
If you haven't tried Vue yet, I strongly recommend it based on what you said.
It seems the biggest advantage most people find in tailwind is working around a react limitation.
Not much different than injecting an object in a `style` attribute in practice, but there's a lot of creative firepower in the arbitrary styles API.
Honestly, I agree with you on the good variable names, but in average team setting I prefer no names than bad ones.
the semantics of most html elements is useless to know for more devs (and classes don't help users)
in fact a class like .red conveys more useful information to a developer than .standout-link because when we go to change the colour of the button it's the colour we care about, not the "purpose" of the button
I'm often in a cycle where I am tweaking a complex class with 10-20 properties including flex, transforms, animations, etc. - and having them each be on their own line (and the class being in a separate file along with its parents, siblings and children, frankly) is key for readability to me.
I guess in the end I have come to have enormous respect for CSS as a powerful, mature language and I'm not looking to be buffered from it.
It can get long. I certainly have parts of my app where I break out into plain CSS because it's easier to understand.
Keeps everything clean and readable!