在react 开发中 tailwind elements(只借用样式) 的使用

搭配这个食用 https://www.bilibili.com/video/BV1H3411F7vG

要解决的问题：

想更快速的编写网页组件的样式

怎么解决：

找 使用tailwindcss作为样式库来构建的组件，直接借用。

https://tailwind-elements.com/

tailwind elements

优点:高效，免费，还能随意调整

注意：不使用它JS提供的功能，只借用样式 ，原因如下：

add prefix to tailwind.config.js not work · Issue #1027 · mdbootstrap/Tailwind-Elements · GitHub

针对前缀问题的解决

需要看这个文件

// Import the filesystem module
const fsPromises = require("fs").promises;

/**
 * say there's a string contains things like the example above,
 * this expression will take out everything in the class string.
 *
 */

const reg = /(?<=class=")([^"])*(?="{1})/gi;

function getPrefixedHtml(originalHmtlString, prefix = "tw-") {
  const clearComment = originalHmtlString.replace(/<!--.*>/gi, "");

  /**
   * the result can be used  in your pure html/js component
   */
  const resultForPureHtml = clearComment.replace(reg, (match) => {
    return addPrefix(match);
  });

  function addPrefix(match, prefix = "tw-") {
    let arr = match.split(" ").map((item, idx) => {
      if (item.includes(":")) {
        return item.split(":").join(`:${prefix}`);
      } else {
        if (item === "") {
          return;
        }
        return `${prefix}${item}`;
      }
    });

    return arr.join(" ");
  }
  /**
   * the result can be used  in your pure react component
   */
  const resultForReactProject = resultForPureHtml.replace(
    /class="/gi,
    `className="`
  );

  return { resultForReactProject, resultForPureHtml };
}

fsPromises.readFile("./src/example.txt").then((result) => {
  const data = getPrefixedHtml(result.toString()).resultForReactProject;
  fsPromises.writeFile("./result.txt", data);
});