TailwindVariants (tailwind_variants v0.1.0)
View SourceProvides a variant system for TailwindCSS in Elixir applications.
This library allows you to create components with variants, slots, and more, similar to the JavaScript tailwind-variants library.
Summary
Functions
Applies props to a component to generate class names.
Creates a tailwind-variants component with the given options.
Returns a map of all available variants and their possible values for a component. Useful for generating documentation or validation.
Functions
Applies props to a component to generate class names.
Parameters
component- A component created withtv/1props- A map of props to apply to the component
Returns
- A string of class names (if no slots are defined)
- A map of slot functions (if slots are defined)
Examples
iex> component = tv(%{base: "font-medium text-white"})
iex> class_list(component)
"font-medium text-white"
iex> component = tv(%{
...> base: "font-medium",
...> variants: %{
...> color: %{
...> primary: "bg-blue-500",
...> secondary: "bg-purple-500"
...> }
...> }
...> })
iex> class_list(component, %{color: "primary"})
"font-medium bg-blue-500"Creates a tailwind-variants component with the given options.
Options
:base- Base classes for the component:slots- Map of slot names to their classes:variants- Map of variant names to their values:default_variants- Map of variant names to their default values:compound_variants- List of compound variants:compound_slots- List of compound slots:extend- Another component to extend:config- Configuration options
Examples
iex> component = tv(%{base: "font-medium text-white"})
iex> component.base
"font-medium text-white"
iex> component = tv(%{
...> base: "font-medium text-white",
...> variants: %{
...> color: %{
...> primary: "bg-blue-500",
...> secondary: "bg-purple-500"
...> }
...> }
...> })
iex> component.variants.color.primary
"bg-blue-500"See class_list/2.
Returns a map of all available variants and their possible values for a component. Useful for generating documentation or validation.
Example
iex> button = tv(%{variants: %{color: %{primary: "", secondary: ""}}})
iex> variant_options(button)
%{color: [:primary, :secondary]}