Tailwindcss: Cannot read property 'toLowerCase' of undefined on Laravel Mix

[jjjrmy]

Everything is compiling fine with npm run dev but I get the following error when doing npm run prod.
I've narrowed it down to being a Tailwind or postCss issue because it runs with no errors without the postCSS tailwind config.

TypeError: Cannot read property 'toLowerCase' of undefined
at /css/app.css:3674:1
at /css/app.css:3675:3

const tailwindcss = require('tailwindcss');

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

[adamwathan]

Can you create a GitHub repo that reproduces the issue? I just tried this in a fresh Laravel project and can't reproduce.

[jjjrmy]

@adamwathan

Can you create a GitHub repo that reproduces the issue? I just tried this in a fresh Laravel project and can't reproduce.

I took everything out of my app.scss except the following and I'm still getting the same error when I run production.

app.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

webpack.mix.js

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

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

mix.setPublicPath("public");
mix.setResourceRoot(".");
mix.polyfill({
    useBuiltIns: "usage",
    targets: "> 0.25%, not dead",
    debug: true,
});

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

mix.js('src/app.js', 'public/js')
   .js('src/fomo.js', 'public/js');

mix.copy('src/img', 'public/img');

[jjjrmy]

Okay I solved the issue!!
The extended colors with blank values were causing the error to throw.

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#1f81da',
        'secondary': '#f46800',
        'success': '#1d9232',
        'body': '#f4f9fe',
        'main': '#edf6fd',
        'text': '',
        'label': '#495057',
        'border': '#bbb',
        'input': '',
        'muted': '',
      },
    }
  },
}

[shipstar]

I just ran into this issue as well and spent a decent amount of time debugging it. I'm not using Laravel - just webpack + postcss - so I overlooked this issue initially.

From a developer experience perspective, is this something Tailwind or PostCSS could detect and provide a more helpful error message? It would have saved me close to an hour if I had gotten a "custom colors cannot be blank" error message instead of the toLowerCase one mentioned above.

I'm not sure if this is something that would be handled by Tailwind or PostCSS, but I'm happy to look into it if someone can point me in the right direction.

Thanks!

[adamwathan]

Yeah we could add better error messages for this. Why would you be using blank colors though?
On Jun 12, 2020, 4:16 PM -0400, Kyle Shipley [e-mail], wrote:

I just ran into this issue as well and spent a decent amount of time debugging it. I'm not using Laravel - just webpack + postcss - so I overlooked this issue initially.
From a developer experience perspective, is this something Tailwind or PostCSS could detect and provide a more helpful error message? It would have saved me close to an hour if I had gotten a "custom colors cannot be blank" error message instead of the toLowerCase one mentioned above.
I'm not sure if this is something that would be handled by Tailwind or PostCSS, but I'm happy to look into it if someone can point me in the right direction.
Thanks!
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[jjjrmy]

Yeah we could add better error messages for this. Why would you be using blank colors though?

Not on purpose, that's why a better error would make more sense.