https://github.com/behnammodi/tailwindy-components
A library to improve readability of tailwindcss classes
https://github.com/behnammodi/tailwindy-components
tailwindcss
Last synced: about 2 months 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 (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-18T21:02:57.000Z (about 3 years ago)
- Last Synced: 2024-04-14T04:03:54.072Z (about 2 years 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 to improve readability of tailwindcss classes
### 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 a 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)
---
### IDE Autosuggestion
To have autosuggestion, you need to set `classFunctions`
```json
{
"tailwindCSS.classFunctions": ["tailwindy\\.[a-z-]+"]
}
```
For VS Code, install the Tailwind Extension from [here](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) and set the class functions to: `tailwindy\.[a-z-]+`