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 !