背景
Tailwind CSS 是一个流行的 CSS 框架，其需要与 Laravel 类的后端框架配合使用。然而，在 Laravel 中使用 Tailwind CSS 时，有时会出现以下错误：
-- -------------------- ---- -------
----------------------------------------- --- ----- ----- ------- -------- -- ------
----- -- ---------------------------------------
------ ----- ------ ----- --------------------------------------------
------------ --------------------------------------- ---------- ----- ---------
---- - ----- ----------- --------- - ----- ----------------------------------
---- -
- ---- - ----------- -- -------------------------
- -
---- -
---- - ------ ----------- ----------
---- - -
该问题在使用 Laravel Mix 编译时出现，其原因为 Tailwind CSS 中内置的 JavaScript 代码无法转换为 ES5 代码。解决该问题的方法如下。
方法
方法一：全局安装 webpack-cli
npm install -g webpack-cli
在 Laravel 项目的根目录下，新建一个 webpack.mix.js 文件，编写如下内容：
-- -------------------- ---- -------
--- --- - -----------------------
----------------------------- ------------
-------------------------------- -------------
----------
--------------- ------
-------- -
-------------------------
--
---运行如下命令：
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 文件中，加入如下内容：
-- -------------------- ---- -------
--- --- - -----------------------
--- ----------- - -----------------------
--------------------------------
----------------------------- ------------
-------------------------------- -------------
----------
-------- - ----------------------------------- --
--
------------运行如下命令：
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