バリアント修飾子「Group」

groupなるもの

実装例↓

タスク1
編集する

コード↓


<div className="space-y-4">
  <div className="bg-white shadow-sm rounded-sm border border-slate-200 p-4 group/card">
    <div className="flex gap-2">
      <div>タスク1</div>
      <div className="group/actions">
        <a
          href="#"
          className="opacity-0 text-slate-500 group-hover/card:opacity-75 group-hover/actions:text-indigo-700 group-hover/actions:underline"
        >
          編集する
        </a>
      </div>
    </div>
  </div>
</div>

group/card がセット、　group-hover/card:[スタイリング]で可能

jsいらずで色々できそうか

兄弟状態に基づくスタイル設定

Published status

<fieldset className="">
  <legend>Published status</legend>
  <input
    id="draft"
    className="peer/draft"
    type="radio"
    name="status"
    defaultChecked
  />
  <label htmlFor="draft" className="peer-checked/draft:text-sky-500">
    Draft
  </label>
  <input
    id="published"
    className="peer/published"
    type="radio"
    name="status"
  />
  <label
    htmlFor="published"
    className="peer-checked/published:text-sky-500"
  >
    Published
  </label>
  <div className="hidden peer-checked/draft:block">
    Drafts are only visible to administrators.
  </div>
  <div className="hidden peer-checked/published:block">
    Your post will be publicly visible on your site.
  </div>
</fieldset>

Groupの兄弟要素版ってだけ。記述の仕方も同じ。

注意点としては、peer/[]で定義する前にpeer-hover/[]:[style]としても動かない

疑似要素

その１　before after

学び　ringってoutlineのことっぽい

その２　content

when you look annoyed all the time, people think that you're busy.
when you look annoyed all the time, people think that you're busy.

↑疑似要素じゃなくて、空要素で装飾したほうがいいんじゃね？って公式がいってる

便利ライブラリ

「clsx」

2025/1/1

以下、Tailwind CSS 実践入門をよんでます

ユーティリティファーストについて

メリット

  • クラス名を考える必要なし
  • HTMLとCSSを交互に見る必要がない
  • 影響範囲が明確

プラグイン

Typography
親に「.prose」である程度スタイリングしてくれる
Forms
ある程度のフォームの見た目を提供
Container Queries
コンテナクエリが簡単に使えるように

Tailwindにはいくつものプラグインが組み込まれている。ユーティリティクラスはプラグインによって実装されている

最初から組み込まれているものをコアプラグインと呼ぶ

ディレクティブ

Tailwindが独自で定義しているCSS記法のうち、アットルールを指す

@layer
@layer componentsは、スタイルを名前空間にまとめるためのものです。

...
@tailwind utilities;

@layer components {
  .super-button{}
                }
もちろん↓のようにもかける

.super-button {}

利点は
1,utilitiesの前に書かれたことになり、上書きできる
2,モディファイアを利用できる　例）md:super-button

@apply

非推奨。故に詳しく書かないが、どうしてもコアプラグインスタイルでコンポーネントを追加したい場合


const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        }
      })
    })
  ]
}
@config

設定ファイルをプロジェクト内に複数設置する場合　公式参照

theme()やscreen()

.btn-blue {
  background-color: theme(colors.blue.500);
  @media screen(sm) {
    background-color: theme(colors.red.500);
  }
}

Preflight

Tailwindにおいてクラスを用いずに表現されるスタイル郡。リセットCSS的なやつ。

ダークモード対応

  1. osの設定に準じる(prefers-color-scheme)(darkMode: 'media')
  2. セレクタやクラスを元に判断する(darkMode: 'selector')

組み方

classNames clsx でpropsにclassNameを渡すのは微妙

あとから上書きされたりするのが面倒

どうしてもというときはtailwind-mergeを使う

コンポーネント集

  • TailwindUI
  • shadcn/ui (tailwind css + Radix UI)
  • Headless UI (スタイリングを持たないUIライブラリ)
  • Radix UI

設定ファイルの高度な設定

safelist
ビルド結果に強制的に含まれるクラスを指定
blocklist
safelistと逆に消すべきクラスを定義
prefix
接頭辞を指定できる
presets