Installation

WordPress dependencies

For this library to work, you’ll need to install the following in your WordPress site:

• WPGraphQL
• WPGraphQL Blocks (v2+)

These plugins allow WordPress data to be queried via GraphQL.

@wp-block-tools/styles

Next you need to install the @wp-block-tools/styles library.

npm i @wp-block-tools/styles

Tailwind CSS

The @wp-block-tools/styles library uses tailwind css therefore tailwind css needs to be installed in your project. Check the tailwind css installation instructions for the framework you’re using.

Once tailwind css has been set up, an entry needs to be added to the content array of tailwind.config.* so tailwind css knows about @wp-block-tools/styles:

// tailwind.config.*
module.exports = {
  content: ["**/@wp-block-tools/styles/**/*.js"],
  theme: {
    extend: {},
  },
  plugins: [],
};