Skip to content

classed-elements is a utility that simplifies the process of reusing components with Tailwind CSS in SolidJS

Notifications You must be signed in to change notification settings

hungtcs/classed-elements

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@classed-elements/{react/solidjs}

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.

Installation

Usage

import classed from "@classed-elements/solidjs";

function Hello(props: { class?: string; name: string }) {
  return <p class={props.class}>Hello {props.name}!</p>;
}

const WhiteHello = classed(Hello)`text-white`;

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

export function App() {
  return (
    <Wrapper>
      <span>App Content</span>
      <Hello name="Github" />
      <WhiteHello name="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.

Working With Tailwind CSS IntelliSense

In order to support tailwind auto-completion, you need to add the following content in the vscode configuration file .vscode/settings.json

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

Features

  • 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.

About

classed-elements is a utility that simplifies the process of reusing components with Tailwind CSS in SolidJS

Topics

Resources

Stars

Watchers

Forks