Integrating Tailwind CSS into your WordPress block development workflow using wp-scripts can significantly improve your development experience. This guide will walk you through setting up Tailwind CSS, configuring package.json, and ensuring the styles load properly in the WordPress editor.

Step 1: Install Tailwind CSS

First, navigate to your project folder in the terminal. Now, install Tailwind CSS and necessary dependencies using the following command:

npm install -D @tailwindcss/cli tailwindcss npm-run-all

This installs:

• @tailwindcss/cli – Tailwind’s standalone CLI tool.
• tailwindcss – Core Tailwind CSS framework.
• npm-run-all – A utility to run multiple npm scripts in parallel or sequentially.

Step 2: Configure package.json Scripts

Open your package.json file and add the following scripts under the scripts section:

"scripts": {
    "tailwindbuild": "tailwindcss -i ./src/index.css -o ./build/index.css",
    "tailwindwatch": "tailwindcss -i ./src/index.css -o ./build/index.css --watch"
}
    

These scripts allow you to:

• tailwindbuild: Generate the final index.css file.
• tailwindwatch: Watch for file changes and rebuild styles automatically.

Step 3: Create the Tailwind CSS File

Inside your project’s src folder, create a new file named index.css and add the following content:

@import "tailwindcss";
/*body {
    font-family: Arial, Helvetica, sans-serif;
}*/
    

This imports Tailwind’s base styles into your project.

Step 4: Start the Tailwind CSS Build Process

Run the following command in your terminal to watch for file changes:

npm run tailwindwatch

This will generate a build/index.css file and update it whenever changes occur in your src/index.css file.

Step 5: Modify Build Scripts for WordPress Block Development

Every time npm run start runs, it creates a new build folder and deletes the old one. To ensure index.css remains in the build folder, modify the scripts in package.json as follows:

"scripts": {
    "wpstart": "wp-scripts start",
    "buildwp": "wp-scripts build",
    "build": "npm-run-all --sequential buildwp tailwindbuild",
    "start": "npm-run-all --parallel wpstart tailwindwatch",
    "tailwindbuild": "tailwindcss -i ./src/index.css -o ./build/index.css",
    "tailwindwatch": "tailwindcss -i ./src/index.css -o ./build/index.css --watch"
}
    

These modifications ensure:

• wpstart: Runs the WordPress block development environment.
• buildwp: Builds the WordPress block.
• build: Runs buildwp and tailwindbuild sequentially.
• start: Runs both wpstart and tailwindwatch in parallel.

Step 6: Enqueue Tailwind CSS in WordPress Editor

To load the generated CSS file in the WordPress editor, add the following function to your plugin:

/**
 * Enqueue the generated CSS in the WordPress editor.
 */
function example_project_enqueue_editor_assets() {
    if (!file_exists(plugin_dir_path(__FILE__) . 'build/index.css')) {
        return;
    }

    wp_enqueue_style(
        'example-editor-style',
        plugins_url('build/index.css', __FILE__),
        array()
    );
}
add_action('enqueue_block_editor_assets', 'example_project_enqueue_editor_assets');
    

This function checks if build/index.css exists and enqueues it in the WordPress block editor.

Step 7: Verify Everything Works

Now, test your setup:

1. Run npm run start to start the development server.
2. Modify src/index.css and check if styles update in build/index.css.
3. Open the WordPress editor and verify that Tailwind styles apply to your custom blocks.

Conclusion

By following this guide, you have successfully:

• Installed and configured Tailwind CSS with WordPress block development.
• Set up package.json scripts to manage builds efficiently.
• Enqueued Tailwind styles in the WordPress editor.

Now you can use Tailwind’s utility classes in your custom Gutenberg blocks for a modern, responsive WordPress experience! 🎉

Tags: wp-scripts

Categorised in: Wordpress