Simple Webpack Configuration (JS & PostCSS - Tailwind) | WordPress

In this video, I go over a simple webpack configuration that will compile JS and PostCSS (Tailwind). I hope you learn something useful from it!

💖 Become a Patron to show support & get perks!

Sign up for the newsletter. Free course coming in 2020:

**SOCIAL**

#Webpack #JavaScript #Tailwind

[shbd]

clean and simple tutorial, easy to understand. glad to find your channel and im a new subscriber to it. keep going and wish you the best...

[ProffessionalPM]

You have great content and huge potential with this channel, keep up the quality wp content and thank you for sharing your knowledge with us! 💪💯

[eastwardape]

You're the tutor, I was looking for. glad to be your subscriber!

[calebgnz]

Awesome video! Just quickly something that I ran into which is out of date in this video:
When you go to config the options for postcss, you need to put the options into a postcssOptions object inside of the regular webpack loader options object like this:
options: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}

}
Otherwise it'll throw a compile error haha, spent ages trying to figure out why my code wasn't compiling

[jagged_little_phil]

Excellent primer for PHP and Webpack! I was able to get a basic PHP project up and running with this - even without Wordpress integration.

[Allformyequine]

Thank you so much for doing this series!! Looking forward to the complete series, just what I was looking for! YAY!

[adgjk]

Looking forward to the series, thank you!

[dashingpix]

Great, experimenting with this for the last few days, and here you are :) . As you are going to continue just few suggestions for next episode - #1 - using SCSS #2 - out put more than one css files without creating extra entry points(not creating extra js files). if you cover these, that will be great.

[fakegray]

In what way might this be different with Webpack 5?

[travholt]

Thanks for great videos!

One thing that I, as a webpack novice, is constantly frustrated about is that almost every resource I can find assume that I know what's going on and what things mean. The amount of nesting and options and objects and arrays within eachother with no clear structure or explanation about how it all fits together is maddening.

An example of something that is just assumed you know: What is a "loader"? What is it loading, where, how, and why?

[gauravdeveloper]

You are a good instructor. You have a good knowledge of WordPress. I have one question. Can you make a video in which we can select multiple authors for blogs? The co-authors-plus plugin works the same which I am talking about.

[Mipon_en]

Nice video, how can I add hot reloading to the webpack configuration?

[pooya]

VIDEO IS OUT OF DATE. Change webpack.config.js section on plugins to this:

options: {
postcssOptions: {
plugins: [
"tailwindcss",
"autoprefixer"
],
},
},

[thangjamkishorchand]

What are your thought on Elementor theme builder ?

[MobiusCoin]

What do you think about using Laravel Mix for all of this? That's what I've been doing for a year now. I love it!

[gudivakapraveen]

Hi,
Can you please help me with wordpress+webpack + react (if possible with lazy loading).

[raj]

Why are you adding the header and footer in index.js? Can I add my usual wordpress templates and files as normal for example full-width.php?

[QueenJneeuQ]

This is the video i've been looking for, for ages!! I just have one question, how would this work with the wordpress theme directory, since you just have the index and functions where would the rest of the wordpress files be located? Also is this easy to incorporate Stylus instead of tailwind, I used to used stylus with webpack/wordpress but it was a very long time ago

[osherezra]

Great Tutorial man thanks. can you elaborate how to use the Tailwindcss config in this setup? cheers

[ravimakwana]

how can we use sass with our style.css and one more thing is how can we remove unused CSS from our website?