https://github.com/hungtcs/classed-elements
classed-elements is a utility that simplifies the process of reusing components with Tailwind CSS in SolidJS
https://github.com/hungtcs/classed-elements
solidjs tailwindcss
Last synced: 3 months ago
JSON representation
classed-elements is a utility that simplifies the process of reusing components with Tailwind CSS in SolidJS
- Host: GitHub
- URL: https://github.com/hungtcs/classed-elements
- Owner: hungtcs
- Created: 2023-10-13T01:54:41.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-04T14:22:05.000Z (over 2 years ago)
- Last Synced: 2025-06-30T07:05:42.573Z (about 1 year ago)
- Topics: solidjs, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 59.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @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
- [React](./packages/react/README.md)
- [Solidjs](./packages/solidjs/README.md)
## Usage
```tsx
import classed from "@classed-elements/solidjs";
function Hello(props: { class?: string; name: string }) {
return
Hello {props.name}!
;
}
const WhiteHello = classed(Hello)`text-white`;
const Wrapper = classed.div`relative w-[200px] h-[100px] bg-blue-500`;
export function App() {
return (
App Content
);
}
```
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`
```jsonc
{
"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.