shakedown.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A community for live music fans with roots in the jam scene. Shakedown Social is run by a team of volunteers (led by @clifff and @sethadam1) and funded by donations.

Administered by:

Server stats:

267
active users

#tailwind

0 posts0 participants0 posts today
Alvaro Montoro<p>New comiCSS cartoon: Benefits of Using Tailwind<br><a href="https://comicss.art/comics/193/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">comicss.art/comics/193/</span><span class="invisible"></span></a></p><p><a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://front-end.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://front-end.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwind</span></a></p>
adamghill<p>Colophon for <a href="https://beesocial.dev" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">beesocial.dev</span><span class="invisible"></span></a> for anyone interested: <a href="https://beesocial.dev/colophon" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">beesocial.dev/colophon</span><span class="invisible"></span></a>.</p><p>No vibe coding, just good vibes.</p><p><a href="https://indieweb.social/tags/Django" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Django</span></a> <a href="https://indieweb.social/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tailwind</span></a> <a href="https://indieweb.social/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TailwindCSS</span></a> <a href="https://indieweb.social/tags/HTMX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTMX</span></a> <a href="https://indieweb.social/tags/SQLite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SQLite</span></a> <a href="https://indieweb.social/tags/Python" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Python</span></a></p>
dansup<p>Pixelfed + modern design = 🔥</p><p>Coming soon to a :pixelfed: instance near you 🚀</p><p><a href="https://mastodon.social/tags/pixelfed" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>pixelfed</span></a> <a href="https://mastodon.social/tags/metroUI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>metroUI</span></a> <a href="https://mastodon.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwind</span></a></p>
WikiMusic Project<p>The WikiMusic project proudly announces the v0.5.2 release 🎵 </p><p><a href="https://codeberg.org/jjba23/wikimusic" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codeberg.org/jjba23/wikimusic</span><span class="invisible"></span></a></p><p>the <a href="https://mastodon.social/tags/foss" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>foss</span></a> <a href="https://mastodon.social/tags/music" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>music</span></a> <a href="https://mastodon.social/tags/knowledge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>knowledge</span></a> <a href="https://mastodon.social/tags/encyclopaedia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>encyclopaedia</span></a> </p><p>We now have auto <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scroll</span></a> for music <a href="https://mastodon.social/tags/tabs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tabs</span></a>, in an efficient and smooth way and many UI improvements (this will be great for <a href="https://mastodon.social/tags/musicians" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>musicians</span></a> that want to perform live with the support of <a href="https://mastodon.social/tags/wikimusic" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wikimusic</span></a>)</p><p>powered by <a href="https://mastodon.social/tags/guile" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>guile</span></a> <a href="https://mastodon.social/tags/scheme" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scheme</span></a> <a href="https://mastodon.social/tags/artanis" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>artanis</span></a> <a href="https://mastodon.social/tags/lisp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>lisp</span></a> <a href="https://mastodon.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwind</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/hygguile" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hygguile</span></a> <a href="https://mastodon.social/tags/sqlite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>sqlite</span></a> <a href="https://mastodon.social/tags/guix" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>guix</span></a> <a href="https://mastodon.social/tags/selfhosting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>selfhosting</span></a> </p><p>visit my instance at: <a href="https://wikimusic.jointhefreeworld.org/songs" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">wikimusic.jointhefreeworld.org</span><span class="invisible">/songs</span></a></p>
skribe 🇺🇦 :verified_mustard:<p>Not really liking TailwindCSS. Seems to be a backwards step, undermining the purpose of CSS (separating styles from HTML). Perhaps I'm missing something. Early days.</p><p><a href="https://aus.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://aus.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://aus.social/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tailwind</span></a></p>
WikiMusic Project<p>v0.3.7 release - <a href="https://mastodon.social/tags/wikimusic" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wikimusic</span></a></p><p><a href="https://codeberg.org/jjba23/wikimusic" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codeberg.org/jjba23/wikimusic</span><span class="invisible"></span></a></p><p>the <a href="https://mastodon.social/tags/foss" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>foss</span></a> <a href="https://mastodon.social/tags/music" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>music</span></a> <a href="https://mastodon.social/tags/knowledge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>knowledge</span></a> <a href="https://mastodon.social/tags/encyclopaedia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>encyclopaedia</span></a></p><p>we now support connections between songs - artists - genres, also PDF music sheet support, dark mode, and much more (even more to come)</p><p>powered by <a href="https://mastodon.social/tags/guile" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>guile</span></a> <a href="https://mastodon.social/tags/scheme" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scheme</span></a> <a href="https://mastodon.social/tags/artanis" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>artanis</span></a> <a href="https://mastodon.social/tags/lisp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>lisp</span></a> <a href="https://mastodon.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwind</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/hygguile" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hygguile</span></a> <a href="https://mastodon.social/tags/sqlite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>sqlite</span></a></p><p>visit my instance at : <a href="https://wikimusic.jointhefreeworld.org" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">wikimusic.jointhefreeworld.org</span><span class="invisible"></span></a></p>
adamghill<p>Did you know that the <a href="https://indieweb.social/tags/Django" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Django</span></a> admin can be themed?! 🤯 </p><p>Here are 10 packages for the Django admin which can transform it with a Dracula theme, <a href="https://indieweb.social/tags/Bootstrap" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Bootstrap</span></a> <a href="https://indieweb.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a>, <a href="https://indieweb.social/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tailwind</span></a>, and more!</p><p>Jazz up your Django admin today! 🎷</p><p><a href="https://www.djangoproject.com/weblog/2025/apr/18/admin-theme-roundup/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">djangoproject.com/weblog/2025/</span><span class="invisible">apr/18/admin-theme-roundup/</span></a></p>
mmcm<p>Petite mis-à-jour du tableau de borde "mon département" pour le baromètre vélo.<br>L'entête a changé un peu, et affiche désormais le total des réponses dans le département (ou le préfixe choisi en tout cas)<br>Merci aux utilisateur·ice·s pour les retours, ça fait du bien! 😊</p><p><a href="https://barometre.toulon-var-deplacements.fr" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">barometre.toulon-var-deplaceme</span><span class="invisible">nts.fr</span></a></p><p><a href="https://github.com/black-puppydog/barometre-dashboard" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/black-puppydog/baro</span><span class="invisible">metre-dashboard</span></a></p><p><a href="https://mastodon.social/tags/rustlang" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rustlang</span></a> <a href="https://mastodon.social/tags/dioxus" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dioxus</span></a> <a href="https://mastodon.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwind</span></a> <a href="https://mastodon.social/tags/var" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>var</span></a> <a href="https://mastodon.social/tags/toulon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>toulon</span></a> <a href="https://mastodon.social/tags/france" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>france</span></a> <a href="https://mastodon.social/tags/barom%C3%A8treV%C3%A9lo2025" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>baromètreVélo2025</span></a> <a href="https://mastodon.social/tags/v%C3%A9lo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vélo</span></a> <a href="https://mastodon.social/tags/fub" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fub</span></a> <br>/cc <span class="h-card" translate="no"><a href="https://masto.bike/@fub" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>fub</span></a></span> <span class="h-card" translate="no"><a href="https://masto.bike/@tvd" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>tvd</span></a></span></p>
GENKI<p>ライトモードとダークモードの切り替えはやっぱり <a href="https://social.vivaldi.net/tags/OpenProps" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenProps</span></a> みたいに CSS 変数でやるべきだな</p><p><a href="https://social.vivaldi.net/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tailwind</span></a> が html タグに dark ってタグとか付けさせようとしててちょっとげんなりしている<br>まあマニュアル切り替えみたいなことするならそういうのもあるとは思うけど、なんかやっぱり Tailwind は CSS 知ってると遠回りでしかないように感じる</p><p><a href="https://tailwindcss.com/docs/dark-mode" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">tailwindcss.com/docs/dark-mode</span><span class="invisible"></span></a></p>
GENKI<p><a href="https://social.vivaldi.net/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tailwind</span></a> は設定周りを <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 関数化して大分 JS から <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 的なアプローチに変わった感があるけど、CSS 変数はそういう設定周りだけじゃなくてスタイリングの定義にガツガツ使ってはじめて効果が実感できるみたいな感覚もあり、「そこまで CSS 的なアプローチするならそもそも Tailwind 使わなくてよくない?」という気持ちがある。scoped なスタイル書く方法は色々あるわけだし、特に色周りなんかはカラーパレットを段階的に用意するのはもうナンセンスというか、主だった元カラーだけを用意して末端のスタイルでそれらを color-mix() とか color() とかで合成するほうが理にかなってる気がしてきている</p>
Thure<p>v1.0.0 of @ch-ui/tokens is out! My sweet bébé!</p><p>Been vetting this in production for a while and I think it’s ready for prime-time.</p><p>Use it to set up font ramps, color palettes, spacings, any set of tokens you want to use in a design system. Can be used with <a href="https://hci.social/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tailwind</span></a> (@ch-ui/tailwind-tokens) and <a href="https://hci.social/tags/Vite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Vite</span></a> (@ch-ui/vite-plugin-tokens). It’s Just <a href="https://hci.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a>™.</p><p>Explainer here: <a href="https://ch-ui.dev/tokens" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ch-ui.dev/tokens</span><span class="invisible"></span></a></p>
GENKI<p>こういう <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 情報発信していたりすると、そりゃあ <a href="https://social.vivaldi.net/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TailwindCSS</span></a> を皮肉りたくなるよなあ(自分もついそうなりがちなので</p><p><a href="https://front-end.social/@css/113639211038637549" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">front-end.social/@css/11363921</span><span class="invisible">1038637549</span></a></p><p><a href="https://social.vivaldi.net/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TailwindCSS</span></a> <a href="https://social.vivaldi.net/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tailwind</span></a></p>
GENKI<p><a href="https://social.vivaldi.net/tags/StateOfCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>StateOfCSS</span></a> 2024 が出てたので見てる</p><p><a href="https://2024.stateofcss.com/en-US/usage/#css_pain_points" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">2024.stateofcss.com/en-US/usag</span><span class="invisible">e/#css_pain_points</span></a></p><p>CSS の Pain Points (つらいところ)の2位が <a href="https://social.vivaldi.net/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TailwindCSS</span></a> なのちょっと面白いな。まあ言っても全体の 5% だけど。<br>一番使われてるライブラリも <a href="https://social.vivaldi.net/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tailwind</span></a> だったので必然的に否定的な声も母数がちょっと多くなってるんだろうな</p>
🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸<p><span class="h-card" translate="no"><a href="https://linuxrocks.online/@haircode" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>haircode</span></a></span> <a href="https://mastodon.social/tags/typescript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typescript</span></a> <a href="https://mastodon.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwind</span></a> <a href="https://mastodon.social/tags/reactRouter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>reactRouter</span></a> <a href="https://mastodon.social/tags/docker" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>docker</span></a> <a href="https://mastodon.social/tags/graphql" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>graphql</span></a> <a href="https://mastodon.social/tags/java" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>java</span></a> <a href="https://mastodon.social/tags/nix" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>nix</span></a> <a href="https://mastodon.social/tags/vim" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vim</span></a> <a href="https://mastodon.social/tags/mac" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mac</span></a> <a href="https://mastodon.social/tags/ios" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ios</span></a> <a href="https://mastodon.social/tags/iphone" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>iphone</span></a> <a href="https://mastodon.social/tags/express" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>express</span></a> <a href="https://mastodon.social/tags/gcp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gcp</span></a> <a href="https://mastodon.social/tags/reactNative" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>reactNative</span></a> <a href="https://mastodon.social/tags/nativeApps" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>nativeApps</span></a> <a href="https://mastodon.social/tags/appStore" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>appStore</span></a> <a href="https://mastodon.social/tags/apple" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>apple</span></a> <a href="https://mastodon.social/tags/aapl" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>aapl</span></a> <a href="https://mastodon.social/tags/htmx" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.social/tags/vercel" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vercel</span></a> <a href="https://mastodon.social/tags/netlify" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>netlify</span></a> <a href="https://mastodon.social/tags/heroku" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>heroku</span></a> <a href="https://mastodon.social/tags/nevernester" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>nevernester</span></a> <a href="https://mastodon.social/tags/10xDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>10xDev</span></a> <a href="https://mastodon.social/tags/10xdevelopers" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>10xdevelopers</span></a> <a href="https://mastodon.social/tags/codeReview" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>codeReview</span></a> <a href="https://mastodon.social/tags/pairProgramming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>pairProgramming</span></a> <a href="https://mastodon.social/tags/oop" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>oop</span></a> <a href="https://mastodon.social/tags/earlyReturns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>earlyReturns</span></a> <a href="https://mastodon.social/tags/guardClauses" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>guardClauses</span></a> <a href="https://mastodon.social/tags/flutter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>flutter</span></a> <a href="https://mastodon.social/tags/angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>angular</span></a> <a href="https://mastodon.social/tags/neverNesting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>neverNesting</span></a> <a href="https://mastodon.social/tags/unitTest" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>unitTest</span></a> <a href="https://mastodon.social/tags/unitTesting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>unitTesting</span></a> <a href="https://mastodon.social/tags/cssFrameworks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFrameworks</span></a> <a href="https://mastodon.social/tags/jest" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>jest</span></a> <a href="https://mastodon.social/tags/jetbrains" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>jetbrains</span></a> <a href="https://mastodon.social/tags/neoVim" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>neoVim</span></a> <a href="https://mastodon.social/tags/wordpress" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wordpress</span></a> <a href="https://mastodon.social/tags/SQL" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SQL</span></a> <a href="https://mastodon.social/tags/postgresql" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>postgresql</span></a> <a href="https://mastodon.social/tags/rdbms" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rdbms</span></a> <a href="https://mastodon.social/tags/rubyOnRails" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rubyOnRails</span></a></p>

