Tailwind CSS

PHP	laravel
7.4.11	8.83.5

まず、インストール。

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

次にconfigファイルを作る。

npx tailwindcss init -p

tailwind.config.jsを編集。

tailwind.config.js

 // tailwind.config.js
  module.exports = {
-   content: [],
+   content: [
+     './resources/**/*.blade.php',
+     './resources/**/*.js',
+     './resources/**/*.vue',
+     './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
+   ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

webpack.mix.js

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

./resources/css/app.css

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

watchの時は

npm run watch

production時は

npm run prod

cssが反映されない時はtailwind.config.jsからmodeの部分を消去、追加を繰り返す