Tailwind 覆盖 wordpress 主题样式

Question

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

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

我尝试使用@wordpress/scripts 实现 React 并创建 React App。我尝试通过以下方式实现 Tailwind：CDN、Create React App 以及在他们的文档中介绍的 'default' 方法。结果总是一样的。

我也试过改变 css 队列的优先级，但它是一样的。

所以目标是将 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();

谢谢！

Answer 1

这可能是由于顺风预检样式所致。

https://tailwindcss.com/docs/preflight

尝试将其放入您的 tailwind.config.js

module.exports = {
    corePlugins: {
        preflight: false,
    }
}

Tailwind 覆盖 wordpress 主题样式

Tailwind overrides wordpress theme styles

wordpress

reactjs

tailwind-css

tailwind-in-js