0

I created a plugin and added React to it (with '@wordpress/scripts').

I want to be able to use Tailwind to write code on the front end of the website. But when I load Tailwind it overrides default theme styles (like removing dots in lists, or underlines of links).

I tried implementing react using @wordpress/scripts and Create React App. And I tried to implement Tailwind with : CDN, Create React App and the 'default' way of doing it presented in their documentation. The results are always the same.

I also tried to change the priority of the enqueue of the css but it is the same.

So the goal is to put react + Tailwind code on the front end (via a shortcode for example) without interfering with the rest of the website (default styles for example).

MY CODE :

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: [],
};

My main plugin file

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

Thanks !

Devofa
  • 3
  • 3

1 Answers1

1

This is likely due to the tailwind preflight styles.

https://tailwindcss.com/docs/preflight

Try putting this in your tailwind.config.js

module.exports = {
    corePlugins: {
        preflight: false,
    }
}
NaCl-e
  • 26
  • 3