Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/behnammodi/tailwindy-components
A library to improve readability of tailwindcss classes
https://github.com/behnammodi/tailwindy-components
tailwindcss
Last synced: about 1 month ago
JSON representation
A library to improve readability of tailwindcss classes
- Host: GitHub
- URL: https://github.com/behnammodi/tailwindy-components
- Owner: behnammodi
- License: mit
- Created: 2023-03-16T11:42:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-03-18T21:02:57.000Z (over 1 year ago)
- Last Synced: 2024-04-14T04:03:54.072Z (7 months ago)
- Topics: tailwindcss
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tailwindy-components
- Size: 146 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## tailwindy-components
`tailwindy-components` is a utility library that provides a way to create [tailwindcss](https://tailwindcss.com/) classes using tagged templates.
### Install
To install `tailwindy-components`, you can use the following command:
```bash
npm install tailwindy-components
or
yarn add tailwindy-components
```
Keep in mind that tailwindy-components requires `React` to be installed as peer dependency.
## Example:
Instead of this code:
```jsx
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
Sarah Dayan
Staff Engineer, Algolia
```
We can write something like this:
```jsx
// Card.jsx
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
Sarah Dayan
Staff Engineer, Algolia
```
```js
// styles.js
import tailwindy from 'tailwindy-components';
export const Card = tailwindy.figure`
md:flex
bg-slate-100
rounded-xl
p-8
md:p-0
dark:bg-slate-800
`;
export const Logo = tailwindy.img`
w-24
h-24
md:w-48
md:h-auto
md:rounded-none
rounded-full
mx-auto
`;
export const Container = tailwindy.div`
pt-6
md:p-8
text-center
md:text-left
space-y-4
`;
export const Quote = tailwindy.p`
text-lg
font-medium
`;
export const Caption = tailwindy.figcaption`
font-medium
`;
export const Name = tailwindy.div`
text-sky-500
dark:text-sky-400
`;
export const Rule = tailwindy.div`
text-slate-700
dark:text-slate-500
`;
```
[Edit on Codesandbox](https://codesandbox.io/s/tailwindy-example-1-ezzokr)
---
tailwindy-components
```
A library to improve readability of tailwindcss classes
```
tailwindcss:
```
A utility-first CSS framework packed with classes
like flex, pt-4, text-center and rotate-90 that can be
composed to build any design, directly in your markup.
```