I would like to ask the author and everyone, what is the best way to modify the theme?

[aboutjquery]

1. Instead of touching html (I mean php) directly, use @apply to @apply some tailwindcss from the existing class

2. Modify html directly and use tailwindcss class, such as flex items-center font-bold

Or is there something better? I tried the above two methods, but it is difficult to avoid the problem of interactive use, that is, I always need to mix the above two methods to use them.

In addition, when I want to use functions.php to add something to the menu, I have to jump to different files to implement styles. This is not what I want to encounter in tailwindcss. My understanding is that tailwindcss allows me to focus on html without the need to frequently jump between html and css

This topic is perfect for me, I just want to find a good way, you have more experience, I want to learn from it

What method would you suggest? If everyone uses mix, under what circumstances would you insist on modifying html, and under what circumstances would you insist on using @apply?

Do you have any themes built by _tw? I'm curious what methods you used to develop it, thank you

[gregsullivan]

Hello again,

You might find this documentation page useful: Styling HTML from outside the theme

I would say my short answer for you is that you should be adding classes to the HTML in your theme files directly 100% of the time. So if you're styling the header or footer or anything along those lines, the intention of the starter theme is for you to add classes to header.php and header-content.php directly.

If you're trying to style the output from WordPress core, a plugin, JavaScript, etc., you will almost certainly want to use one of the methods described in the page linked above. You'll start to get a sense of when a brief run of context switching, e.g., to style a menu generated by wp_nav_menu using @apply, ends up being less work for you than generating the HTML yourself. Similarly, if you're styling output from WooCommerce, you could add all of the WooCommerce templates to your theme and add Tailwind classes to them directly, or you could use @apply in a CSS file. I generally do the latter when I'm not changing the page structure, as you end up forced to maintain every template file you move over, so that approach is not without costs.

Hope that helps!

[aboutjquery]

I am so happy to get a reply from the author. I read Styling HTML from outside the theme, so in the end there will be more than one way to implement the same template? That is, as you said, if it is a general template, just edit html and add tailwindcss class. If it's core/plugins or something like that, try other methods. Did I say I was right?

I was just worried about wp_nav_menu, the walker method was too complicated, I tried the other two, one made me stay in css, and the other just worked directly in the template (but I still moved some functions about wp_nav_menu)

Which way would you recommend to handle wp_nav_menu?

[gregsullivan]

Yes, my goal with that documentation page is really to outline the extent to which you always have different approaches as options.

I don't have a standard recommendation. If the CSS is fairly trivial, I'll move it into the wp_nav_menu arguments as Tailwind classes. If it gets somewhat involved, I might do it in a CSS file.

The main thing I would flag here is that this approach is the exception when working with _tw: Even if you need to work in a CSS file for the menu itself, very little else needs to be done there. The vast majority of my CSS ends up being added via Tailwind classes on any given project.

(And for the record, I also avoid creating custom menu walkers via Walker_Nav_Menu except in the most extreme of cases. I haven't needed to use it in years.)