简化 Solidjs 和 Tailwind CSS 组件重用

在之前使用 React 和 styled-components 的开发模式中，经常会需要创建一些纯样式组件，比如

const Wrapper = styled.div`
    display: flex;
    position: relative;
`;

这些组件并不包含任何逻辑，仅仅是应用了一些样式。

在使用 solidjs 和 tailwwindcss 时，我们也会有此类需求，在组件复用次数较多时，需要重复编写大量的 class，为了简化这个过程，我编写了一个小工具，使用方法如下：

import classed from "classed-elements";

const Wrapper = classed.div`relative w-[100px] h-[100px] bg-blue-500`;

export function App() {
  return <Wrapper>App Content</Wrapper>;
}

上面的代码中，使用 classed.div 方法创建了一个名为 Wrapper 的组件，它包含一些预定义的 class，这个实现的灵感来源于 styled-components。

另外，VSCode 的 Tailwind CSS IntelliSense 插件为 TailwindCSS 提供了自动补全和提示功能，为了让 classed 支持此功能，需要在项目下新建 vscode 配置文件 .vscode/settings.json 并添加以下内容

{
  "tailwindCSS.experimental.classRegex": [
    "classed\\(.+\\)`(.*)`",
    "classed\\.\\w+`(.*)`"
  ]
}

现在，代码提示就生效了

Github仓库：https://github.com/hungtcs/classed-elements