1.0.22 • Published 1 year ago
tailwindy-components v1.0.22
tailwindy-components
tailwindy-components
is a utility library that provides a way to create tailwindcss classes using tagged templates.
Install
To install tailwindy-components
, you can use the following command:
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:
<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:
// 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>
// 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
`;
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.
1.0.22
1 year ago
1.0.21
1 year ago
1.0.20
1 year ago
1.0.19
1 year ago
1.0.18
1 year ago
1.0.17
1 year ago
1.0.16
1 year ago
1.0.15
1 year ago
1.0.14
1 year ago
1.0.13
1 year ago
1.0.12
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago
1.0.0-2
1 year ago
1.0.0-1
1 year ago
1.0.0-0
1 year ago