Tailwind 没有在 Laravel 中导入

Posted 2023-03-07

【中文标题】Tailwind 没有在 Laravel 中导入

【英文标题】：Tailwind not getting imported in Laravel

【发布时间】：2021-08-06 11:19:03

【问题描述】：

我有一个 Laravel 项目，我正在尝试安装 Tailwind。

我有一个tailwind.css 文件：\resources\assets\stylesheets\tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

我导入的内容：\resources\assets\stylesheets\index.css

@import "tailwind.css"

我的 webpack.mix.js 文件：

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
    .options(
      processCssUrls: false,
      postCss: [ tailwindcss('./tailwind.config.js') ],
    );

还有tailwind.config.js：

module.exports = 
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],

当我运行应用程序并检查生成的 http://localhost/dist/css/app.css 时，我看到了：

/* Import Tailwind*/


@tailwind base;


@tailwind components;


@tailwind utilities

我已经通过npm安装了tailwind，也可以在我的node_modules文件夹中找到tailwind文件夹。

【参考方案1】：

您是否将index.css 包含在您的app.scss 文件中？

如果您所做的只是包括基本样式等，那么您真的不需要通过 sass 解析器将 Tailwind 放入。

假设您已经将 Tailwind 作为依赖项安装，您可以在项目中包含 Tailwind，如下所示：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/assets/stylesheets/index.css', 'public/css', [
        require('tailwindcss'),
    ]);