TailwindCSSってナニ？

#はじめに
今回は最近注目度が高い**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を指定していない空っぽの状態です。
![スクリーンショット 2021-05-05 14.36.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1202267/6816e4d8-2189-176d-48c0-b56b359ecb83.png)

**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>
```
![スクリーンショット 2021-05-05 14.44.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1202267/c8ab2db2-0c18-3b95-01a6-74352b6eff95.png)

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


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

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

https://nerdcave.com/tailwind-cheat-sheet

##環境構築

**Next.js**での環境構築

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

https://tailwindcss.com/docs/guides/nextjs

###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などが簡単に実装出来るのは、使っていて楽しいですね。

おすすめ記事

https://www.nxworld.net/tailwind-css-resources.html

https://tailwindcomponents.com/

##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](https://tailwindcss.com/docs/intellisense)という便利なスニペット拡張機能があるので、使うことを強くおすすめします。

##TailwindCSSを使うにあたっておすすめなサイト
###1.Tailwindチートシート
必須です。
慣れてくるまではチートシートを眺めながら、コーディングしていく事をおすすめします。

https://nerdcave.com/tailwind-cheat-sheet

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

https://tailwindui.com/

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

https://tailwindcomponents.com/

###4.Gridジェネレーター
TailwindのGridを分かりやすく表示してくれます。
慣れてない人にはおすすめです。

https://tailwindgrids.com/#/

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