正文 

当前位置： 首页 > 知识 >

Tailwind 覆盖了 wordpress 主题样式

     2023-03-07     75

关键词：

【中文标题】Tailwind 覆盖了 wordpress 主题样式【英文标题】：Tailwind overrides wordpress theme styles 【发布时间】：2021-11-07 12:13:36 【问题描述】：

我创建了一个插件并向其中添加了 React（使用 '@wordpress/scripts'）。

我希望能够使用 Tailwind 在网站前端编写代码。 但是当我加载 Tailwind 时，它会覆盖默认主题样式（例如删除列表中的点或链接的下划线）。

我尝试使用 @wordpress/scripts 和 Create React App 来实现 react。 我尝试使用 CDN、Create React App 以及他们文档中介绍的“默认”方式来实现 Tailwind。 结果总是一样的。

我也试过改变css的enqueue的优先级，但还是一样。

所以目标是将 react + Tailwind 代码放在前端（例如通过短代码），而不干扰网站的其余部分（例如默认样式）。

我的密码：

package.json


  "name": "react-styled-admin",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": 
    "@headlessui/react": "^1.4.1",
    "@wordpress/scripts": "^18.0.1",
    "autoprefixer": "^10.3.4",
    "postcss": "^8.3.6",
    "styled-components": "^5.3.1",
    "tailwindcss": "^2.2.15"
  ,
  "scripts": 
    "start": "wp-scripts start",
    "build": "wp-scripts build"

postcss.config.js

module.exports = 
  plugins: 
    tailwindcss: ,
    autoprefixer: ,
  ,
;

tailwind.config.js

module.exports = 
  mode: "jit",
  purge: ["./build/index.css", "./build/index.js"],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],
;

我的主要插件文件

if (!defined('WPINC')) 
    die;


define('PLUGIN_NAME_VERSION', '1.0.0');

class MyPlugin

    function __construct()
    
        add_shortcode('example_react_app', array($this, 'example_react_app'));
        wp_enqueue_script('example-app', plugins_url('build/index.js', __FILE__), array('wp-element'), time(), true);
        wp_enqueue_style('tailwind', plugins_url('build/index.css', __FILE__), array(), '0.1.0', 'all', 10);
    

    function example_react_app($atts = array(), $content = null, $tag = 'example_react_app')
    
        ob_start();
    ?>
        <div id="app">App goes here</div>
        <?php wp_enqueue_script('example-app', plugins_url('build/index.js', __FILE__), array('wp-element'), time(), true); ?>
<?php return ob_get_clean();
    


$myPlugin = new MyPlugin();

谢谢！

【问题讨论】：

【参考方案1】：

这可能是由于顺风飞行前样式。

https://tailwindcss.com/docs/preflight

试着把它放在你的 tailwind.config.js 中

module.exports = 
    corePlugins: 
        preflight: false,

【讨论】：

如何在 wordpress 主题中覆盖以前的样式？

】如何在wordpress主题中覆盖以前的样式？【英文标题】：Howcanioverridepreviousstylinginawordpresstheme?【发布时间】：2018-01-1212:41:34【问题描述】：好的，这就是我要使用的样式.suggestion-taxonomies-product-visibilityspandisplay:inline-block;float:left;p... 查看详情

如何通过wordpress中的functions.php覆盖父主题的公共静态函数？

】如何通过wordpress中的functions.php覆盖父主题的公共静态函数？【英文标题】：Howtooverridepublicstaticfunctionofparentthemethroughfunctions.phpinwordpress?【发布时间】：2020-05-1315:03:55【问题描述】：这是在父主题中声明函数的方式，我想更改... 查看详情

WordPress - 覆盖简码

】WordPress-覆盖简码【英文标题】：WordPress-OverwritingaShortcode【发布时间】：2014-02-1111:44:50【问题描述】：我有一个扩展VisualComposer插件的主题，在首页上有一个滑块。滑块将显示来自五个不同客户的五个推荐。我想将每个推荐的... 查看详情

Tailwind 自定义主题和 @apply 类

】Tailwind自定义主题和@apply类【英文标题】：Tailwindcustomthemesand@applyclasses【发布时间】：2021-12-0615:48:07【问题描述】：我在编译CSS时遇到了一些问题。我在我的index.css文件中创建了3个自定义类，并且还为一些更长的类使用了@apply... 查看详情

如何将主菜单居中对齐？主题 Uncode Child - Wordpress

】如何将主菜单居中对齐？主题UncodeChild-Wordpress【英文标题】：Howtoalignmainmenutocenter?ThemeUncodeChild-Wordpress【发布时间】：2017-08-2512:38:34【问题描述】：我正在使用Uncode主题1.4，但遇到了一个小问题。我的主菜单向左移动27.5像素，... 查看详情

