有没有将 Laravel 与 Tailwind CSS 集成的代码示例？

Question

我正在尝试将 Tailwind CSS 添加到我新创建的 Laravel 项目中，我去了 Tailwind CSS documentation

我在 webapack.mix.js 中添加的是 .sass("resources/sass/app.scss", "public/css") 和 require("tailwind") 行。

我也加了：

        "sass": "^1.20.1",
        "sass-loader": "^8.0.0"

对我的 package.json 的依赖项，运行 npm install，当我运行 npm run dev 时，它会抛出这样的错误

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (D:\blog\node_modules\postcss\lib\processor.js:61:15)
    at new Processor (D:\blog\node_modules\postcss\lib\processor.js:10:25)
    at postcss (D:\blog\node_modules\postcss\lib\postcss.js:26:10)
    at Object.loader (D:\blog\node_modules\postcss-loader\dist\index.js:87:20)
    at processResult (D:\blog\node_modules\webpack\lib\NormalModule.js:703:19)
    at D:\blog\node_modules\webpack\lib\NormalModule.js:809:5
    at D:\blog\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at D:\blog\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (D:\blog\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (D:\blog\node_modules\postcss-loader\dist\index.js:96:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\rafay\AppData\Roaming\npm-cache\_logs\2021-05-28T19_41_44_049Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\rafay\AppData\Roaming\npm-cache\_logs\2021-05-28T19_41_44_083Z-debug.log

这是我的项目的文件夹结构@

Answer 1

我知道TailwindCSS docs 中的所有内容您都已关注，但为了简洁起见，让我们从头开始。

您不需要将sass 处理器与TailwindCSS 一起使用，您可以通过tailwind.config.js 文件自定义TailwindCSS。

将tailwindcss 添加到您的package.json devDependencies。您可能还想包含可选的 forms 和 typography 包。

"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/typography": "^0.3.0",
"autoprefixer": "^10.0.2",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1"

将您的 webpack.mix.js 文件更新为 require tailwindcss 等。

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

初始化您的tailwind.config.js。

npx tailwindcss init

将基本样式添加到您的 app.css 文件中

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

为了保持您的 CSS 文件较小，请告诉 Tailwind 清除在您的 tailwind.config.js 文件的 purge 数组中指定的文件中找不到的所有 CSS 样式。您可以根据需要添加/删除。

purge: [
    './resources/views/**/*.blade.php',
    './resources/views/**/*.js',
    './resources/views/**/*.vue',
],

如果你已经正确安装和配置了，你应该可以成功运行npm run dev。

如果有帮助，您可以找到全新安装的 Laravel and TailwindCSS here 示例 repo。