TailwindCSS 和 Wordpress – 样式插件输出

Question

我正在尝试找出使用 TailwindCSS 进行 WordPress 主题开发的最佳方式。我对设置样式 html 输出的最佳方式感到困惑，您无法像插件一样轻松控制这种方式。或者例如菜单，如何设置项目样式说明 WP 提供了有用的类来设置样式，例如 .current_page_item。

以前我通常会将插件 css 出列，然后使用插件输出的 css 类添加我自己的 css 规则。

我在想我可以使用 tailwinds @apply 功能做类似的事情，使用插件类名将一堆 tailwind 类应用到一个元素。

例如

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

或者在菜单的情况下：

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

这种方法在 Tailwind v1.x 中似乎有点尴尬，因为 @apply 不适用于响应式类变体或伪类变体，但 v2 似乎 @apply 现在可以与这些变体一起使用。

这是一个好的解决方案。其他人是做什么的？

Answer 1

所以，如果我对您的理解正确，您倾向于删除插件的样式并自己重做？而您现在遇到的问题是创建响应式样式（使用 Tailwind CSS）？

如果是这样，您可以执行以下操作：

// 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;
  }
}

当我需要添加悬停、焦点等时，我会这样做：

使用 SCSS 时：

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

使用 CSS 时：

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

我目前正在创建一个（目前是个人的）入门主题，它基于 TailWind CSS 和 AlpinejS，并使用 laravel-mix 设置。

这使得实现以下目标变得更加容易：

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