virusword.com

Learn Wordpress

Home/Videos/Tailwind CSS + WordPress Theme & Block Type Boilerplate

Tailwind CSS + WordPress Theme & Block Type Boilerplate



Join my premium 2024 bootcamp here https://learnwebcode.teachable.com/p/brads-web-developer-bootcamp?coupon_code=YOUTUBEWELCOME

Here’s how I’m using Tailwind CSS in WordPress themes and blocks.

GitHub link for this video: https://github.com/LearnWebCode/brads-boilerplate-wordpress

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: https://www.instagram.com/javaschiff/
Twitter: https://twitter.com/learnwebcode
Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/
Twitch: https://www.twitch.tv/learnwebcode

source

Reader Interactions

Comments

  1. 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 🙂

  2. 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?

  3. 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.

  4. 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 🙁

  7. Could you make a video on wordpress/scripts Gutenberg block themes (Not Plugin) and serverside, also with Tailwind that would be great. thankyou.

  8. 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

  12. 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?

  14. This Tailwind with ACF image won't show at all: bg-[url(<?php the_field('hero_image'); ?>)] Has anyone encountered this behavior? This way works but is ugly: style="background-image: url(<?php the_field('hero_image'); ?>);"

  15. 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?

  17. 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?

  20. 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!

  21. 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

  22. 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!!

  25. 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.

  26. 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.

  27. 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.

  28. 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?

  30. 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 🙂

  32. 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.

  34. 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!

  37. 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.

  38. 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??

  43. 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.

Explore more

Get our Wordpress Guide Get Plugins Get Connected