Zenn
🌬️

Tailwind CSSレビュー

に公開
CSS
tech

私が最近知った新感覚（私基準）のcssライブラリ「Tailwind CSS」。
これがかなり面白くて、なおかつ簡単、cssが面倒に感じていた勢としては嬉しい代物なのではないかなと。

今回は、そんなTailwind CSSに出会い、使ってみた私なりの感想を伝えようと思います。
加えてちょっとしたチートシートの表も最後に載せておきます。

Tailwind CSSについてざっくり説明

Tailwind CSSはutility classを活用したCSSのフレームワークです。

utility classとは簡単に言うと、クラスの中の変数、メソッドが全て、インスタンスを生成(new Class)せずとも呼び出せるクラスのことです。jsのMathなどがいい例ですね。

CSSフレームワークといえばBootstrap、BulmaやMaterial UIなどを思い浮かべる人は多いと思います。
BootstrapやBulmaなどのフレームワークでは事前に準備されているボタン、メニュー、パンくずリストなどのコンポーネントを活用してデザインを行っていきます。
しかしTailwind CSSではコンポーネントは準備されておらず、utility classを使って独自のボタンを作成しデザインを行っていきます。

小難しいわからん！！ 結局どういうものなの？

HTML要素のクラス名に例えば、flex pt-4 text-centerといったユーティリティクラスを指定をすると対応するスタイルが当たります。

クラス名flexを指定すると以下のスタイルが適用されます。

.flex {
   display: flex; 
}

pt-4の場合は・・

.pt-4 {
    padding-top: 1rem;
}

text-centerの場合は・・

.text-center {
    text-align: center;
}

このように、ライブラリで用意されたクラスを指定するだけで、そのスタイルが適用されていくというものです。

なので、お察しの方もいると思いますが、スタイルが複雑になればなるほど、タグのclassプロパティが非常に長ったらしくなります。(笑)

使い方

CDN導入

headタグに以下のタグを記入するだけです。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

簡単。

yarn(npm)でインストール

reactなどNode.jsフレームワーク内で使用するイメージを持つかもですが、通常のhtmlファイルで使う場合を説明します。
まず、フォルダにyarnをインストールし、package.jsonを作成します。

yarn

そして以下のコマンドを入力することで、tailwind.cssをインストールできます。

yarn add -D tailwindcss@latest

Next.jsなどに導入する場合はPostCSSとAutoprefixerというパッケージも必要になります。

次に以下のコマンドを入力します。

yarn tailwindcss init

これにより、以下のファイルが作成されます。

  • tailwind.config.js

どちらも設定ファイルです。以下のように変更しましょう。

tailwind.config.js
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

次に、好きな場所にcssファイルを作成してください。
今回は、styles.cssとします。

styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

ここには、Tailwindディレクティブを記入しています。tailwindのクラスをCSSのプロパティに変換するものと考えて下さい。

最後にpackage.jsonファイルにscriptオブジェクトを作成し、コマンドで書いたcssが適用されるようにしてあげましょう。

package.json
"scripts": {
 "dev": "tailwindcss -i CSS/styles.css -o CSS/styles_dist.css -w",
 }

これで、yarn devコマンドで記入したcssが適用できるようになりました。これで完了です！

私目線のTailwind CSSの良い点悪い点

良い点

  • スタイルを自分で記入したりクラス名を考える必要がなくなる
  • CSSスタイルを覚えやすくなるきっかけとして丁度いい
  • チートシート(クラスの表)を掲載するサイトが充実している
  • 一部機能に制限が付くが一行のタグを記入するだけですぐに使える

悪い点

  • 複雑なスタイルだとタグのクラスが長くなる
  • スタイルの競合がわかりづらい
  • MVC系統のフレームワーク以外だとマストな選択ではないかも
  • paddingやheightなど数値を扱うクラスは値がとびとびになる等自由度は低め

感想

まだ自分はCDNでしか使ったことがないのですが、それでも十分すぎるほどの恩恵を得られたかなと思います。
慣れてしまえば使いやすいし、そもそもチートシートも充実しているので、慣れる必要性もあまり感じないかなというのも正直な感想です。

個人的な一番の利点は、「クラス名を考えないでいい」ということですね。
私はhtmlタグのクラス名考案で十分以上無駄にしたことがあります。なのでその手間が省けてかなりスピードが上がりました。

更に拡張機能を使えば、サイズのあたいがとびとびになってしまって自由度が低くなってしまう問題も解消されます。

まぁコードの可読性が落ちてしまうというのは仕方がないところですがね・・。
そこに目をつむっても十分な恩恵を得られますし、これからも自由度などあらゆる面で進化が期待されます。
ぜひ使ってみては如何でしょう？

Discussion