将 Tailwind CSS v2.0+ 安装到 Laravel 8 中可以工作，但在运行时什么也不做答案

【问题标题】：Installing Tailwind CSS v2.0+ into Laravel 8 works but does nothing when run将 Tailwind CSS v2.0+ 安装到 Laravel 8 中可以工作，但在运行时什么也不做
【发布时间】：2021-03-08 16:11:00
【问题描述】：

我正在尝试将 Tailwind CSS v2.0 安装到干净的 Laravel 安装中，但是当我运行 npm run prod（或 dev）时，编译后的 CSS 文件只是源代码的副本。

我正在采取的步骤：

> laravel new twtest
> cd twtest
> php artisan -V
# Laravel Framework 8.16.1
> npm install
> npm install tailwindcss postcss autoprefixer
> touch postcss.config.js
# Add the postCss default from https://tailwindcss.com/docs/installation
# Add the three @tailwind commands into /resources/css/app.css
> npm run dev

这编译成功，但输出 CSS（public/css/app.css）列出了相同的三个 tailwind 命令，其中应该包含所有已编译的 Tailwind CSS：

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

【问题讨论】：

标签： laravel webpack tailwind-css postcss

【解决方案1】：

确保您使用的是最新版本：

npm install -D laravel-mix@latest tailwindcss@latest postcss@latest autoprefixer@latest --save-dev

仔细检查您的 package.json 是否包含最新的脚本条目以支持最新版本的 Laravel Mix。

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},

另外，删除 postcss.config.js 并在 postcss.config.js 的同时生成 tailwind.config.js。

npx tailwindcss init -p

将以下内容添加到您的 /resources/css/app.css 中。

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

完整的步骤是：

laravel new twtest
cd twtest
npm install -D laravel-mix@latest tailwindcss@latest postcss@latest autoprefixer@latest --save-dev
npx tailwindcss init
# Add the three @tailwind entries into /resources/css/app.css
npm run prod

【讨论】：