Tailwind 覆盖了 wordpress 主题样式

Posted 2023-03-07

【中文标题】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,