「tailwind-mastery」ハンズオン
Tailwind Connect 2023: Recap of our first in-person event で build ui が紹介されていた。
tailwindをハンズオン形式で学びたかったので、tailwind-mastery のLesson「A taste of Tailwind」と「Scaffolding a multipanel layout」を実施した。
セットアップ
reactでハンズオンが進むため、環境のセットアップを行う。
tailwind公式にviteを使ったreact環境のセットアップがあるため手順通りに実施する。
- craete project
npm create vite@latest build-ui-tailwind-mastery -- --template react
cd build-ui-tailwind-mastery
- tailwind css insatll
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- Configure your template paths
export default {
- content: [],
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
theme: {
extend: {},
},
plugins: [],
}
- Add the Tailwind directives to your CSS
src/index.cssに@tailwind ディレクティブを指定する。
# src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
- Start your build process
npm run dev
- Start using Tailwind in your project
function App() {
return (
<>
<div className="bg-black">Hello world!</div>
</>
)
}
export default App
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次元のレイアウトに適している。
Colors
tailwindのデフォルトカラーを利用する。
<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 */
開発ツールで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
でテキスト揃えにする。
他にも、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
で縦並びにする。
縦並びにしたうえで、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
Discussion