TailwindCSS and Wordpress – Styling plugin output

Question

I'm trying to figure out the best way of using TailwindCSS for WordPress theme development. I'm confused about the best way to style html output that you don't have easy control over like a plugin. Or for example a menu, how to style item states that WP provides useful classes to style like .current_page_item.

Previously I would typically dequeue plugin css and then add my own css rules applied using the css classes that the plugin outputs.

I was thinking I could do something similar using tailwinds @apply feature to apply a bunch of tailwind classes to an element using the plugins class name.

e.g.

.plugin-btn { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }

or in the case of a menu:

.current_page_item { @apply text-red-500 hover:text-blue-500 }

This method seems a bit awkward with Tailwind v1.x as @apply didn't work with responsive class variants or pseudo class variants but v2 it seems @apply does work with these now.

Is this a good solution. What do other people do?

Humpff Humpff · Accepted Answer · 2020-11-26T12:25:05

So if I understand you correctly, you tend to remove the styling of plugins & redo it your self? And the problem you have now is to create the responsive styling (using Tailwind CSS)?

If that's the case you could do something like:

// This would be the default style from a mobile-first perspective
.plugin-name {
  @apply w-full;
} 

// This would be the style from a MD perspective (I think iPad devices and up?)
@screen md {
  .plugin-name {
    @apply w-1/2;
  }
}

When I need to add hover, focus etc I do it like:

When using SCSS:

.item-class-name {
  @apply text-black ...;
  
  &:hover {
   @apply text-white bg-black;
  }
}

When using CSS:

.item-class-name {
  @apply text-black ...;
}
.item-class-name::hover {
  @apply text-white bg-black;
}

I'm currently creating a (personal for now) starter theme which is built on TailWind CSS & AlpinejS, and using the laravel-mix setup.

This makes it easier to achieve something like:

// app.scss file in which I add the tailwind components
@tailwind base;
@tailwind components;
@tailwind utilities;

// Additional scss files are divided in components folder
@import './components';
// You could add a 'plugins' file like 
@import './plugins';

// In the plugins file you would import all the plugin related styling files...if that makes sense.

TailwindCSS and Wordpress – Styling plugin output

1 Answers