0.2.1 • Published 2 years ago

tailwind-variants v0.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Features

  • First-class variant API
  • Responsive variants
  • Slots support
  • Composition support
  • Fully typed
  • Framework agnostic
  • Automatic conflict resolution

Documentation

For full documentation, visit tailwind-variants.org

Quick Start

  1. Installation: To use Tailwind Variants in your project, you can install it as a dependency:
yarn add tailwind-variants
# or
npm i tailwind-variants
  1. Usage:
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 (
  <button className={button({ size: 'sm', color: 'secondary' })}>Click me</button>
)
  1. 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.
// 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:

// 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. 🙏

Community

We're excited to see the community adopt NextUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

Contributing

Contributions are always welcome!

Please follow our contributing guidelines.

Please adhere to this project's CODE_OF_CONDUCT.

Authors

License

Licensed under the MIT License.

See LICENSE for more information.

@namcchan/theme@thisisclicktest/ktnext-microsite-reactsxtd-ui-theme@everything-registry/sub-chunk-2874@universekit/themessrmg-ui-component-library-testtiox-ds@anrivera/component-library-packagetw-material3-react@angular-neo/elementsbwsoft-ui-components@typeweave/theme@zoobzio/foundation@zoobzio/uitailwind-variants-issuetera-system-uisvltktsvolwhitenose-projecttechno-chat-aitechno-chat-ai-assistanttechnoverce-chat-ai-assistantstokit-dsteste-ex-libsvelte-5-ui-libthick3-uivite-build-issuevody-corevitepress-theme-snowawal-ui@bwsoft/alert@rosnga/theme@rdsaude/pulso-react-components@root-sphere/root-ui@teacoder/ui@webstudiou/uijobseeker-ui-devionia-uihue-conductoriforth-uiians-walletics-ui-kithztl-designgss-uiharmony-dshp-mr-componentshevel-uihokuiheimparkuiinteractive-story-editorinsight-huntlexical-svelte-runeslib-enstallliza-uikunkun-ext-disk-speedkunkun-ext-jsonkunkun-ext-jwtkunkun-ext-qrcodekunkun-ext-speech-to-textkunkun-ext-sqlite-browserkunkun-ext-system-infokunkun-ext-video-processingkunkun-ext-image-processingmember-pluginmemberssssmayumi@wesp-up/ui@webstudiou/core@wtraore/ui@wrkwrk/svelte@uiinspire/badge@uiinspire/theme@ugrc/utah-design-system@typeweave/react@thrive-square/theme@ui-bookwise/tailwind-config@tuiuiu-ui/react@trsys-tech/matrix-library@tw-material/theme@tokenbase/hct-color-picker@trail-ui/theme@thanosui/react@tricoteuses/explorer-tools@vikram-components/mobius-component@uoguelph/react-components@unvr/ui@unvr/utils@unvrjs/themes@unvrjs/ui@utima/ui@utima/ui-informed@v0xoss/theme@wabosh/cookie-consent@use-morph/components@var-meta/ui@yawnxyz/playground@you-got-bud/calendar@tera-ui/themeamigo-platform-react-library@zougui/react.ui
0.2.1

2 years ago

0.2.0

2 years ago

0.1.20

2 years ago

0.1.19

2 years ago

0.1.15

2 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.18

2 years ago

0.1.10

2 years ago

0.1.11

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.9

2 years ago

0.1.6

2 years ago

0.0.20

3 years ago

0.0.21

3 years ago

0.0.22

3 years ago

0.0.23

3 years ago

0.0.24

3 years ago

0.0.25

3 years ago

0.0.17-dev.1

3 years ago

0.0.15

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.0.30

3 years ago

0.0.31

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.1.0

3 years ago

0.1.2

3 years ago

0.0.3

3 years ago

0.1.1

3 years ago

0.0.2

3 years ago

0.0.26

3 years ago

0.0.9

3 years ago

0.0.27

3 years ago

0.0.8

3 years ago

0.0.28

3 years ago

0.0.29

3 years ago

0.1.4

2 years ago

0.0.5

3 years ago

0.1.3

2 years ago

0.0.4

3 years ago

0.0.7

3 years ago

0.1.5

2 years ago

0.0.6

3 years ago

0.0.1

3 years ago