解决 Tailwind CSS 在 Laravel 中报错的问题

背景

Tailwind CSS 是一个流行的 CSS 框架，其需要与 Laravel 类的后端框架配合使用。然而，在 Laravel 中使用 Tailwind CSS 时，有时会出现以下错误：

// javascriptcn.com 代码示例
[./node_modules/tailwindcss/lib/index.js] 306 bytes {mix} [built] [failed] [1 error]

ERROR in ./node_modules/tailwindcss/lib/index.js
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError: /node_modules/tailwindcss/lib/index.js: Unexpected token (1255:14)

  1253 |     const [buildPath, tempPath] = await createTempDir('laravel-mix-twig');
  1254 |
> 1255 |     mix.then(() => cleanupTempDir(tempPath))
       |               ^
  1256 |
  1257 |     return [buildPath, tempPath];
  1258 |   }

该问题在使用 Laravel Mix 编译时出现，其原因为 Tailwind CSS 中内置的 JavaScript 代码无法转换为 ES5 代码。解决该问题的方法如下。

方法

方法一：全局安装 webpack-cli

npm install -g webpack-cli

在 Laravel 项目的根目录下，新建一个 webpack.mix.js 文件，编写如下内容：

// javascriptcn.com 代码示例
let mix = require('laravel-mix');

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

运行如下命令：

webpack --mode=development --watch

即可开始编译 Tailwind CSS。

方法二：使用 laravel-mix-tailwind

laravel-mix-tailwind 是一个 Laravel Mix 插件，可用于编译 Tailwind CSS。其安装方式如下：

npm install laravel-mix-tailwind --save-dev

在 webpack.mix.js 文件中，加入如下内容：

// javascriptcn.com 代码示例
let mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');

require('laravel-mix-tailwind');

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

运行如下命令：

npm run dev

即可开始编译 Tailwind CSS。

总结

在 Laravel 中使用 Tailwind CSS 时，常常会遇到编译错误的问题。本文介绍了两种解决方案，包括全局安装 webpack-cli 和使用 laravel-mix-tailwind 插件。以上两种方法均能解决 Tailwind CSS 在 Laravel 中报错的问题，并且能够帮助开发者轻松使用 Tailwind CSS。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6534f4917d4982a6ebaa4ade