Tailwind CSS

tailwind.config.jsの設定を共有し、複数プロジェクトで使う

Tailwind CSS + daisyUIで作成したコンポーネントを、複数のプロジェクトで共有しようとしたが、単純にコンポーネントのソースだけを読み込んでも、 tailwind.config.js の設定内容が引き継がれない。 設定を手動でコピーするのも現実的ではないため、共有す…

Tailwind CSSで色やブレークポイント、クラスを追加する

Tailwind CSSで、レスポンシブ用のブレイクポイントの追加や、色などのクラス名を追加する方法を調べたのでメモ。 環境 ブレイクポイントの追加 色の追加 色指定時の注意点 その他のクラスの追加 振り返り 環境 Tailwind CSS v3.2.4。 ブレイクポイントの追…

daisyUIのtableクラスで、ヘッダーが大文字になったり固定されるのを抑制する

daisyUIの table クラスを使うと、theadのth,tdタグに書いたアルファベットが大文字に変換される。 また、スクロール可能なテーブルの場合、最初のthタグの位置が固定されてしまう。 ちょっとイマイチな挙動のため、変更する方法を調べたのでメモ。 環境 the…

daisyUIのアニメーションを無効化する

小ネタ。 daisyUIのアニメーションの無効化ができないか調べたのでメモ。 問題 対応 アニメーションを一括で無効化 振り返り 問題 daisyUIのコンポーネントを使うと、インタラクションの一環としてか、デフォルトでアニメーションが行われる。 ちょっと困っ…

Tailwind CSSの特殊なクラスや書き方のメモ

Tailwind CSSを使い始めて3ヶ月ほど経った。 スタイルに対応したクラス以外に、特殊なクラスや書き方があったのでメモ。 環境 子要素にスタイルを指定 テキストの省略 1行テキストの省略 複数行テキストの省略 スペーサー 要素間のボーダー important にする…