reactjs - 将 Tailwind 添加到自定义 Wordpress Gutenberg React block

Question

我想开始开发自定义 React 组件，以便使用 Gutenberg block 在我的 WordPress 网站上实现。

我已经使用官方create-block设置了一个自定义 block Wordpress 的工具。我还想将 Tailwind 添加到我的 block 中，但我不知道它是如何工作的。我正在设置 Tailwind 并创建配置文件，但是当我运行 npm start 时，样式未应用。

有人知道如何将 Tailwind 与 React Gutenberg block 一起使用吗？

Answer 1

假设您已经有一个遵循 create-block 范例的可用 WP 插件。

Install Tailwind using postcss :

npm I -D tailwindcss postcss autoprefixer
npx tailwind init -p

-p 参数创建一个默认的 postcss 配置，这样就可以了。 Create-post 没有提供。

然后我们编辑 tailwind 配置文件以包含所有 src js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

基本的顺风配置现已准备就绪。

在 src block 中，我们添加 edit.css 或 style.css 并将它们导入到 edit.js 和 中save.js。构建后，每个 css 文件都会生成 index.css 和 style.css，前者加载到编辑器中，后者加载到前端( documentation ) 。每个 css 文件应包含:

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

如果 src 下的单个插件中有多个 block ，我发现如果我们希望 tailwind build 为它们生成类，则所有这些 block 都应该在其 CSS 文件中包含上述语句。

关于构建操作。我发现 webpack 自动加载 postcss 并在正常的 wp-scripts 启动和构建期间生成 tailwind 构建。

无论如何，我使用的是自定义 webpack 配置文件，我还发现它会自动加载(如果存在)。它不包含任何有关 postcss 的内容，我只是为了完整性才发布它。

/** @type {import('webpack').defaultConfig} */
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
const path = require('path');

/** @type {import('webpack').Configuration} */
module.exports = {
    ...defaultConfig,
    output: {
        path: path.resolve(__dirname, '../wordpress/wp-content/plugins/my-plugin/build'),
    },
};

我希望这对您有所帮助。如果我遗漏了任何内容，请告诉我。