3 ms·
For fun I tried to make an equivalently bad-faith two-liner with vanilla HTML+CSS that preserves the Tailwind behavior: <div class="custom-box"><div class="hea
by cle 3y ago
For fun I tried to make an equivalently bad-faith two-liner with vanilla HTML+CSS that preserves the Tailwind behavior:
<div class="custom-box"><div class="header"><div class="tab">app.css</div><div class="header-expand"></div></div><div class="content"><pre><code>@import "tailwindcss";</code></pre></div></div>
.custom-box {margin-top: 1.25rem; margin-bottom: 2rem; position: relative; overflow: hidden; border-radius: 0.5rem;}.custom-box:first-child {margin-top: 0;}.custom-box:last-child {margin-bottom: 0;}.header {padding-top: 0.5rem; background-color: #1E293B; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); display: flex; color: #94A3B8; font-size: 0.75rem; line-height: 1.5;}.tab {flex: none; color: #0EA5E9; border-top: transparent; border-bottom: 2px solid #0EA5E9; padding: 0.25rem 1rem; display: flex; align-items: center;}.header-expand {flex-grow: 1; background-color: #334155/50; border: 1px solid rgba(156, 163, 175, 0.3); border-radius: 0.375rem 0 0 0;}.content pre, .content code {margin: 0; background: none; box-shadow: none;}@media (prefers-color-scheme: dark) {.custom-box::after {box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);}.header {background-color: #334155;}.tab {color: #bfdbfe;}.header-expand {background-color: #475569; border-color: rgba(255, 255, 255, 0.2);}}@media (min-width: 640px) {.custom-box {margin-top: 1.5rem; margin-bottom: 2.5rem;}.header {padding-top: 0.75rem;}.tab, .header-expand {padding: 0.5rem 1.25rem;}.content pre, .content code {font-size: 0.875rem;}}@media (min-width: 768px) {.custom-box {margin-top: 2rem; margin-bottom: 3rem;}.header {padding-top: 1rem;}.tab, .header-expand {padding: 0.75rem 1.5rem;}.content pre, .content code {font-size: 1rem;}}@media (min-width: 1024px) {.custom-box {margin-top: 2.5rem; margin-bottom: 3.5rem;}.header {padding-top: 1.25rem;}.tab, .header-expand {padding: 1rem 1.75rem;}.content pre, .content code {font-size: 1.125rem;}}@media (min-width: 1280px) {.custom-box {margin-top: 3rem; margin-bottom: 4rem;}.header {padding-top: 1.5rem;}.tab, .header-expand {padding: 1.25rem 2rem;}.content pre, .content code {font-size: 1.25rem;}}@media (min-width: 1536px) {.custom-box {margin-top: 3.5rem; margin-bottom: 4.5rem;}.header {padding-top: 1.75rem;}.tab, .header-expand {padding: 1.5rem 2.25rem;}.content pre, .content code {font-size: 1.375rem;}}.content > * {margin:0; box-shadow: none; background: transparent;}
(this probably an incomplete/buggy/incorrect port of Tailwind behavior)
- mm263 3y agoOh no! This is unreadable and unmaintainable.
- scotty79 3y agoI'll take this version over tailwind anytime. It's one auto-formatting step from being perfectly readable for someone who knows css and styles tell me how it looks like and css classes tells me WHAT IT IS. And information (nearly?) completely missing from tailwind counterpart. I can also easily see what structure the DOM has.
- waterTanuki 3y ago> ...tells me WHAT IT IS. Tailwind is a styling library, not label system. You want to know what something is? use the id attribute, it's not rocket science > I can also easily see what structure the DOM has. Really? Because even in the cherry-picked half-assed example above I can more easily read the DOM structure than whatever this is.
- scotty79 3y ago> Tailwind is a styling library, not label system. So what is it doing in my html tags? It's not a place for styling since css was invented. > ... than whatever this is. Whatever this is? These are 7 html tags and I can see how nested they are in 10 seconds even without autoformatting. <div class="custom-box"><div class="header"><div class="tab">app.css</div><div class="header-expand"></div></div><div class="content"><pre><code>@import "tailwindcss";</code></pre></div></div> In tailwind example you need more than 30 seconds to even count them.