在react 开发中 tailwind elements(只借用样式) 的使用
要解决的问题:
想更快速的编写网页组件的样式
怎么解决:
找 使用tailwindcss作为样式库来构建的组件,直接借用。
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);
});