はじめに

今回は最近注目度が高いTailwindCSSについて、詳しく解説していきたいと思います！

TailwindCSSってナニ？

TailwindCSSとは、Adam Wathan氏らによって開発されている、ユーティリティファーストなCSSフレームワークです。
（Tailwindを直訳すると追い風という意味です。）
CSSフレームワークといえばBootstrapを思い浮かべる人が多いと思いますが、Bootstrapとの違いは「コンポーネント」が用意されていないことです。
Bootstrapは「Button」などのコンポーネントが用意されていて、それを使っていくというCSSフレームワークですが
TailwindCSSの場合はclassの中にstyleを指定していくという形になります。
特に、React, Vue.jsなどスタイルをコンポーネント化して画面を構築するのにあってる気がします。

Reactでの使用例を見てみましょう。

index.jsx

 <div className="">
      <h2 className="">HELLO WORLD</h2>
    </div>

なにもCSSを指定していない空っぽの状態です。

TailwindCSSの場合は、classNameにCSSを指定していきます。

index.jsx

<div className="flex justify-center items-center py-48 bg-gray-400">
      <h2 className="text-3xl text-yellow-400">HELLO WORLD</h2>
　</div>

簡単に解説すると、
flexはdisplay:flex
py-48はpaddingの設定
bg-gray-400は背景色の設定
text-3xlはfont-sizeの設定
text-yellow-400は文字の色の設定

こんな感じで、classNameにCSSを指定するだけでstyleが変更できます。

チートシートがあるので、そちらを見ながらコーディングすることをおすすめします。

環境構築

Next.jsでの環境構築

公式ページ通りにやっていきます。

1.create-next-app

npx create-next-app my-project
cd my-project
npm run dev
npm run start

2.TailwindCSSをダウンロードします。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

tailwind.config.js と postcss.config.jsを作成

npx tailwindcss init -p

tailwind.config.jsをこのように書き換えてください

// tailwind.config.js
module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

app.jsに以下のコードを書き足してください。

import 'tailwindcss/tailwind.css'

TailwindCSSを使うメリット

1.学習コストが低い

TailwindCSSのCSSの指定はCSSを触ったことがある人であれば簡単に覚える事が出来ます。
例：
.p-64 ＝ padding: 16rem;
.font-bold ＝ font-weight: 700;
初心者でも扱いやすく、簡単に実装出来ます。

2.CSSファイルが必要ない。

classに指定するだけなので、CSSファイルは必要ありません。

3.class名を考えなくてもよい

CSS設計において、一番大変なのはclass名を決めることだと思います。
TailwindCSSの場合は、class名を決めることがなくなるので悩む時間が減ります。

4.便利なテンプレートがたくさんある。

TailwindCSSはたくさんのテンプレートが配布されてあります。
おしゃれなHeadernavやButtonなどが簡単に実装出来るのは、使っていて楽しいですね。

TailwindCSSを使うデメリット

1.多く書いて行くとclass名が多くなる。

TailwindCSSを書いていくとclass名がたくさんになり、コードが見にくくなってしまいます。

index.jsx

 <a href="#" class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-700 text-gray-500 hover:text-gray-200 border-l-4 border-transparent hover:border-blue-500 pr-6">

一応@applyという機能を使って、Sassのmixinみたいなことも出来ます。

2.class名を見つけるのが大変な時もある。

class名は大体は分かりやすいのですが、分かりにくいものもあります。
例：
items-center ＝ align-items: center;
rounded-md ＝ border-radius: 0.375rem;
grid-cols-1 ＝ grid-template-columns: repeat(1, minmax(0, 1fr));

VScodeならTailwind CSS IntelliSenseという便利なスニペット拡張機能があるので、使うことを強くおすすめします。

TailwindCSSを使うにあたっておすすめなサイト

1.Tailwindチートシート

必須です。
慣れてくるまではチートシートを眺めながら、コーディングしていく事をおすすめします。

2.公式コンポーネント

Tailwindが出している公式のコンポーネントがあります。
有料の物が多いですが、無料のやつもあるのでおすすめです。

3.ユーザーが作ったコンポーネント

ユーザーがTailwindCSSで作ったコンポーネントを見ることが出来ます。

4.Gridジェネレーター

TailwindのGridを分かりやすく表示してくれます。
慣れてない人にはおすすめです。

最後に

今回はTailwindCSSについて解説しました！
使っていて楽しく、そして何より使いやすいので自分は積極的に使っていこうと思っています。