Tailwind CSS の hover: を、非活性な要素やタッチ操作に適用させない ～ addVariant の活用
背景 以前公開した記事で、単純な :hover セレクタの問題点を書きました。 詳しくは上記の記事に書いていますが、要約すると問題は大きく以下の 2 点です。 スマホなどのタッチデバイスでもホバースタイルが適用されてしまう disabled 状態の button など、クリックしても反応しない要素にもホバースタイルが適用されてしまう これらの問題が次のようなメディアクエリと疑似クラスを組み合わせたスタイル記述によって解決できることを紹介しました。 @media (hover: hover) { .class:where(:any-link, :enabled, summary):hover { /* ホバースタイル */ } } 今回はこれを Tailwind CSS で実現するには？ という記事です。 確認した環境 Tailwind CSS v3.4.1 Tailwind CSS におけ
Tailwind CSS の一歩進んだ書き方
-## CSS カスタムプロパティ +## CSS カスタムプロパティの宣言 +## CSS カスタムプロパティの利用 + +```html:html +<h1 class="px-[--gutter]"> + Hello world! +</h1> +``` + +`px-[var(--gutter)]` のように記述することもできますが、`var()` は省略可能です。 -<h1 class="text-[length:var(--title-size)] text-[color:var(--title-color)]"> +<h1 class="text-[length:--title-size] text-[color:--title-color]"> +## フォントサイズと一緒に行の高さを指定するショートハンド + +```html:html +<h1 class="text-
Tailwind CSSのhasクラスについて解説 - Qiita
はじめに Tailwind CSS v3.4より、:has()疑似クラスが使用できるようになりました。 今回は追加された3つのクラスの紹介と、それぞれをCSSとTailwind CSSの両者で書いてみたいと思います。 :has()疑似クラスとは :has() は CSS の疑似クラス関数で、引数として渡される相対セレクターのいずれかが、 その要素から辿ってアンカーとして少なくとも一つの要素とマッチする場合に、その要素を表します。 この疑似クラスは、相対セレクターリストを引数として取ることで、参照している要素に関して親要素や前の兄弟要素を選択する方法を提供します。 CSSでの使用方法 以下の指定で、子要素にchildクラスを持っているparentクラスの要素だけ対象になります。 <div class="parent"> <div class="baby"></div> </div> <div
Tailwind CSS を使う時に一緒に入れたいライブラリ
Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
Tailwind CSS Templates - Tailwind UI
By the makers of Tailwind CSSModern website templates, crafted with Tailwind CSS. Visually-stunning, easy to customize site templates built with React and Next.js. The perfect starting point for your next project and the ultimate resource for learning how experts build real websites with Tailwind CSS.
【コピペするだけ】Tailwind CSSで開発するときに便利なテンプレートまとめ
皆さんこんにちは。めんどいので、記事書くのもコード書くのもサボってたSandyマンです。 いきなりですが、Webアプリやサイトを作るときに「CSS書きたくない...。」と思ってる人、いませんか？はい私でーす 今回は、そんな人のために！（自分のために）Tailwind CSSで開発するときに便利なテンプレートが載ってるサイトをまとめていきたいと思います。オープンソースのものを集めてきたので、いろいろ使えると思います。それではやっていきましょう！！！ Kometa UI Kit なんか変な名前ですが、いろいろなコンポーネントがあり、結構便利です。いい感じなヘッダーなどがあります。オープンソースではないですが、商用利用可能らしいです。（要確認）おすすめです！ Tailblocks これもさっきと同じような感じですね。ですが、さっきのやつよりもデザインがシンプルな感じです。カスタマイズしやすくてい
TailwindCSSのレスポンシブデザイン - Qiita
背景と実施したこと TailwindCSSを使用してPCレイアウトのWebサイトのレスポンシブ対応を実装しました。 今回は静的コンテンツの配置を横並びから縦並びに変えるという内容のみ実施しています。 CSSは少し苦手意識があったのですが、TailwindCSSを使うとかなりローコストかつシンプルに記述できたので そのノウハウを主に初心者の方向けに記述していきたいと思います。 目次 概要 前提とやりたいことの整理 考え方の整理 実際のコード例 補足とまとめ 概要 TailwindCSSを使ったレスポンシブ対応の実際のコード例と考え方を初心者向けに記載するよ。 画面表示上、横並びだったものをスマホレイアウトにすると縦並びにする、という例で説明するよ。 メディアクエリの使い方とはもちろんだけど、HTMLタグの記載の順番を意識することがポイントだよ。 前提とやりたいことの整理 【前提】 + Tai
Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ | gihyo.jp
Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ CSSフレームワークのTailwind CSSが注目を集めています。その特徴は、flex、pt-4、text-centerといったユーティリティクラスの組み合わせだけで、ほとんどすべてのスタイリングをしてしまおうという大胆なアプローチです。これまでのベストプラクティスと真っ向から対立するようなやり方ですが、だからこそ享受できるいくつもの強みがあります。本特集では、そうしたTailwind CSSの考え方や、具体的な使い方について紹介します。 お知らせ：本特集のサンプルコードは、GitHubの筆者リポジトリからダウンロードできます。https://github.com/yuheiy/wdpress133_
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwind CSS で作られた UI Library あれこれ
『Tailwind CSS実践入門』 出版記念基調講演