Rubyists! I just shipped a new gem, tailwindcss-ruby

github.com/flavorjones/tailwin

This is extracted from tailwindcss-rails, and once I ship an update to that gem, the Rails integration will be decoupled from the upstream executable (in expectation of tailwind v4!) and people can choose their version of tailwind (including the v4 alphas).

GitHubGitHub - flavorjones/tailwindcss-ruby: A self-contained `tailwindcss` executable, wrapped up in a ruby gem.A self-contained `tailwindcss` executable, wrapped up in a ruby gem. - flavorjones/tailwindcss-ruby

It occurs to me, while checking into a flight, that another reason why Tailwind-style CSS names are annoying is because there's nothing for password managers to grab onto. I could have had my passport info auto-populated, but noooooo because Jonty the fucking web dev doesn’t want to learn CSS.

Beginning to think that what I hate most about Tailwind is the religious zeal with which its fans tell you how wrong you are whenever you say you hate it. FFS I was building websites before you lot were even born. U know what I’m talking about. #tailwind #css #webdev

#Tailwind にずっと馴染めていない勢なので、とても興味深く読んだ。

fuku.day/blog/2024-08-10-tailw

『「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは』というタイトルにもある見解は、自分も読んで「確かに」と思った。

そのうえで、なんで自分は #tailwindcss に馴染めないのか、という理由についても考えてみた。

