0

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

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

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

我还尝试更改 css 队列的优先级，但它是相同的。

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

我的代码：

包.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();

谢谢 ！

4

1 回答 1

1

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

https://tailwindcss.com/docs/preflight

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

module.exports = {
    corePlugins: {
        preflight: false,
    }
}
于 2021-09-15T15:55:22.753 回答