カワイイは、つくれる with Tailwind CSS

# 0. はじめに
[LIFULL Advent Calendar 2024](https://qiita.com/advent-calendar/2024/lifull) 5日目の記事です。
普段は [LIFULL HOME'S不動産査定](https://www.homes.co.jp/satei/) と [ホームズマンション売却](https://lifullhomes-satei.jp/) の開発に携わっています。

Tailwind CSSでカワイイ文字と動くイラストをつくっていきます🖤

![image.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484145/4d00cf1a-1bb6-9996-a05e-60dd27ba35c2.gif)

# 1. Tailwind CSSとは
## 概要
https://tailwindcss.com/
> A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. 

(訳) flex、pt-4、text-center、rotate-90のようなクラスが詰まったユーティリティ・ファーストのCSSフレームワークで、マークアップの中で直接、あらゆるデザインを構築できる。

以下のように、マークアップの中に直接定義済みのクラスを記述して使用します。

```html
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
```

## 導入方法
https://tailwindcss.com/docs/installation

npm 経由でインストールする方法やCDNでTailwindのファイルを読み込む方法などがあります。


# 2. 文字デザイン
## 基本
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484145/e4eae3b2-4218-6402-994b-9a2f00eeb92a.png" width="100%">

```html
<!-- 塗りつぶしの正方形で文字を囲んだもの -->
<p
  class="
    flex text-2xl text-white font-bold font-['BIZ_UDGothic']
    [&>span]:bg-black [&>span]:px-3 [&>span]:py-2 [&>span]:m-1
  "
  aria-label="タイトル"
>
  <span>タ</span>
  <span>イ</span>
  <span>ト</span>
  <span>ル</span>
</p>

<!-- 線のみの正方形で文字を囲んだもの -->
<p
  class="
    flex text-2xl text-black font-bold font-['BIZ_UDGothic']  
    [&>span]:outline [&>span]:outline-black
    [&>span]:outline-2 [&>span]:-outline-offset-2
    [&>span]:px-3 [&>span]:py-2 [&>span]:m-1
  "
  aria-label="タイトル"
>
  <span>タ</span>
  <span>イ</span>
  <span>ト</span>
  <span>ル</span>
</p>

<!-- 一文字目：塗りつぶしの正方形、二文字目以降：線のみの正方形で文字を囲んだもの -->
<p
  class="
    flex text-2xl text-black font-bold font-['BIZ_UDGothic']  
    [&>span]:outline [&>span]:outline-black
    [&>span]:outline-2 [&>span]:-outline-offset-2
    [&>span]:px-3 [&>span]:py-2 [&>span]:m-1
    [&>span:first-child]:bg-black [&>span:first-child]:text-white
  "
  aria-label="タイトル"
>
  <span>タ</span>
  <span>イ</span>
  <span>ト</span>
  <span>ル</span>
</p>

<!-- 線のみの正方形で文字を囲んだもの（密着） -->
<p
  class="
    flex text-2xl text-black font-bold font-['BIZ_UDGothic'] 
    [&>span]:border-solid [&>span]:border-black [&>span]:border-2 
    [&>span]:px-3 [&>span]:py-2
    [&>span:not(:first-child)]:border-l-0 
  "
  aria-label="タイトル"
>
  <span>タ</span>
  <span>イ</span>
  <span>ト</span>
  <span>ル</span>
</p>

<!-- 角丸四角形で文字を囲んだもの -->
<p
  class="
    flex text-2xl text-white font-bold font-['BIZ_UDGothic']
    [&>span]:bg-red-700 [&>span]:rounded-md
    [&>span]:px-3 [&>span]:py-2 [&>span]:m-0.5
  "
  aria-label="タイトル"
>
  <span>タ</span>
  <span>イ</span>
  <span>ト</span>
  <span>ル</span>
</p>
```

## カラフル
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484145/a65d272a-16ae-9c31-3e40-d2b94f8f83ca.png" width="100%">

```html
<style>
  @import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
</style>

<!-- シャドウ -->
<p
  class="
    flex text-3xl text-white font-['Mochiy_Pop_One']
    [&>span]:[text-shadow:_2px_1px_0_var(--tw-shadow-color)]
    before:content-['タイトル'] before:absolute
    before:text-white before:[-webkit-text-stroke:1px_#000]
  "
  aria-label="タイトル"
>
  <span class="shadow-pink-500">タ</span>
  <span class="shadow-sky-500">イ</span>
  <span class="shadow-yellow-500">ト</span>
  <span class="shadow-green-500">ル</span>
</p>

<!-- ドット -->
<p
  class="
    flex text-3xl text-transparent font-['Mochiy_Pop_One']
    [&>span]:bg-black [&>span]:[-webkit-background-clip:text]
    [&>span]:[background-size:20px_20px]
  "
  aria-label="タイトル"
>
  <span class="bg-[radial-gradient(#ec4899_30%,transparent_0)] [background-position:0_0]">タ</span>
  <span class="bg-[radial-gradient(#0ea5e9_30%,transparent_0)] [background-position:10px_10px]">イ</span>
  <span class="bg-[radial-gradient(#eab308_30%,transparent_0)] [background-position:0px_10px]">ト</span>
  <span class="bg-[radial-gradient(#22c55e_30%,transparent_0)] [background-position:10_0px]">ル</span>
</p>

<!-- ボーダー -->
<p
  class="
    flex text-3xl text-transparent font-['Mochiy_Pop_One']
    [&>span]:bg-black [&>span]:[-webkit-background-clip:text]
    [&>span]:[background-size:20px_20px]
  "
  aria-label="タイトル"
>
  <span class="bg-[repeating-linear-gradient(30deg,_#ec4899,_#ec4899_4px,_black_4px,_black_12px)]">タ</span>
  <span class="bg-[repeating-linear-gradient(30deg,_#0ea5e9,_#0ea5e9_4px,_black_4px,_black_12px)]">イ</span>
  <span class="bg-[repeating-linear-gradient(30deg,_#eab308,_#eab308_4px,_black_4px,_black_12px)]">ト</span>
  <span class="bg-[repeating-linear-gradient(30deg,_#22c55e,_#22c55e_4px,_black_4px,_black_12px)]">ル</span>
</p>
```

## ポップ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484145/8ec96e89-d794-cce3-f77a-c058080924c6.png" width="70%">

```html
<style>
  @import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
</style>

<!-- ドット -->
<p
  class="
    text-3xl text-transparent font-['Mochiy_Pop_One']
    bg-rose-400 bg-[radial-gradient(#ffe4e6_35%,transparent_0)]
    [background-size:10px_10px] [-webkit-background-clip:text]
    before:content-['タイトル'] before:absolute before:text-black
    before:top-0.5 before:left-0.5 before:-z-10
  "
>
  タイトル
</p>

<!-- ボーダー -->
<p
  class="
    text-3xl text-transparent font-['Mochiy_Pop_One']
    bg-cian-400 bg-[repeating-linear-gradient(30deg,_#22d3ee,_#22d3ee_4px,_#cffafe_4px,_#cffafe_8px)]
    [-webkit-background-clip:text]  
    before:content-['タイトル'] before:absolute before:text-black
    before:top-0.5 before:left-0.5 before:-z-10
  "
>
  タイトル
</p>
```

## 立体的
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484145/b84326a5-9a6e-aca3-36d1-60471358a865.png" width="35%">

```html
<style>
  @import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
</style>

<div class="relative inline-block">
  <p
    class="
      text-3xl text-white font-['Dela_Gothic_One'] [-webkit-text-stroke:2px_#000]
      before:block before:content-[''] before:absolute before:w-full
      before:h-3 before:bg-black before:mt-4 before:-z-10
      after:block after:content-[''] after:absolute after:w-full
      after:bg-black after:-mt-2 after:-z-10 after:border-solid
      after:border-t-[12px] after:border-t-black
      after:border-l-[16px] after:border-l-white
      after:border-r-[16px] after:border-r-white
    "
  >
    タイトル
  </p>
</div>
```
# 3. マウスホバー/キーボードフォーカスで動くイラスト
クリスマスっぽいイラストを作成してみました。

カーソル（マウスポインター）を画面内にかざすとイラストが動きます。
マウスを使用しない場合でも操作ができるように、画面内に含まれたbutton要素にキーボードフォーカスを移動することでもイラストが動くようになっています。
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="WbevMyN" data-pen-title="CodePen Home
Merry Christmas with Tailwind CSS" data-user="chiba_hnm" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/chiba_hnm/pen/WbevMyN">
  Untitled</a> by chiba_hnm (<a href="https://codepen.io/chiba_hnm">@chiba_hnm</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

参考：[【コピペで簡単】CSSで雪を降らせる方法](https://webdesign.rui-log.com/css_make-it-snow/)

# 4. おわりに
カワイイは、つくれる