来自 Tailwind 的 theme() 无法识别

】来自Tailwind的theme()无法识别【英文标题】：theme()fromTailwindisnotrecognized【发布时间】：2020-12-0909:48:44【问题描述】：我知道这可能是一个愚蠢的问题，但我无法在任何地方找到答案。我将Tailwind与CRA和CSS模块一起使用。我已将默... 查看详情

样式按顺序加载，但 Bootstrap 仍然覆盖 WordPress 子项

】样式按顺序加载，但Bootstrap仍然覆盖WordPress子项【英文标题】：Stylesloadedinorder,butBootstrapstilloverridesWordPresschild【发布时间】：2018-07-0623:15:10【问题描述】：我创建了一个WordPress子主题，它可以在源代码中正确呈现Bootstrap和child-... 查看详情

在 Angular 中从 Typescript 文件配置 Tailwind 主题

】在Angular中从Typescript文件配置Tailwind主题【英文标题】：ConfiguringTailwindthemefromTypescriptfileinAngular【发布时间】：2022-01-0220:35:32【问题描述】：我想在.ts文件中设置Tailwind主题，以利用在我的Angular服务中键入和重用我的打字稿代... 查看详情

Tailwind CSS：创建自定义类时引用主题颜色

】TailwindCSS：创建自定义类时引用主题颜色【英文标题】：TailwindCSS:ReferencingThemeColorsWhenCreatingCustomClass【发布时间】：2020-10-2221:51:37【问题描述】：我正在尝试修改tailwind.config.js文件以创建一些自定义类。例如，我想创建一个调... 查看详情

为啥 wordpress 会覆盖引导程序？

】为啥wordpress会覆盖引导程序？【英文标题】：whydoeswordpressoverridebootstrap?为什么wordpress会覆盖引导程序？【发布时间】：2021-04-1820:06:46【问题描述】：我正在尝试将使用bootstrap制作的主题放入WordPress。我已将所有样式表排入队... 查看详情

Wordpress 儿童主题问题

】Wordpress儿童主题问题【英文标题】：Wordpresschildthemeissue【发布时间】：2018-10-0715:32:46【问题描述】：我正在为我的Wordpress主题使用自制的子主题。因为我有很多文件，所以我在我的子主题中添加了一些文件夹并更改了functions.ph... 查看详情

wordpress简单好看的线报主题baolog

介绍：WordPress简单好看的线报主题baolog安装说明：到WordPress管理后台中的「外观」-「主题」中点击「添加」，选择baolog的主题包进行上传安装并启用即可。提示：为了防止主题不兼容，请在安装主题前进行数... 查看详情

覆盖默认的wordpress启动(代码片段)

我在root（httpdocs）上安装了wordpress。当我输入域urlwordpress主题加载。一切都好，除了现在我想要加载我的旧静态index.html页面，并且我可以使用直接URI访问wordpress...就像/index.php我想我需要以某种方式修改.htaccess才能使用它？不知... 查看详情

Vue CLI + Tailwind：使用 CSS 变量进行主题化

】VueCLI+Tailwind：使用CSS变量进行主题化【英文标题】：VueCLI+Tailwind:ThemingwithCSSVariables【发布时间】：2021-10-2201:40:15【问题描述】：以下设置按预期工作：yarnserve但是它不会将自定义主题变量添加到生成的CSS文件中：yarnbuild设置：... 查看详情

Wordpress：将主题恢复为默认设置

】Wordpress：将主题恢复为默认设置【英文标题】：Wordpress:Restoringathemetoit\'sdefaultsettings【发布时间】：2016-08-2721:11:08【问题描述】：所以我为我的Wordpress网站安装了“二十四”主题，我想将其更改为默认设置。有了这个，我的意... 查看详情

不显示 wordpress 主题

】不显示wordpress主题【英文标题】：Don\'tshowwordpresstheme【发布时间】：2017-09-0719:24:46【问题描述】：我使用wordpress波斯语。我很早就在wordpress和网站上工作。我在上面安装了主题2014。在服务器中一切正常。但是当我从服务器外... 查看详情

wordpress更换主题空白问题

...发现都不行，后来仔细研究了一下，发现是因为我用的是Wordpress后台管理上传的主题，我到blog文件夹下的theme文件看到更换的主题下面的文件大小全是0，才发现原来用后台上传不上去，不知道后台出了什么问题，然后我把那个... 查看详情

Tailwind：配置配置文件后如何访问默认内容？

】Tailwind：配置配置文件后如何访问默认内容？【英文标题】：Tailwind:Howtoaccessdefaultthingsafterconfiguringtheconfigfile?【发布时间】：2021-01-0521:18:16【问题描述】：为了让用户能够在我的网站中选择他们的配色方案，我在style.css文件中... 查看详情