# tailwindy-components

> A library to improve readability of tailwindcss classes

Latest version **1.0.23** (published 2026-02-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindy-components
pnpm add tailwindy-components
yarn add tailwindy-components
bun add tailwindy-components
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.23 |
| Published | 2026-02-12 |
| First published | 2023-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 39.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Behnam Mohammadi |
| Maintainers | behnammodi |
| Keywords | tailwindcss, tailwindy-components |

## Links

- npm: https://www.npmjs.com/package/tailwindy-components
- Repository: https://github.com/behnammodi/tailwindy-components
- Homepage: https://github.com/behnammodi/tailwindy-components#readme
- Issues: https://github.com/behnammodi/tailwindy-components/issues
- npm.io page: https://npm.io/package/tailwindy-components

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.23 (latest) — 2026-02-12
- 1.0.22 — 2023-03-18
- 1.0.21 — 2023-03-18
- 1.0.20 — 2023-03-18
- 1.0.19 — 2023-03-18
- 1.0.18 — 2023-03-17
- 1.0.17 — 2023-03-17
- 1.0.16 — 2023-03-16
- 1.0.15 — 2023-03-16
- 1.0.14 — 2023-03-16
- 1.0.13 — 2023-03-16
- 1.0.12 — 2023-03-16
- 1.0.11 — 2023-03-16
- 1.0.10 — 2023-03-16
- 1.0.9 — 2023-03-16
- … 12 more at https://npm.io/package/tailwindy-components/versions

## README

<br />
<img src="https://user-images.githubusercontent.com/1549069/225756692-dad51108-8b99-4267-90a1-a8b1bc61afee.svg"  width="40%">

<br />

## 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
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “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.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>
```

We can write something like this:

```jsx
// Card.jsx
<Card>
  <Logo src="/sarah-dayan.jpg" alt="" width="384" height="512" />
  <Container>
    <blockquote>
      <Quote>
      “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.”
      </Quote>
    </blockquote>
    <Caption>
      <Name>Sarah Dayan</Name>
      <Rule>Staff Engineer, Algolia</Rule>
    </Caption>
  </Container>
</Card>
```

```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)

---

<br />
<br />


### 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-]+`

---
_Source: https://npm.io/package/tailwindy-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._