BLOG
ブログ
2024年11月12日
Tailwind CSSを試す
Tailwind CSS はオープンソースの CSS フレームワークの一つです。
CSS の指定を HTML のクラス属性に直接書いていくというのが大きな特徴です。
以前から気になっていて調べてはいましたが、よく言われている利点として、
「クラス名を考えなくていい」「直感的なクラス指定」
という訳で、今回試してみました。
基本的な使い方
HTML にクラスを指定して使います。
<!-- 例 -->
<h2 class="text-5xl font-medium tracking-wider text-primary">見出し2</h2>使用したもの
- Vite（要 Node.js）
- Vscode
- Tailwind CSS IntelliSense（VScode のプラグイン）
- Prettier
- prettier-plugin-tailwindcss
- Tailwind CSS Typography
コーポレートサイトを想定してお試し
サンプルとしてトップページとお知らせの記事ページを作成してみました。
コーディング途中での導入
進める中でクラスの順序が気になる場面があったため、「prettier-plugin-tailwindcss」を導入しました。
これにより、Tailwind CSS のクラスが自動で整列され、コードの可読性が向上します。
<div class="text-center flex tracking-wider text-xl">テキストが入ります。</div>
<!-- 保存すると↓のようにクラス名が並び変わる -->
<div class="flex text-center text-xl tracking-wider">テキストが入ります。</div>
WordPress など CMS を使う箇所への対応
WordPress のような CMS では、HTML を直接編集しない部分もあるため、Tailwind CSS Typography などの公式プラグインが便利です。
特に投稿ページやページネーションでは、以下のような対応が考えられます。
- Typography プラグインの活用
- 自作 CSS との併用
気になった点
- 当然ですがクラスが長くなる
- JavaScript で制御する部分の対応方法
- バージョンアップ時の互換性
使ってみた感想
HTML と CSS を行ったり来たりすることが（ほぼ）なく、クラス名を考える必要がないのは結構快適な印象でした。
また、デフォルトの値以外にも以下のように様々なデザインに対応することも可能です。
- tailwind.config.js へテーマ設定
- html へは任意の値を指定も可
- よく使うクラスの組み合わせを@apply を使ってカスタムクラスにまとめることも可
LP や小規模なコーポレートサイトなどに導入しても良いと感じました。
※ただし、公式ドキュメントやチートシートを確認する機会が多かったので、慣れるまでに時間がかかるかもしれません。
デザイナー
araki
人生の目標は門前仲町のバーの制覇 酒は弱い
こんな記事も
読まれています
CONTACT & WORKS
お気軽にご相談・お問い合わせください