●1 Tailwind css の最小セットでインストールしてcssを生成する

1. インストール

npm install --save-dev tailwindcss purgecss

2. 設定ファイル tailwind.config.js を用意する

vi tailwind.config.js

tailwind.config.js を次の内容で保存します。

module.exports = {
  purge: ['./**/*.html'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

3. 元となる style.cssファイルを用意

vi style.css

style.css を次の内容で保存します。

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

4. output.css を作成

tailwind.css を作成して完成です

npx tailwind build style.css -o tailwind.css

tailwind.css が生成されていれば動作OKです！

ただし、ファイルサイズが 2MB ほどあります。 そこで、 purgecss を使って使用していないプロパティを削除しながら生成します。

ファイルサイズを小さくして tailwind.css を作成

NODE_ENV=production npx tailwind build style.css -o tailwind.css

5. npm コマンドに登録

package.json　に次のように記述しておくとコマンド　

npm run build-tailwind
npm run build-tailwind-prod

で実行することができます

  "scripts": {
    "build-tailwind": "npx tailwind build  ./src/assets_front/tailwind/tailwind_input.css -o ./src/assets_front/scss/tailwind/_tailwind.scss" ,
    "build-tailwind-prod": "NODE_ENV=production  npx tailwind build  ./src/assets_front/tailwind/tailwind_input.css -o ./src/assets_front/scss/tailwind/_tailwind.scss"
  },