Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/berzanorg/tailt
⚡ ⚛️ Create blazingly fast custom React components
https://github.com/berzanorg/tailt
react reactjs tailt tailwind tailwindcss
Last synced: about 1 month ago
JSON representation
⚡ ⚛️ Create blazingly fast custom React components
- Host: GitHub
- URL: https://github.com/berzanorg/tailt
- Owner: berzanorg
- License: mit
- Created: 2022-06-09T05:53:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-06-24T08:35:04.000Z (over 2 years ago)
- Last Synced: 2024-05-16T08:15:43.350Z (7 months ago)
- Topics: react, reactjs, tailt, tailwind, tailwindcss
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tailt
- Size: 21.5 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazingly-fast - tailt - ⚡ ⚛️ Create blazingly fast custom React components (TypeScript)
README
# tailt
⚡ ⚛️ Create blazingly fast custom React components
Let's create a customized `button` component.
```jsx
const MyButton = tailt.button`
bg-blue-500
`
```
Voila! Now, use it like a component.
```jsx
Hello
```
Let's add an onClick attribute.
```jsx
Hello
```
- Tailt supports all HTML element attributes.
- So, you can add them as like as props.
> The library requires TailwindCSS to be installed.
## Installation
#### NPM
```
npm i tailt
```
#### Yarn
```
yarn add tailt
```
## Docs
#### Supported HTML elements
- `a`
- `article`
- `button`
- `div`
- `form`
- `footer`
- `h1`
- `h2`
- `h3`
- `h4`
- `h5`
- `h6`
- `header`
- `input`
- `label`
- `li`
- `main`
- `nav`
- `p`
- `section`
- `span`
- `text-area`
- `ul`
## Building
#### Installing all dependencies
```
yarn
```
#### Compiling TypeScript
```
yarn tsc
```
## Notes
If you find a bug or want an improvement, please create a pull request.
Made with ❤️ by `@BerzanXYZ`