🦄 Tailwindcss first-class variant API
npm install @patryk_walach/tailwind-variants
The power of Tailwind combined with a first-class variant API.
bash
yarn add tailwind-variants
or
npm i tailwind-variants
`
2. Usage:
`js
import {tv} from "tailwind-variants";
const button = tv({
base: "font-medium bg-blue-500 text-white rounded-full active:opacity-80",
variants: {
color: {
primary: "bg-blue-500 text-white",
secondary: "bg-purple-500 text-white",
},
size: {
sm: "text-sm",
md: "text-base",
lg: "px-4 py-3 text-lg",
},
},
compoundVariants: [
{
size: ["sm", "md"],
class: "px-3 py-1",
},
],
defaultVariants: {
size: "md",
color: "primary",
},
});
return ;
`
3. Responsive variants configuration (optional): If you want to use responsive variants
you need to add the Tailwind Variants wrapper to your TailwindCSS config file tailwind.config.js.
`js
// tailwind.config.js
const {withTV} = require("tailwind-variants/transformer");
/* @type {import('tailwindcss').Config} /
module.exports = withTV({
content: ["./index.html", "./src/*/.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
});
`
If you're using a custom path to import Tailwind variants, such as creating a custom tv instance with createTV, it's recommended to include this path in the transformer configuration:
`js
// tailwind.config.js
const {withTV} = require("tailwind-variants/transformer");
/* @type {import('tailwindcss').Config} /
module.exports = withTV(
{
content: ["./index.html", "./src/*/.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
},
{
aliases: ["@/lib/tv"],
},
);
`
Acknowledgements
- cva (Joe Bell)
This project as started as an extension of Joe's work on cva – a great tool for generating variants for a single element with Tailwind CSS. Big shoutout to Joe Bell and contributors you guys rock! 🤘 - we recommend to use cva if don't need any of the Tailwind Variants features listed here.
- Stitches (Modulz)
The pioneers of the variants` API movement. Inmense thanks to Modulz for their work on Stitches and the community around it. 🙏