TailwindCSS 和 Wordpress – 样式插件输出

Posted 2023-03-06

【中文标题】TailwindCSS 和 Wordpress – 样式插件输出

【英文标题】：TailwindCSS and Wordpress – Styling plugin output

【发布时间】：2021-03-09 06:56:22

【问题描述】：

我正在尝试找出使用 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 现在可以与这些变体一起使用。

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

【参考方案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.

【讨论】：

谢谢。我有一个类似的 app.css 设置。实际上不需要使用“@screen md”，因为 '"md:w-1/2" 在 Tailwind 2 中与 @apply 一起使用。但是是的，这基本上就是我正在做的事情，我只是想检查其他人在做什么。这似乎并不完美，因为您需要重新使用 css 文件，而且您必须反复编译 Tailwind，这对我来说有点慢。您如何设置菜单样式？

啊，是的，我还没有切换到 v2，等我完成这个主题后再去。

不确定我是否有设置菜单样式的最佳设置，但我基本上使用的是自定义菜单（因为我想在菜单中包含 AlpineJS 函数）将其设置为：puu.sh/GRtuH/50963e5f05.png 不确定您是否看过此视频，但 Adam Wathan 谈到了“Tailwind CSS 最佳实践模式”。他讨论了很多有趣的观点。视频：youtube.com/watch?v=J_7_mnFSLDg

谢谢，不错的视频就是我想到使用@apply 的地方。我将它与 postcss-nested 一起使用，以完全按照他的 markdown 示例设置插件组件的样式。正如我所说，我对这个设置的最大问题是编译 Tailwind 需要 7 秒，所以以这种方式开发很尴尬。 Tailwind 2 似乎比 1 慢很多：/。

真的，天哪，我可能很快就会做出这种转变。我不花 7s 但编译 xD 仍然很高