classed-elements is a utility that simplifies the process of reusing components with Tailwind CSS in SolidJS or React.
This tool is inspired by styled-components and aims to streamline the development of reusable tailwind css components in your SolidJS / React applications.
importclassedfrom"@classed-elements/solidjs";functionHello(props: {class?: string;name: string}){return<pclass={props.class}>Hello {props.name}!</p>;}constWhiteHello=classed(Hello)`text-white`;constWrapper=classed.div`relative w-[200px] h-[100px] bg-blue-500`;exportfunctionApp(){return(<Wrapper><span>App Content</span><Helloname="Github"/><WhiteHelloname="Classed"/></Wrapper>);}In this example, we've created a classed Wrapper component using classed-elements, applying Tailwind CSS classes to it. You can then use the Wrapper component in your SolidJS application as you would with any other component.
In order to support tailwind auto-completion,
you need to add the following content in the vscode configuration file .vscode/settings.json
Reusability: Styled components created with Classed-Elements can be reused across your application, reducing code duplication and improving maintainability.
TypeScript Support: Classed-Elements offers seamless integration with TypeScript, ensuring type safety and enhanced development with static typing.
{ "tailwindCSS.experimental.classRegex": ["classed\\(.+\\)`(.*)`", "classed\\.\\w+`(.*)`"] }