TailwindCSS + Alpine.js でモーダルダイアログを作ろう
最近知ったのですが、 TailwindCSS と Alpine.js の組み合わせがなかなか使いやすかったので紹介します。 ソースコードhttps://codesandbox.io/s/fancy-bush-22qyf?file=/index.html 作った手順は次の通りです。 1. TailwindCSS をCDNから読み込む。 headタグ内に次のlinkタグを追加します。 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> 参考： https://tailwindcss.com/docs/installation#using-tailwind-via-cdn 2. Alpine.js をCDNから読み込む。 headタグ内に次のstyleタグを追加します。 <
【Tailwind CSS】@applyでスタイルをまとめてみる - devlog [開発部門ブログ]
はじめに この記事はこういう方にオススメ Tailwind CSSでスタイリングしていて大量のクラスの羅列に「ウッ！」となったことのある方 はじめに Tailwind CSS、便利ですね。初めて目にしたときには多大なカルチャーショックを受けたものですが、HTMLから離れずにスタイリングができる点、CSSファイルが荒れない点はとても便利だなあと感じます。 独特のクラス名も覚えてきてサクサクスタイリングができるようになってきたなぁ……という今日この頃なのですが、同じクラスのツブツブ達を色んな画面にペタペタとコピペしていて思いました。 <button class="rounded-full bg-gradient-to-tr from-orange-300 to-red-600 px-6 py-2 text-base font-bold text-white drop-shadow-lg hov
![【Tailwind CSS】@applyでスタイルをまとめてみる - devlog [開発部門ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb86b7f6c4a7d343c22fcbdd604958fd3b08e73b/height=288;version=1;width=512/https%3A%2F%2Fdevlog.neton.co.jp%2Fwp-content%2Fuploads%2F2022%2F11%2FTailwind-CSS-1.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
