I remember when I didn't have any knowledge about programming and I found Brad's channel from one of his video from 10 days JS series and started watching every video of his channel. Every piece of content he teach is very easy to grasp. watching his tutorials and testing them in practical by doing some projects helped me to learn and start my career as a web dev. Cant thank you enough!!
Dude , i just saw one of your Tutorials , the one Become a Wordpress ... and i love how do you explain things , it will be AWESOME if you can make something similar but with Woocommerce theme development !!! there are very limited tutorial around here and they are not very deep like the one that you did.
Very great tutorials. I worked many years with the classical Wordpress then went off to React developer land and now coming back to Wordpress to catch up and your videos definetely are great so thank you!
It would be so useful if there was also an example / boilerplate of using Tailwind with the new FSE approach, in line with your latest "Become a WordPress Developer" course addition. It is so hard to find good "beginners" information about it, I'm stuck on it for days.
Love your videos..Took your Udemy Bootcamp last year. Is there a video showing how extend this current set up multiple blocks in this same plugin, this includes file structure, updates to how the package.json would work, etc
hello Sir, I see you as a wordpress king for youtube, hopefully you will create a tutorial for react-wordpress theme development like the one "university-theme" you did. That would be very useful for developers I guess.
Thanks for this video. One thing I am having trouble wrapping my head around is the duplication issue. We now have Tailwind classes loading on the theme e potentially the same classes loading on the plugin. I wish the plugin could somehow see that the theme already declared those classes and avoid redeclaring them. This can cause issues if someone changes themes but since I build all the custom blocks and themes from scratch at work it would be ok.
This is awesome. Just wondering though.. if you have a really big WP website with lots of blog posts then I guess React would not be the best choice as it will build the HTML for ALL the blog posts on render which will mean it takes ages to render the first time..? Fantastic to see modern JS frameworks actually being using with WP though and Tailwind of course, thanks very much for the great content :)
Great resource this - having an issue with the auto reload however. Everything is fine on the VSCODE side however Chrome isn't auto reloading for some reason. Any ideas?
This is super cool! I've added TW to Wp before but this covered a lot of missing details for me; just great thank you! One thing I'm not getting and so hope nobody is thinking this is a dumb question; so here goes... i'm not understanding the point of the boiler plate Block Type Plugin is that just a starting point for you to build other blocks that has TW in it ~ I mean is it just to show how you might use TW in a plugin do I have that right?? I was puzzled at what that was exactly for??
The block type is mainly there just because this boilerplate repo already existed before I added Tailwind (it was using SCSS). Back then, the point of the repo was how to use React on the front-end / public facing portion of your website. In other words, WordPress makes it easy to use React in the admin / Gutenberg editor, and there's tons of documentation, but if you want your actual front-end to use React for a block type there's zero documentation and you have to get creative to make it happen yourself. So since it was in the repo already, why not add a Tailwind version. Also, it shows how you can use nesting and prefixes in Tailwind to prevent your plugin from affecting the styles of the rest of the site / vice versa.
Nice! Let's say I know the basics, and all I want is to add Tailwind to an existing theme I bought so I can overwrite the styles effectively. Can I use your boilerplate for this? No JS, just classes to existing PHP templates.
My boilerplate will have a lot of extra stuff you don't need. In my tailwind-theme folder, you could go into the tailwind.config.js file and only keep the reference to php files, remove the js one. Then, in my package.json file, the only script/task you'd want is the "tailwindwatch" one, and then you'd just need to handle going into the existing theme's functions.php file and enqueuing the new/extra css file located at /build/index.css.
Brad, I've run into a problem. I am using the theme boilerplate with Tailwind and making it a block theme. It appears that having the line add_theme_support('wp-block-styles'); in the functions.php file adds a .editor-style-wrapper class in the block editor and overwrites add_editor_style(build/index.css) file. It odes not do that in the FSE. Any idea on how to fix this?
WordPress updates major changes these days. With the newest version of WP 6.0.2, the theme and plugin work, but as soon as I add the post, single and index.html files. The index continues to work on the frontend but the backend says "This block has encountered an error and cannot be previewed”. The plugin works on the backend, but stops working on the frontend and it's empty on the front end. Perfectly fine on the editor.
Hello! Your video is great! I have a big problem. I did everything as you showed, but after changing the bg color to yellow or anything else, nothing happens. However, it is displayed in devtools textually, but nothing is visible visually. Please help me :(
Hi Brad, longtime student, first time commentor. Your courses helped make me $$, btw best teacher on the web! Anyways, React is working but Tailwind classes don't seem to be chaning the styles, I see the casses being applied ofc but not changing the rendered styles. Any suggestions?
Nice video, thanks! I am looking for a way to use the predefined colors, sizes etc configured in the tailwind.config file to give the user the posiibility to change font and border colors etc. without having to savelist all the required classes. What would be the way to achieve this?
You've shown me a lot of stuff, tailiwind in wp was exactly what i was looking for. I have one issue. Browsersync is not reloading the page, of course rebuilding it's working fine, but i need to manually refresh the page. Any idea? I'm using windows
Suppose we have both custom theme and custom plugin. Is there a way to use the same tailwind config OR we will have to build both theme and plugin separately?
Is there any chance of creating a PHP course just like your WordPress course ? Doing a big project and in the process your are learning about the programming language itself. In udemy most PHP courses are backdated or not that much interesting because your favourite instructors are not making it. Probably everybody thinks that its already dead or people are not interested in PHP anymore. So its kind of good news for a new PHP course cause not everybody is making one and there might be a great chance that your one will be a standalone since it will be a new course and somehow best instructors such as you are not making any courses in PHP anymore!
That's actually one of the course ideas I've been working on organizing lately. It's still very far away from being completed and released, but it is indeed something I'm gradually working on. Glad to know there would be some interest for it!
This Tailwind with ACF image won't show at all: bg-[url()] Has anyone encountered this behavior? This way works but is ugly: style="background-image: url();"
Hello Brad, thank you for sharing your knowledge. :) I extended the tailwind to use PostCss import, prefix etc.. But how can I make the JavaScript to have 2 separate main files: 1 for Gutenberg development, and 1 for the front end of the site, using the same package.json file ? BTW, just finished your Udemy course, I think is the only one that explains how to create Gutenberg blocks with react, well done, and thank you again :)
Thanks! Doesn't my "block-plugin-tailwind" example in the linked GitHub have 2 separate files, 1 for Gutenberg (index.js), and 1 for the front-end (frontend.js)? Or do you mean, how could you have both your own WordPress Theme and your own custom block types all in the same overall folder? In the full WP course I have all of them in one single theme folder, as we build a block theme (2nd to last chapter in the course); essentially, in package.json - when you spell out the "start" task that uses "wp-scripts" you can feed it as many files as you want, instead of just one file. It will handle outputting them to uniquely named files in your "build" or "dist" folder.
@@LearnWebCode Thank you Brad, I wanted to have both block development and front end development in the same folder. I revisited your course and managed to implement it correctly :) Thank you.
wait does wrapping the @tailwindcss bits in a class like that also force this to apply to preflight styles? Because if it did you just solved a major headache for me.
I think the preflight / baseline styles also get wrapped. Here's my example built / final file in the plugin setup that uses the nesting strategy: github.com/LearnWebCode/brads-boilerplate-wordpress/blob/main/brads-boilerplate-block-plugin-tailwind/build/index.css
I'm sorry about that. Udemy only lets instructors create 3 coupons per month for a course. Whenever I post a RU-vid video I go and create new coupons for the courses, but Udemy only lets each coupon last 5 days, which doesn't last for an entire month. I hope Udemy will change that in the future.
I think %27 is the URL encoded version of the single quote character; are there any extra sets of quotes in your package.json script/task area where you spell out your local dev domain?
I'm familiar with undescores, but hadn't seen this Tailwind focused one. I checked it out, but it doesn't look like their starter code comes with React / block types (and connecting the dots between Gutenberg and front-end) all pre-wired and ready to go like my example.
