tailwindcss-cat!はじめました

はじめまして。kote2といいます。都内でフリーのフロントエンジニアをしています。

tailwindcss皆さん使っていますか？私はもうこれがないとデザインできません。というのは嘘ですが(この流れは古いですよね)。私がtailwindcssにハマったきっかけは、まだtailwindcssの存在を知らなかった頃、自作でtailwindcssっぽいものをscssで作ってたのが主な理由です。ほんの一例でこんな感じでmarginやpaddingクラスを５px単位で50pxまで書き出せるようにして使ってました。↓

ただいくつかのデメリットがありました。

• 管理が大変
• 使わないタグが多すぎる
• オレオレ(自分だけがわかる)すぎて間違った方向に行ってないか少し心配

「管理が大変」というのは特に困った事で、要はコーディング作業を効率化させたいから作ってるという目的があるので、クラス名などわかりやすいものを考えます。その作業が結構手間でした。一度決めたのに、あ、やっぱこれにしようとあと変えることもしばしば。発展途上すぎる！そこに現れたのがtailwindcssでした。

tailwindcssのプロパティの一例↓

私が今までscssで書き出してたタグとほぼ同じ！しかも種類が多い！おお！padding-topとbottomはpadding-yと名前つけるのうまいな！と、軽く小躍りした瞬間、あ、これでいいやと。それが私のtailwindcssとの出会いでした。以下にtailwindcssで使用されてるクラス名を確かめてみてください。

Tailwind CSS Cheat Sheet https://nerdcave.com/tailwind-cheat-sheet

このような出会いを経て、tailwindcssを使ってみたのですが、調べれば調べるほどよく出来てるし、いろいろできるなと思ったわけです。このサイトでは情報サイト風ですが、実態は私kote2のメモ書きです。特に今は立ち上げたばかりなので、記事をコツコツ書きたいと思います。

ちなみに、このブログは2021年4月現在3つのカテゴリがあります。主な内容は以下です。

• News => バージョンアップ等、tailwindcssの新着情報です
• Post => 特にまだテーマはないけどメインの記事です。沢山書いてそのうちカテゴリ整理します。
• Snippet => スニペットです。コピペで使えるtailwindcssみたいな。

それではよろしくおねがいします。

あ、あとtailwindcssの開発者のAdam Wathanはフォローしておきましょう。