[B! tailwindcss] makun2のブックマーク

makun2 id:makun2

tailwindcssに関するmakun2のブックマーク (4)

TailwindCSS + Alpine.js でモーダルダイアログを作ろう
最近知ったのですが、 Tailwind CSS と Alpine.js の組み合わせがなかなか使いやすかったので紹介します。ソースコードhttps://codesandbox.io/s/fancy-bush-22qyf?file=/index.html 作った手順は次の通りです。 1. Tailwind CSS をCDNから読み込む。 headタグ内に次のlinkタグを追加します。 <link href="https://unpkg.com/tailwind css@^2/dist/tailwind.min.css" rel="stylesheet" /> 参考： https://tailwind css.com/docs/installation#using-tailwind-via-cdn 2. Alpine.js をCDNから読み込む。 headタグ内に次のstyleタグを追加します。 <
makun2 2023/02/15
モーダルダイアログの作り方

javascript

tailwindcss

alpinejs
リンク
【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
makun2 2023/02/13
classをまとめる

javascript

tailwindcss
リンク
Tailwind CSS のカラーパレットを拡張する方法 | fwywd（フュード）powered by キカガク
Tailwind CSS には、デフォルトで濃薄含む様々な色が登録されていますが、実際にはデフォルトに存在しない色を使用したいケースも多々あるはずです。
makun2 2023/02/06
カラーパレットの拡張　色の追加方法など

tailwindcss

css
リンク
【Tailwind CSS】おすすめ便利サイト10選
はじめに前回はTailwind CSSとはなにかCDNで使う方法を説明しました。まだの方はこちらを参考にしてください。 Tailwind CSSとはなにか知りたい方、CSSフレームワークに悩んでいる方にCDNを使ってTailwind CSSを使うやり方を説明していきます。Tailwind CSSのメリット・デメリットをまとめているので少しでも気になったら導入していただけると嬉しいです。
makun2 2023/01/13
Tailwind CSSのおすすめサンプルサイトなど

css

tailwindcss
リンク
1