尝试使用 Lararavel Mix 将 Tailwind CSS 添加到 Wordpress 项目时"Module not found"

Question

我正在尝试探索Tailwindcss，并希望将其添加到一个新的Wordpress项目中。我正在使用Laravel Mix来编译资产。

在设置完所有内容并运行"；npm run dev"；，我得到以下错误：

中的错误/assets/src/main.css模块构建失败(来自./node_modules/css loader/index.js(：ModuleNotFoundError：模块不是已找到：错误：无法解析"/中的node_modules/tailwindcss/base.csss'…

我当前的设置基于这篇文章：https://paulund.co.uk/using-tailwind-css-in-your-wordpress-theme

这是我的包.json 的代码

{
"name": "tailwind-wordpress",
"version": "1.0.0",
"description": "WP Theme with Tailwind CSS",
"dependencies": {
"cross-env": "^6.0.3",
"laravel-mix": "^5.0.0",
"postcss-import": "^12.0.1",
"tailwindcss": "^1.1.2"
},
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
}

这是webpack.mix.js 的内容

const mix = require('laravel-mix');
mix.postCss('./assets/src/main.css', './assets/dist/main.css', [
require('tailwindcss'),
])

和main.css:

@import 'node_modules/tailwindcss/base.css';
@import 'node_modules/tailwindcss/components.css';
@import 'node_modules/tailwindcss/utilities.css';

有什么想法可以解决这个问题吗？我们非常感谢您的帮助。

Answer 1

如果你使用的是webpack和所有的爵士乐，你应该使用

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