Learn how to supercharge WordPress with @wordpress/scripts

Get ready for an incredible journey of enhancement for your WordPress theme! In this video, I'll guide you through the powerful @wordpress/scripts package, unveiling its secrets and demonstrating, in practice, how to completely integrate it with an existing theme.

I'll also be sharing practical examples involving the integration of two essential tools: BrowserSync and Tailwind CSS.
In this tutorial, we demystify the process for aspiring designers who want to build a classic theme from scratch.
Feeling overwhelmed by pre-made themes? Fear not! We guide you through the essential files and step-by-step process. Let's turn your theme creation dreams into reality!

************************************

SUPER DISCOUNT in all my courses at Udemy!

************************************

My new book, "The Web Developer's Guide to WordPress," is now available.

************************************

🚀 Some pieces of code used in this video:

"scripts": {
"start": "npm-run-all --parallel sync wpstart tailwindwatch",
"wpstart": "wp-scripts start",
"build": "npm-run-all --parallel wpbuild tailwindbuild",
"wpbuild": "wp-scripts build",
}

/** @type {import('tailwindcss').Config} */
content: ["./**/*.php", "./src/**/*.js"],
plugins: []
}

Don't forget to like, share with other WordPress enthusiasts, and subscribe for more tips, tricks, and tutorials!

#wordpress #wordpresstutorial #themedesign #wordpresstheme #webdevelopment

[muhammadadeelcoder]

"Awesome! How could I not find this video for a year? I’ve been searching for such a great development environment. ❤

[beardedbacon]

Thanks for the tutorial. I was trying to figure out how to get tailwind and @wordpress/scripts working together and was missing that I needed to import index.css into the index.js for it to actually create the index.css file in the build folder

[jameshofton]

Thanks so much, this is exactly what i was looking for, i want to use tailwind with blocks.

[thebilalafsar]

Hey Marcelo! Could you create a detailed tutorial on WordPress speed optimization and Core Web Vitals? I'm eager to learn how to achieve a 90%+ Google PageSpeed score and pass the Core Web Vitals for a WordPress site without solely relying on plugins. I'm not interested in the typical speed optimization methods, such as installing caching or image optimizer plugins. Instead, I'm looking for a manual and comprehensive guide that really helps. Thanks!🙏

[frontenddeveloper]

Hi marcelo you doing a great Job keep it up I learn alot from your lessons.

[ravimakwana]

Great, how can I purge the unnecessary css?

[absoluzioni]

Hi Marcelo! I already knew and used @wordpress/scripts but I tried in vain to activate browser-sync at the same time and in 2 minutes you solved the problem! Eternally grateful! I have a second problem and maybe you would know how to solve it. When I create a wordpress project I first create the project in HTML-CSS-JS using PostCSS to organize my CSS. Unfortunately @wordpress/scripts uses SCSS. Could PostCSS be integrated into the scripts so I don't have to translate all my mixins from PostCSS to SCSS? I hope I have explained myself. In any case this is a wonderful day thanks to you!!!