コピペで簡単！爆速でtailwindcssをNode.jsに導入する方法について

はじめに

皆さんはどのCSSフレームワークを使われていますか？

有名どころは、Twitter社が作ったBootStrapでしょうか。

Bootstrapの大きな欠点は、どこかで見たようなサイトに仕上がり、
デザインにオリジナリティが出すことが難しくなります。

そんな中でおすすめしたいのが、今回取り上げる**Tailwind**です。

この記事では、Node.jsでtailwindcssを導入する方法をご紹介いたします。

今回使用するモジュール

今回使用したモジュールは以下の通りです。
今回採用したテンプレートエンジンはejsとなります。
また、ルーティング処理等はすべてexpressを用いています。

package.json

"autoprefixer": "^10.0.1",
"ejs": "^3.1.5",
"express": "^4.17.1",
"postcss": "^8.1.6",
"postcss-cli": "^8.2.0",
"tailwindcss": "^1.9.6"

[STEP1]プロジェクトを作成し、そのディレクトリに移動しましょう

ターミナル

mkdir nodejs-tailwindcss
cd nodejs-tailwindcss

mkdirでファイルを作成します。
cdでディレクトリを移動します。

[STEP2]初期化処理を行う

ターミナル

npm init

このコードを実行して以下のファイルが作成できればOKです。

package.json

{
    "name": "nodejs-tailwindcss",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "author": "",
    "license": "ISC",
}

[STEP3]JavaScriptのファイルを作成する

ターミナル

touch index.js

簡単ですね。
ただindex.jsファイルを作成するだけです。

[STEP4]必要なモジュールをインストールする

ターミナル

npm install express ejs --save

この後、tailwindcssなどのモジュールもインストールしますが、
わかりやすさに重きをおくため、先にexpressとejsをインストールします。

こちらを実行することで、package.jsonが以下のようになればOKです。

package.json

{
    "name": "nodejs-tailwindcss",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "ejs": "^3.1.5",
        "express": "^4.17.1",
    }
}

[STEP5]expressでルーティング処理等を記述する

STEP3で作成したindex.jsに以下のコードを記述します。

index.js

//モジュールを読み込む
const express = require('express');
const ejs = require('ejs');

//読み込んだexpressモジュールを実体化してインスタンスにする
const app = express();

//テンプレートエンジンとしてejsを用いる（今回はejsを使いません）
app.set('view engine', 'ejs');

//ルーティング処理
app.get('/', (req, res) => {
    res.send("expressを導入しました");
});

//サーバーを立ち上げる
app.listen(3000, () => {
    console.log('http://localhost:3000');
});

[STEP6]tailwindcssなど必要なモジュールをインストールする

ようやく本題のtailwindcssをここでインストールします。
ついでにpostcss, autoprefixerもインストールします。

この2つは解説します。
PostCSSとは、Node.js製の「CSSツールを作るためのフレームワーク」です。
Autoprefixerはベンダープリフィックスを自動で付与するPostCSS製のツールです。

tailwindcssはPostCSSのプラグインであるため、
最新のCSSをブラウザが理解できるものに変換するツールが必要となります。

ということで、コマンドラインからPostCSSを扱える, postcss-cliを合わせた４つをインストールしましょう。

ターミナル

npm install tailwindcss postcss autoprefixer postcss-cli --save

[STEP7]tailwindcssを使うために必要なファイルを作成する

これが最後のステップです。
何個かファイルを作成しないといけないのでまずはやるべきことを下記に記載します。

• tailwind.config.jsの作成
• postcss.config.jsの作成とファイルへの記述
• CSSを格納するフォルダ・ファイルを作成
• package.jsonにCSSをビルドする記述を追加

tailwind.config.jsの作成

ターミナル

npx tailwindcss init

このファイルは特にいじる必要はありません。
カスタマイズをする時にでも記載しましょう。
詳しくはこちらをご確認ください。

postcss.config.jsの作成とファイルへの記述

ターミナル

touch postcss.config.js

こちらを実行すると、postcss.config.jsが作成されます。
こちらのファイルに以下の記述を追加してください。

postcss.config.js

module.exports = {
    plugins: [require('tailwindcss'), require('autoprefixer')],
};

CSSを格納するフォルダ・ファイルを作成

ターミナル

mkdir public
mkdir public/styles
touch public/styles/tailwind.css
touch public/styles/style.css

上から順に、
①publicフォルダを作成
②publicフォルダ内にstylesフォルダを作成
③stylesフォルダ内にstyle.cssファイルを作成
④stylesフォルダ内にtailwind.cssファイルを作成

④のtailwind.css内には以下の記述を追加してください。

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

package.jsonにCSSをビルドする記述を追加

scriptsに新たに記載を追加します。

package.json

{
    "scripts": {
        "css": "postcss public/styles/tailwind.css -o public/styles/style.css"
    },
}

以下がpackage.jsonファイルの全体像です。

package.json

{
    "name": "nodejs-tailwindcss",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "css": "postcss public/styles/tailwind.css -o public/styles/style.css"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "autoprefixer": "^10.0.1",
        "ejs": "^3.1.5",
        "express": "^4.17.1",
        "postcss": "^8.1.6",
        "postcss-cli": "^8.2.0",
        "tailwindcss": "^1.9.6"
    }
}

それでは最後にビルドをしましょう!

ターミナル

npm run css

これでtailwind.cssの導入が完了です。

public/styles/style.cssにCSSが追加されています。

次回tailwind.cssを使ってログインページの作成を行います！