"Module not found" when trying to add Tailwind CSS to a Wordpress project with Lararavel Mix

Question

I am trying explore Tailwindcss and want to add it to a new Wordpress project. I am using Laravel Mix for compiling assets.

After setting up everything and running "npm run dev", i get the following error:

ERROR in ./assets/src/main.css Module build failed (from ./node_modules/css-loader/index.js): ModuleNotFoundError: Module not found: Error: Can't resolve './node_modules/tailwindcss/base.css' in ...

My current settings are based on this article: https://paulund.co.uk/using-tailwind-css-in-your-wordpress-theme

Here's code for my package.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"
  }
}

And this is contents of webpack.mix.js

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

mix.postCss('./assets/src/main.css', './assets/dist/main.css', [
    require('tailwindcss'),
])

And main.css:

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

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

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

Any ideas how to solve this issue? All help is highly appreciated.

Yassin ElBedwihy · Accepted Answer · 2021-01-25 10:13:46Z

1

if you're using webpack and all that jazz you should use

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

answered Jan 25, 2021 at 10:13

Yassin ElBedwihy

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

"Module not found" when trying to add Tailwind CSS to a Wordpress project with Lararavel Mix

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related