Tailwind Blocks

Example plugin demonstrating how to integrate Tailwind with the @wordpress/create-block script. The plugin was scaffolded using @wordpress/create-block and then Tailwind was manually integrated.

Coming soon! Work has started on a custom template for @wordpress/create-block that will create a full block plugin with multiple blocks, each one seamlessly integrated with Tailwind right out of the box.

Usage

Clone the repository and install npm packages.

git clone https://github.com/dgwyer/tailwind-blocks.git
cd tailwind-blocks
npm i

Start the build process in development or do a production build.

npm start or npm run build

Add the plugin to the /wp-content/plugins/ folder of your local WordPress site and activate as normal.

Create a new page and add any of the three example blocks included with the plugin to the editor.

Change the source code in any block. e.g. ./src/block1/edit.js and add Tailwind classes. If you're in development mode then the plugin will automatically recompile JS and CSS including Tailwind styles. Simply refresh the browser to view updates.