WordPress Plugin with React and Tailwind CSS

Step-by-Step Setup for WordPress Plugin with React and Tailwind CSS

Step 1: Plugin Directory Setup

Create a new directory for your plugin inside the wp-content/plugins folder called react-setup:

wp-content/plugins/react-setup

Step 2: Initialize Composer & npm

Inside your react-setup directory, initialize composer and npm:

composer init
npm init -y


Note: Here every section you need to press enter and enter.

Step 3: Install Required Packages

Install the necessary WordPress scripts and Tailwind CSS packages:

npm install @wordpress/scripts --save-dev
npm install tailwindcss postcss autoprefixer --save-dev

Step 4: Add Tailwind Configuration

Initialize Tailwind configuration:

npx tailwindcss init

This will create a tailwind.config.js file in the root of your plugin folder. Inside tailwind.config.js, specify the paths to all your template files so that Tailwind can purge unused styles in production.

module.exports = {
  purge: ['./src/**/*.{js,jsx}', './templates/**/*.php'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Step 5: Update package.json

In your package.json, adjust your scripts section as follows to make use of Tailwind and WordPress scripts:

{
  "name": "react-setup",
  "version": "1.0.0",
  "description": "A simple WordPress plugin using React and Tailwind CSS",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build && postcss src/style/main.css -o build/index.css",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^22.5.0",
    "tailwindcss": "^3.0.0",
    "postcss": "^8.0.0",
    "autoprefixer": "^10.0.0"
  }
}

Step 6: Webpack Configuration

Create a webpack.config.js to ensure that React is loaded as an external dependency to avoid conflicts with other React versions on the page:

const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaultConfig,
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    '@wordpress/element': ['wp', 'element'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'], // Ensure this order
      },
    ],
  },
  devtool: 'source-map', // For source maps during debugging
};

Step 7: Tailwind and PostCSS Configuration

In the root of your plugin, create a postcss.config.js file to add Tailwind as a PostCSS plugin:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Step 8: Create Styles

In your src/style directory, create a file main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

This will ensure Tailwind’s styles are compiled.

Step 9: Install Missing style-loader

You need to install the style-loader package, which is responsible for injecting CSS into the DOM via <style> tags.

Run the following command to install style-loader along with css-loader:

npm install style-loader css-loader --save-dev

Step 10: Plugin Main File – react-setup.php

Create the main plugin file react-setup.php in the root of your plugin directory:

<?php
/**
 * Plugin Name:       React Setup
 * Description:       A simple WordPress plugin using React and Tailwind CSS.
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           1.0.0
 * Author:            Your Name
 * License:           GPL-2.0-or-later
 */

// Hook into the admin menu
add_action( 'admin_menu', 'react_setup_init_menu' );

/**
 * Add Admin Menu.
 */
function react_setup_init_menu() {
    add_menu_page(
        __( 'React Setup', 'react-setup' ),
        __( 'React Setup', 'react-setup' ),
        'manage_options',
        'react-setup',
        'react_setup_admin_page',
        'dashicons-admin-site',
        20
    );
}

/**
 * Admin Page HTML Output.
 */
function react_setup_admin_page() {
    echo '<div id="react-setup-app"><h2>Loading...</h2></div>';
}

/**
 * Enqueue Scripts and Styles.
 */
add_action( 'admin_enqueue_scripts', 'react_setup_enqueue_assets' );
function react_setup_enqueue_assets() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style(
        'react-setup-style',
        $plugin_url . 'build/index.css',
        array(),
        '1.0.0'
    );

    wp_enqueue_script(
        'react-setup-script',
        $plugin_url . 'build/index.js',
        array( 'wp-element' ), // Ensure 'wp-element' is loaded to support React
        '1.0.0',
        true // Load script in the footer
    );
}

Step 11: React Component Structure

1. src/index.js:

import React from 'react';
import { render } from '@wordpress/element';
import App from './App';
import './style/main.css';  // Import Tailwind's compiled CSS

// Render the App component into the DOM
render(<App />, document.getElementById('react-setup-app'));

src/App.js:

import React from 'react';
import Dashboard from './components/Dashboard';

const App = () => {
    return (
        <div>
            <h2 className="text-2xl font-bold">React Setup Plugin</h2>
            <hr className="my-4" />
            <Dashboard />
        </div>
    );
};

export default App;

src/components/Dashboard.jsx:

import React from 'react';

const Dashboard = () => {
    return (
        <div className="p-4 bg-green-800 rounded shadow-md">
            <h3 className="text-xl font-bold">Dashboard</h3>
            <p>Edit the Dashboard component in <code>src/components/Dashboard.jsx</code></p>
        </div>
    );
};

export default Dashboard;

Step 12: Build & Start the Development Server

Run the following command to compile your React code and styles:

npm start

To build the final production version, use:

npm run build

Note: You need to run this “npm run build” command every time after any modification. And this is github link https://github.com/RIKO910/react-tailwind-wordpress-plugin