tailwind npm できない

Question

tailwindcssのバージョン3.0.24をインストール時に正常にインストールできません

laravel環境にてnpmを使用してtailwindcssを使用しております。以下を参考にしております。
tailwindcss install document
参考リンクの通り最後まで完了しました。tailwindcssがlaravel上で使用できるようになりましたが、インストールが正常に行われておりません。documentに記載されているのに使用できないプロパティがいくつか存在します。解決方法をご教授いただければ幸いです。

public/css/app.css

laravel-mixによってpublic/css/app.css にresourcesからcssをコンパイルされた結果を確認します。

バージョンは3.0.24と書かれている

下記画像の通り、tailwindcssのバージョンは3.0.24となっております。

バージョン3系のカラーが使用できない

バージョンの中身を確認するのに分かりやすいのでカラーを用いて検証します。
tailwindcssのカラーパレット

上記を参考にカラーが正しくpublic/css/app.cssに記載されているかを確認しました

grayは使用できる

zincは使えない

zincで検索してみるとpublic/css/app.cssに記載されておりません

greenは3種類のみ

greenは400,500,600のみしか使用できませんでした

以上、インストールが不完全なことがいえます。

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.7",
        "cross-env": "^7.0.3",
        "laravel-mix": "^6.0.43",
        "postcss": "^8.4.13",
        "tailwindcss": "^3.0.24"
    }
}

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

tailwind.config.js

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

resources/css/app.css

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

cdnを用いたときは大丈夫

cdn経由でtailwindcssを使用するとすべてのプロパティを使用することができます。

必要なことがあったら教えてください

このファイルが見たいなど不明な点ありましたらコメントくださいませ。
よろしくお願いいたします。

Answer 1

tailwind CSSのJITという新機能だった

https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css
軽くするために、全部はインストールされないみたい？