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

Question

我正在尝试将 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;

Answer 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