React学習キロク #001 tailwind CSSを使ってみた
React初学者の備忘録です。
温かく見守っていただけるとありがたいです。
基本家から出ない生活なのでぬくぬくと過ごしていますが、日に日に朝布団から出られなくなって冬を感じています。
冬は大好きだけど、朝だけはどうにも攻略できません。
今回は、Tailwind CSSを使ってみたので、その記録を残しておきたいと思います。
学習内容
Emotionを使用したスタイリングと、Tailwind CSSを使用したスタイリングを学びました。
Emotionを使用したスタイリング
JavaScriptのコードに直接CSSを記述するEmotionというライブラリを使用したCSSの書き方がこちら。
<p
css={css`
color: skyblue;
`}
>
ここにテキスト
</p>Emotionでは、要素内にオブジェクト方式で記述することもできます。
<p
css={css({
color: "skyblue",
})}
>
ここにテキスト
</p>Tailwind CSSを使用したスタイリング
Tailwind CSSは、さまざまなクラス名が用意されており、付与したいスタイリングのクラスをclassName内に記述することで反映されます。
<p class="text-sm text-red-500">
これは14pxの赤色のテキストです。
</p>学習の感想
今回の学習でTailwind CSSのイメージがガラッと変わりました。
以前参画していたReactの案件で、Tailwind CSSを使用したことがありましたが、その時は未学習だったので、既存コードや公式ドキュメントを読みながら手探りで実装を進めていました。
普段CSSやSCSSで実装しているので、以下の点に不便さを感じて、当時はあまり良い印象がありませんでした。
慣れていないので、毎回クラス名を公式ドキュメントで調べて実装する必要がある
クラス名での検索ができない(要素を探しづらい)
クラス名が長くなり見通しが悪い
しかし、今回の学習を通して大まかに全体を把握できたことで、使いやすさを実感しました。
次Reactを使用してポートフォリオを作る時は、Tailwind CSSを採用しようかなと考えています。
Next…
CSS Modulesを使用したスタイリング🎨