自分は結局のところ #CSS が書きたいんだと思う。

自分がおもう #Tailwind の意義って「フロントのコードでコンポーネント管理できる時代に #CSS のレイヤーでもコンポーネントを管理するの無駄じゃない?」っていうことだと思っていて、自分自身、馴染めてはいないまでもその発想には結構同意もしてる。

ただ、結局自分は #CSS が好きで #CSS が書きたい。ブラウザーの表現力を直接的に呼び出してそれを応用している感じが好きだし、今もどんどん新しい仕様がブラウザー側にも実装されている機能を、.css という拡張子の、つまるところただのテキストファイルを書くだけで使えるのは、#AI にプロンプトを投げて画像を生成するよりも自分にとっては楽しい。

だから、#Tailwind が便利なことも、いまのコンポーネントベースで UI を構築するフロントエンド事情にマッチしてるのもわかるけど、
やっぱりブラウザーの表現力と #CSS というレイヤーの間に一枚、別のレイヤーを発明するというやり方がどうしても馴染めないんだと思う。

ということを、考えながら楽しく拝読しました。勉強にもなったし、また思い出して読むかもしれないなとおもった :tony_normal:

fuku.day「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っているTailwind CSSは特異なコードベースの見た目から負債になりそうとたまに言われるが、俺はあんまりそう思っていないので説明したい。