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

10286 ワード
tailwindcss 導入 初心者 インストール CSS CSS テキストリンク

Tailwind CSSをプロジェクトで利用する機会が増えてきたので、プロジェクトに導入する際の手順をまとめました。

目次

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

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を導入します。
ドキュメントに書いてあるとおりに行っていきたいと思います。色々インストールする方法はありますが、TailwindCSSをPostCSSプラグインとしてインストールする方法がドキュメントでおすすめされているので、PostCSSプラグインとしてインストールします。

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

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

"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
styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

6. TailwindCSSを試してみる

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

$ touch index.html

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

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コマンドを書きます。

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                                                                   
> [email protected] build
> postcss styles.css -o dist.css

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

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