Tailwind Playのまとめ

サイトで使ってるやつとかのまとめ

Tailwind css 導入時の実験場

https://play.tailwindcss.com/UKXTHu0Tys

カード

blog

https://play.tailwindcss.com/vBEwAH9nZG

上記のカードをTailwind Variantsを使って作ったAstroのカード

---
import DateTime from "@components/ui/common/DateTime.astro";
import MyImage from "@components/utils/MyImage.astro";
import { BLOG_NAME } from "@config/config.ts";
import type { CollectionEntry } from "astro:content";
import { tv } from "tailwind-variants";

interface Props {
  post: CollectionEntry<typeof BLOG_NAME> | CollectionEntry<"note">;
}
const { post } = Astro.props;
// frontmatter baseUrlの有無によってURLを変える
const url = post.data.baseUrl ? post.data.baseUrl + post.slug : "/" + post.slug + "/";
const date = post.data.date,
  title = post.data.title,
  featured = post.data.featured,
  description = post.data.description ? post.data.description : "";

const imagePath = featured ? featured : "/img/blank.png";
const imageAttr = {
  class: "u-photo m-auto min-h-[100px] min-w-[100px] rounded-xl",
};
const imageSizeX = "640px";
const imageSizeY = "480px";

const card = tv({
  slots: {
    base: "col-span-full md:col-span-6 lg:col-span-4",
    content: [
      "flex flex-row",
      "items-center rounded-xl shadow-md",
      "bg-[color:--bg-base-color]",

      "md:flex-col",
      "md:basis-full md:shadow-lg",
      "md:hover:border-transparent",
      "md:hover:shadow-[0_10px_32px_rgba(0,0,0,0.4),0_24px_50px_rgba(128,128,128,0.1)]",
      "md:[&:hover_.info]:h-48",
      "md:[&:hover_.info]:grid-rows-3",
    ],
    imageArea: "md:basis-auto",
    imageWrapper: "h-auto w-40 object-cover md:w-auto md:overflow-hidden",
    textArea: "size-full object-cover md:relative",
    textWrapper: [
      "info",
      "flex flex-col",
      "text-[color:--text-base-color]",

      "md:grid",
      "md:h-[calc(1.8em_*_2.5)]",
      "md:absolute md:inset-x-0 md:bottom-0",
      "md:overflow-hidden md:rounded-b-xl",
      "md:bg-gradient-to-b md:from-black/40 md:to-black",
    ],
    titleText: [
      "[word-break: auto-phrase] text-balance px-2 py-1 text-base font-bold leading-6",
      "md:row-span-1 md:text-lg",
    ],
    descriptionText: "px-4 py-2 text-left text-sm leading-6 sm:text-base md:row-span-1",
    datetimeWrapper: "mt-auto px-4 py-2 text-right md:row-span-1",
    datetimeText: "text-sm",
  },
  compoundSlots: [
    {
      slots: ["titleText", "descriptionText", "datetimeText"],
      class: "md:text-white",
    },
    {
      slots: ["content", "textWrapper"],
      class: "h-full md:transition-all md:duration-200",
    },
  ],
});

const {
  base,
  content,
  imageArea,
  imageWrapper,
  textArea,
  textWrapper,
  titleText,
  descriptionText,
  datetimeWrapper,
  datetimeText,
} = card();
---

<div class={base()}>
  <a href={url}>
    <div class={content()} ontouchstart="">
      <div class={imageArea()}>
        <div class={imageWrapper()}>
          <MyImage
            src={imagePath}
            height={imageSizeY}
            width={imageSizeX}
            alt={title}
            attr={imageAttr}
          />
        </div>
      </div>
      <div class={textArea()}>
        <div class={textWrapper()}>
          <header>
            <h2 class={titleText()}>
              {title}
            </h2>
          </header>
          {
            description ? (
              <p class={descriptionText()}>{description}</p>
            ) : (
              <p class={descriptionText()}>&nbsp;</p>
            )
          }
          <div class={datetimeWrapper()}>
            <span class={datetimeText()}><DateTime date={date} /></span>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>