Tailwind CSSのインストール方法1〜環境構築編〜

[Tailwind CSS](https://tailwindcss.com/)をプロジェクトで利用する機会が増えてきたので、プロジェクトに導入する際の手順をまとめました。

#目次
[1.開発環境](#1-開発環境)
[2.プロジェクトの作成](#2-プロジェクトの作成)
[3.TailwindCSSの導入](#3-TailwindCSSの導入)
[4.設定ファイルの作成](#4-設定ファイルの作成)
[5.カスタムCSSファイルの作成](#5-カスタムCSSファイルの作成)
[6.Tailwind CSSを試してみる](#6-TailwindCSSを試してみる)


#1. 開発環境

最初にnodeを入れましょう。

```
$ node -v
v16.5.0
$ npm -v
7.19.1
```
#2. プロジェクトの作成

適当なプロジェクトを作成し、package.jsonを作成します。


```
$　mkdir tailwindcss
$　cd tailwindcss
$　npm init -y
```

#3. TailwindCSSの導入

Tailwind CSSを導入します。
[ドキュメント](https://tailwindcss.com/docs/installation)に書いてあるとおりに行っていきたいと思います。色々インストールする方法はありますが、TailwindCSSをPostCSSプラグインとしてインストールする方法がドキュメントでおすすめされているので、PostCSSプラグインとしてインストールします。

```
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest  postcss-cli
```

上記のコマンドを行うと、package.jsonのdevDependenciesに下記が追加されます。

```json
"devDependencies": {
    "autoprefixer": "^10.3.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.7"
}
```

#4. 設定ファイルの作成

Tailwind CSSの設定ファイルである、tailwind.config.jsとpostcss.config.jsの２ファイルをコマンドで作成します。

```
$ tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
````

#5. カスタムCSSファイルの作成

Tailwind CSSの適当なカスタムCSSファイルを作成します。今回はstyles.cssにしました。styles.cssにTailwind CSSを使うために３行追記します。

```
$ touch styles.css
```

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

VSCodeで作業すると、@tailwindの箇所に線が表示されてしまうので、PostCSS Language Supportというプラグインを追加します。ついでにTailwind CSSの補完もされるようにTailwind CSS IntelliSenseも追加しましょう。今回追加するプラグインは、[公式ドキュメント](https://tailwindcss.com/docs/editor-support)にも書いてあります。

* [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss)
* [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

#6. TailwindCSSを試してみる

index.htmlを作成してTailwind CSSを試してみます。

```
$ touch index.html
```
index.htmlで、!のあとにTABを押すと簡単に雛形ファイルを作成することができます。
h1タグでtext-red-500で文字を赤くし、text-5xlで文字を大きくしましょう！
stylesheetの読み込みの箇所は、ビルドしたあとのcssファイルを読み込みたいので、お好きなファイル名にしましょう。今回はdist.cssにしております。


```html:index.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="dist.css">
    <title>Document</title>

</head>
<body>
    <h1 class="text-red-500 text-5xl">Hello, World</h1>
</body>
</html>
```

TailwindCSSをビルドして使いたいため、package.jsonにbuildコマンドを書きます。

```json:package.json
{
  "name": "tailwindcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "postcss styles.css -o dist.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.7"
  }
}
```

```
$ npm run build                                                                   
> tailwindcss@1.0.0 build
> postcss styles.css -o dist.css
```

ビルド後に、dist.cssを確認すると、CSSが追記されていることがわかると思います。
Chrome等のブラウザでindex.htmlファイルを開くとTailwindCSSが使えていることがわかります。
TailwindCSS便利ですね。

![index.html](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/c1b562b3-aa0f-a2d1-a6c8-936377cc7dcf.png)

次は、Purge機能とcssnanoを使って、今回作成したdist.cssを最適化します。

https://qiita.com/YSasago/items/3c56ef248d5a01d27816