express + ejs環境でtailwind cssを導入する方法

はじめに

Web Developer Bootcampを受講しているときに、私は思いました。
「Bootstrapの他のCSSフレームワークはどうやって導入するのかな？」
tailwindを選んだ理由は、単にモダンなCSSだろうという理由で選びました。

express + ejs環境でtailind cssを導入する方法

package.jsonの概要

{
  "name": "yelp_camp",
  "version": "1.0.0",
  "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",
  "description": "",
  "dependencies": {
    "autoprefixer": "^10.4.20",
    "ejs": "^3.1.10",
    "ejs-mate": "^4.0.0",
    "express": "^4.21.2",
    "method-override": "^3.0.0",
    "mongoose": "^8.9.3",
    "postcss": "^8.4.49",
    "postcss-cli": "^11.0.0"
  },
  "devDependencies": {
    "tailwindcss": "^3.4.17"
  }
}

やること

１. 各moduleのインストール

npm install tailwindcss postcss autoprefixer postcss-cli

２. tailwind.config.jsを作る

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./views/*.ejs', './views/**/*.ejs'],
  theme: {
    extend: {},
  },
  plugins: [
    {
      tailwindcss: {},
      autoprefixer: {},
    },
  ],
};

３． postcss.config.jsを作る

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

４． ./public/stylesheets下にtailwind.cssを作る

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

５．package.jsonにスクリプトを追加

{
  "name": "yelp_camp",
  "version": "1.0.0",
  "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",
  "description": "",
  "dependencies": {
    "autoprefixer": "^10.4.20",
    "ejs": "^3.1.10",
    "ejs-mate": "^4.0.0",
    "express": "^4.21.2",
    "method-override": "^3.0.0",
    "mongoose": "^8.9.3",
    "postcss": "^8.4.49",
    "postcss-cli": "^11.0.0"
  },
  "devDependencies": {
    "tailwindcss": "^3.4.17"
  }
}

７．CSSファイルをビルド

npm run css

８．index.js（app.jsなどメインのjsファイル）で下記を忘れずに

app.use('/public', express.static(__dirname + '/public'));

参考