React 開発日記。開発からデプロイまで。#2

Day2 ~ Tailwind ~

わんばんこ。みくのすけです。

きょうはCSSについてです。オンラインスクール『RaiseTech』でcssについていくつか紹介されたことがあります。

最低５つは試してくださいと言うのでiline styles、CSS Modules、styled-componetsとやってきました。

styled-componetsまでやったところでこれいいね。sass使えるし。って言うことでここまでで終了していました。

ところが、over40でおすすめされたのがTailwindです。ということでDay2はTailwindを触ってみようです。

ゴール

ゴール：Tailwindを動かしてみる。

やったこと

RaiseTech 講座ビデオ見返し

たしかライブラリの紹介していたよな、ということでスクールの録画ビデオを視聴。

講師のじゃけえさんしっかりMantine、Tailwindについて紹介していました。

Mantineについては「あまり知られていませんがすごいのがこいつです」「次に自社開発するならこいつを使います」

Tailwindについては「今勢いがあります」「必要なものはほぼ揃っているのでこれだけでいけます」

そのようにおっしゃていました。全く頭に残っていませんでした。

YouTube まなぶーで学ぶ

学習を効率よく行うために動画レッスンは欠かせません。

いい教材がありました。まなぶーさんのTailwind 講座。シリーズものになっていますね。今日は#1だけ。概要編です。内容はこんなことでした。

• スタイルの当て方
• レスポンシブ対応
• ダークモード設定
• パフォーマンスがよいことが特徴

実際に手を動かす

実際に手を動かそうとごにょごにょしていたのだが・・・ここで寝落ち。

まとめ

実務と講義の掛け合わせでしっかり頭に入る。講義は効いていましたが実感がわかないためすっかり頭から抜け落ちていました。今回実際に作るという目的があって講座内容が頭に入ってきました。

Tailwindは勢いがあるようですね。その理由はクラスの命名に悩まなくて良い。ルール通りにやれば簡単にかっこよいスタイルが決められる。

寝落ちして実際に動かすまでにはいきませんでしたが、明日への楽しみが増えました。

Follow me!

@miku_nosuke