CODEWITHSUNDEEP
npmwordpress-theminglaravel-mixtailwind-csspostcss-import
Jukka I
Jukka I

Reputation: 16

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

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.

Upvotes: 0

Views: 8642

Answers (1)

Yassin ElBedwihy
Yassin ElBedwihy

Reputation: 11

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

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

Upvotes: 1

Related Questions