Tailwind CSSを20秒くらいで導入する

Tailwind CSS v3.0 Tailwindの使い方の説明ですが基本的に今あるタグの中のclassNameにテイルウィンド語を直書きします。

セットアップ(Set up)

1npm install  tailwindcss@latest postcss autoprefixer

latestをつけることで3.0が入ります。

以下のコマンドでtailwind.config.jsを作っていきます。

1npx tailwindcss init

中身のcontentの中の配列をこんな感じに書き換えます。

1module.exports = {
2  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
3  theme: {
4    extend: {},
5  },
6  variants: {},
7  plugins: [],
8  darkMode: "class",
9};

あとは普通に既存のグローバルとしてるCSSの最初に @tailwind components; @tailwind utilities;

を追加します。

既存のCSSと共存というか追加導入という形にしたい方は Tailwindの場合@tailwind baseは書かなくて大丈夫です。 baseを記述するとおそらくなんですが既存のcssを全てリセットするような挙動です。

使い方の説明(ドキュメントに載ってるクラスネームを書くだけ)

具体的にはtext-2xl(テキストサイズの指定)やm-0(マージンゼロ)であったりbg-数値 text-数値みたいな感じでガリガリデザインできるようになっています！

ドキュメントでcolorやtext,backgroundなどサーチしてみてください。 驚くほど簡単にデザインできることがわかります。

テイルウィンドを使う上でのコツというか気をつけた方がいいかなと思っているのが全てをこれで完結させようとして誰も読めないようなくらい多くのテイルクラスをつけてしまうことは回避しましょう。

私はマージンやパディングと大きさのスタイリングは使っていますがカラー管理は標準のSassで管理しています。 お手軽でスーパーセットからチョイスするだけでデザインが楽になるので絶対とは言えませんが導入するメリットは高いと思います。

あとフォントに100や200のサイズが用意されてなくてもウェジットのサイズの指定で簡単にいけちゃいます。

終わり

かなりお手軽に導入から使うところまでできます。 こんな簡単にデザインできると本当に楽ですね。

なぜ使ってみたかというと3.0からJitモードが標準搭載されて使うクラスのみ検出されて ビルドが超高速になっているから使ってみました。

これならいいですね。