👻

「tailwind-mastery」ハンズオン

2025/01/18に公開

Tailwind Connect 2023: Recap of our first in-person eventbuild ui が紹介されていた。
tailwindをハンズオン形式で学びたかったので、tailwind-mastery のLesson「A taste of Tailwind」と「Scaffolding a multipanel layout」を実施した。

セットアップ

reactでハンズオンが進むため、環境のセットアップを行う。
tailwind公式にviteを使ったreact環境のセットアップがあるため手順通りに実施する。

https://tailwindcss.com/docs/guides/vite

  1. craete project
npm create vite@latest build-ui-tailwind-mastery -- --template react
cd build-ui-tailwind-mastery
  1. tailwind css insatll
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  1. Configure your template paths
export default {
-  content: [],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. Add the Tailwind directives to your CSS

src/index.cssに@tailwind ディレクティブを指定する。

# src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Start your build process
npm run dev
  1. Start using Tailwind in your project
function App() {
  return (
    <>
      <div className="bg-black">Hello world!</div>
    </>
  )
}

export default App

A taste of Tailwind

ユーティリティファーストアプローチについて説明しカスタムメッセージコンポーネントを構築する。

https://buildui.com/courses/tailwind-mastery/a-taste-of-tailwind

Intro

Discord風のメッセージコンポーネントをTailwindCSSを使って構築する。
まずはtailwindのユーティリティクラスを利用する。

ここではflexレイアウトを使って構築をする。
flex items-center justify-centerで中央に配置する。

<div className="flex min-h-screen items-center justify-center bg-black text-white">Hello world!</div>

flexはアイコンメニューリストなどの1次元のレイアウトに適しており、gridはヘッダー、サイドメニュー、フッターのサイトレイアウトといった2次元のレイアウトに適している。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

Colors

tailwindのデフォルトカラーを利用する。
https://tailwindcss.com/docs/customizing-colors

<div className="flex min-h-screen items-center justify-center bg-gray-700 text-white">
  Hello world!
</div>

Working with the spacing scale

w-4やh-4は1remに相当し16pxとなる。ブラウザのデフォルトが1remのため、ここから始めるのよい。

w-4	width: 1rem; /* 16px */

https://tailwindcss.com/docs/width
https://tailwindcss.com/docs/height

開発ツールでdiscordを確認すると、40px x 40pxのため、h-10 w-10を指定する。

<div className="flex min-h-screen items-center justify-center bg-gray-700 text-white">
  <img className="h-10 w-10" src={viteLogo} alt="Vite logo" />
</div>

Finishing the header

items-baseline でテキスト揃えにする。
https://tailwindcss.com/docs/align-items#baseline

他にも、items-centerはコンテナ中央揃えにすることができる。

<div className="flex min-h-screen items-center justify-center bg-gray-700 text-white">
  <div className="flex">
    <img className="mr-4 h-10 w-10 rounded-full" src={viteLogo} alt="Vite logo" />
    <p className="flex items-baseline">
      <span className="mr-2 text-sm font-medium text-green-500">adamwathan</span>
      <span className="text-xs text-gray-500">01/15/2021</span>
    </p>
  </div>
</div>

Styling the message text

<div className="flex min-h-screen items-center justify-center bg-gray-700 text-white">
  <div className="max-w-lg">
    <div className="flex">
      <img className="mr-4 h-10 w-10 rounded-full" src={viteLogo} alt="Vite logo" />
      <div>
        <p className="flex items-baseline">
          <span className="mr-2 text-sm font-medium text-green-500">adamwathan</span>
          <span className="text-xs text-gray-500">01/15/2021</span>
        </p>
        <p className="text-gray-300">
          You should never use something like leading relaxed with a big font size, it goes against all typography best practices. Line height should decrease as font size gets bigger
        </p>
      </div>
    </div>
    <div className="mt-1">
      <p className="text-gray-300 pl-14">
        You can override it in your config if you want but ultimately we
        chose the defaults they did because they let you get results closest
        to what a professional designer would do more easily
      </p>
    </div>
    <div className="mt-1">
      <p className="text-gray-300 pl-14">
        Since we changed this in tailwind 2 I’ve almost never used a leading
        class at all
      </p>
    </div>

  </div>
</div>

Applying the hover treatment

hoverの適用とhover時のpaddingの調整

<div className="flex min-h-screen items-center justify-center bg-gray-700 text-white">
  <div className="max-w-lg">
    <div className="flex hover:bg-gray-800 hover:bg-capacity-30 px-4 py-1">
      <img className="mr-4 h-10 w-10 rounded-full" src={viteLogo} alt="Vite logo" />
      <div>
        <p className="flex items-baseline">
          <span className="mr-2 text-sm font-medium text-green-500">adamwathan</span>
          <span className="text-xs text-gray-500">01/15/2021</span>
        </p>
        <p className="text-gray-300">
          You should never use something like leading relaxed with a big font size, it goes against all typography best practices. Line height should decrease as font size gets bigger
        </p>
      </div>
    </div>
    <div className="mt-1 hover:bg-gray-800 hover:bg-capacity-30 px-4 py-1">
      <p className="text-gray-300 pl-14">
        You can override it in your config if you want but ultimately we
        chose the defaults they did because they let you get results closest
        to what a professional designer would do more easily
      </p>
    </div>
    <div className="mt-1 hover:bg-gray-800 hover:bg-capacity-30 px-4 py-1">
      <p className="text-gray-300 pl-14">
        Since we changed this in tailwind 2 I’ve almost never used a leading
        class at all
      </p>
    </div>

  </div>
</div>

Scaffolding a multipanel layout

flexboxユーティリティを使ってアプリケーションレイアウトを構築する

Transcript

レイアウトから構築を始める。

<div>
  <div>Servers</div>
  <div>Channels</div>
  <div>Main</div>
</div>

から始める。

flexboxを利用して、デフォルトの横方向にレイアウトを組む。
flex-1ユーティリティクラスを指定して、Mainパネルが使用可能なスペースのすべてを占めるようにする。

<div className="flex text-white h-screen">
  <div className="bg-gray-800">Servers</div>
  <div className="bg-gray-700">Channels</div>
  <div className="bg-gray-600 flex-1">Main</div>
</div>

Server panel

flex item-center justify-centerで、このテキストを中央に配置することが簡単にできる。

<div className="flex text-white h-screen">
  <div className="bg-gray-800 p-4">
    <div className="bg-white text-gray-800 w-12 h-12 rounded-full flex items-center justify-center">
      TW
    </div>
  </div>
  <div className="bg-gray-700 p-4">Channels</div>
  <div className="bg-gray-600 p-4 flex-1">Main</div>
</div>

Channel Pannel

flex-colで縦並びにする。

https://tailwindcss.com/docs/flex-direction#column

縦並びにしたうえで、flex-1で最大限スペースを利用する

<div className="w-60 bg-gray-700 flex flex-col">
  <div className="p-4">Tailwind CSS</div>
  <div className="bg-black p-4 flex-1">Channels</div>
</div>

Main panel

ChannelPannelと同様にflex-colを利用する

<div className="flex text-white h-screen">
  <div className="bg-gray-800 p-4">
    <div className="bg-white text-gray-800 w-12 h-12 rounded-full flex items-center justify-center">
      TW
    </div>
  </div>
  <div className="w-60 bg-gray-700 flex flex-col">
    <div className="p-4 shadow-md">Tailwind CSS</div>
    <div className="p-4 flex-1">Channels</div>
  </div>
  <div className="bg-gray-600 flex-1 flex flex-col">
    <div className="p-4 shadow-md">general</div>
    <div className="p-4 flex-1">messages</div>
  </div>
</div>

ラップアップ

  • cssを記載せずにユーティリティクラスのみでデザイン実装ができる。
  • ユーティリティクラスのみで、Flexboxを利用してアプリケーションのレイアウトを構築することができる。

NEXT

もう少しtailwindの学習をすすめたい。

Tailwind CSS Tips, Tricks & Best Practices
https://www.youtube.com/watch?v=nqNIy8HkEQ8

Discussion