是否有将 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\_logs21-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\_logs21-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 清除任何 CSS 在您的 tailwind.config.js 的 purge 数组中指定的文件中找不到的样式] 文件。您可以 add/remove 随心所欲。

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

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

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

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

Is there any code sample that integrates Laravel with Tailwind CSS?

laravel

postcss

tailwind-css