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

0. はじめに

LIFULL Advent Calendar 2024 5日目の記事です。
普段は LIFULL HOME'S不動産査定 と ホームズマンション売却 の開発に携わっています。

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

1. Tailwind CSSとは

概要

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フレームワークで、マークアップの中で直接、あらゆるデザインを構築できる。

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

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

導入方法

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

2. 文字デザイン

基本

<!-- 塗りつぶしの正方形で文字を囲んだもの -->
<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>

カラフル

<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>

ポップ

<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>

立体的

<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要素にキーボードフォーカスを移動することでもイラストが動くようになっています。

See the Pen Untitled by chiba_hnm (@chiba_hnm) on CodePen.

参考：【コピペで簡単】CSSで雪を降らせる方法

4. おわりに

カワイイは、つくれる