Tailwind CSS + WordPress Theme & Block Type Boilerplate
Вставка
- Опубліковано 8 лип 2024
- Join my premium 2024 bootcamp here learnwebcode.teachable.com/p/...
Here's how I'm using Tailwind CSS in WordPress themes and blocks.
GitHub link for this video: github.com/LearnWebCode/brads...
0:00 Intro
0:50 Getting Started
2:06 Theme
4:53 Tailwind Typography Plugin
6:38 Auto Reload
8:16 Block Type Plugin
13:16 Prefix In Tailwind
Follow me for updates on new videos or projects:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode
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!
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!!
I love you teaching Brad, you're the best
This guy is an amazing teacher
Always Good to see you Sir!
Wow, this is a great implementation of Tailwind, thanks!
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.
Please make a video series on woocommerce theme development or a hotel booking system in WordPress.... Thank you for your knowledgeable content
This is awesome Brad, thank you! =)
Thank You Very Much. I Am Grateful For The Hot Reload And TailwindCSS
amazing video, thanks for sharing Brad
Hi Brad,
Thx so much for sharing this, it's a great help!
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.
i love you for this!! thank you😍
love From Bangladesh sir❤️
Outstanding.
Very good video!
BRO THX MEN, AMAZING STUFF ! i had issues with wordpress 6.0.3 , then change to 6.0 and tailwind works without problems ! maybe it helps somebody
Fav Sir ❤️❤️First One ❤️
amazing!
Thanks
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.
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?
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
Thank you so much for the boilerplate, Is it purge the CSS with tailwind?
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.
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?
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?
i have install it 1:1 up to you but the tailwind dont show the changes like background color changes ? anybod can help ?
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 :)
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?
did you manage to solve it? I have this problem too
@@annafeledi7909 I don’t recall this but can follow up with you just allow me sometime to review.
How to use GSAP animation inside custom block with tailwind?
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.
@@LearnWebCode OK great yes, I get it now thank you!! This is good stuff!
very helpful, bro could you make a video on the Lottie file + WordPress
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
Thanks, can we ask for bootstrap one? but not with cdns, bootstrap installed one please.
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.
@@LearnWebCode Thank you so much 🙏🙏
nice. thanks for the video. vite + vue.js video next?
I only know the basics of Vue, so I'm probably not the best Vue teacher, however, the next video on this channel is indeed using Vite 🙂
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
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 :(
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.
Could you make a video on wordpress/scripts Gutenberg block themes (Not Plugin) and serverside, also with Tailwind that would be great. thankyou.
Good tutorial, but there is one issue
Warning ⚠️ from tailwind about nesting.
This issue has discussion on source in CRA
hi brad can you plz do a type script video
well, now I only need Vue and VIte in there :D
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!
He also recently released a Laravel PHP course which is highly recommended.
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();"
I can get the preview script to run. The url has %27 added before and after my domain name.
I am using XAMPP on Windows. Any Idea what is going on.
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?
@@LearnWebCode No. This is the code: "sync": "browser-sync start --proxy 'bbh' --files '**/*.php' 'build/*.js' 'build/*.css'", I am stumped.
@@LearnWebCode I fixed the %27 by putting \ before the quotes and using " (i.e. \"localhost/bbh/\". It spins up the the web site and is now working.
@@garden520 Thanks! You're amazing! 🥳
udemy coupons not working
I'm sorry about that. Udemy only lets instructors create 3 coupons per month for a course. Whenever I post a UA-cam 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.
Ever heard of Underscorestw?
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.
@@LearnWebCode Oh man you're right :D