tix


Styles your React components with TailwindCSS classes, and define variant properties without fighting huge & long classnames.

!Tix What

Preview Simple Usecase

This is simple sample for styles button html tag. tix can do more complex cases than below.

Playground click below: \

``jsx
/**
* First, create our Button Component with tix.
* file: TixButton.tsx
*/
import { tix, tw } from "./tix"; // Please read the document Configuration

export const TixButton = tix({
base: twtext-base font-bold border rounded inline-flex items-center px-8 py-3,
variants: {
// variant can be object
kind: {
primary: twtext-white bg-primary
hover:shadow-light,
secondary: twtext-secondary border-secondary bg-light
hover:bg-neutral-200,
text: twtext-sm font-semibold text-neutral-400 border-none bg-none rounded-none px-0
hover:text-primary,
link: twtext-primary border-b-2 border-transparent rounded-none px-0 py-0 pb-1
hover:border-b-2 hover:border-b-primary
},
// variant can be string
noPadding: twp-0,
// variant can be function
isDisabled: (disabled: boolean, stylesOf) => {
const { kind, noPadding } = stylesOf(TixButton); // get other variant's values

if (disabled && kind === "primary") {
return twbg-gray hover:shadow-none;
}

// any styling logic...

return tw;
}
},
defaults: { // defaults has full support typescript base on variants type.
kind: "primary", // keyof kind obj => "primary" | "secondary" | "text" | "link"
noPadding: false, // string => true | false
isDisabled: false // disabled type declaration = boolean in func isDisabled => true | false
}
}, / Element to applying styles / "button" / Element extends ElementType /)


/**
* Later, use created TixButton in App or anywhere you want.
* file: App.tsx
*/
import React, { FC } from "react";
import { TixButton } from "./TixButton"

const App: FC = () => {
const handleHelloTix = () => { alert("Hello Tix!"); };

return (

)
}
`

Features

Extends Component & Custom Props
`jsx
/**
* First, create our extended TixButton with User's Props.
* file: TixButtonCustomProps.tsx
*/
import { useState, useEffect } from "react";
import { tix, withProps, tw } from "./tix"; // Please read the document Configuration
import { TixButton } from "./TixButton";

// Define CustomProps type
interface CustomProps {
initCount: number;
onChangeCount: (val: number) => void;
}

// Declare CustomProps using withProps helper
export const TixButtonCustomProps = withProps(tix)(
{
name: "ButtonCustomProps",
base: TixButton.config.base,
variants: {
...TixButton.config.variants, // copy variants from TixButton
kind: {
primary: twbg-red-500 text-white, // override primary styles
},
},
defaults: TixButton.config.defaults
},
TixButton, // default under element as TixButton
(styled) => (_props, ref) => {
const [El, { initCount, onChangeCount, ...props }] = styled(_props);
const [count, setCount] = useState(initCount); // get custom prop value

useEffect(() => {
count && onChangeCount(count);
}, [count, onChangeCount]);

return setCount(count + 1)} />;
}
);

/**
* file: App.tsx
*/
import React, { FC } from "react";
import { TixButtonWithProps } from "./TixButtonWithProps"

const App: FC = () => {
return (

)
}
`
Polymorphic Component & Refs/useRef

Sample use tix with react-aria
`jsx
/**
* file: TixButtonA11Y.tsx
*/
import { useRef } from "react";

import { useButton, AriaButtonProps } from "react-aria"; // Import "react-aria"

import { tix, withProps, xrefs, compareAsEl, propsOf } from "./tix";
import { TixButton } from "./TixButton";

// Declare aria's AriaButtonProps using withProps helper
export const TixButtonA11Y = withProps(tix)(
{
name: "TixButtonA11Y",
variants: {},
},
TixButton, // reuse TixButton
(styled) => (_props, ref) => {
const [El, props] = styled(_props);

// useButton by react-aria
const ariaRef = useRef(null);
const { buttonProps, isPressed } = useButton(props, ariaRef);

// Polymorpic check 'as' prop value and casts El type
const [AsA, refA] = compareAsEl("a", El, ref);
// If as = 'a' == true, do something...
if (AsA) {
console.warn(
"This component may not working correct with prop 'as' = 'a'."
);
return (

This component may not working with prop 'as' = 'a'.

);
}

// Return El with combined refs with tix xrefs helper
return (
ref={xrefs<"button">([ref, ariaRef])}
{...{ ...props, ...buttonProps }}
>
);
}
);


/**
* file: App.tsx
*/
import React, { FC } from "react";
import { TixButtonWithProps } from "./TixButtonWithProps"

const App: FC = () => {
const handleHelloTix = () => { alert("Hello Tix!"); };

return (

)
}
`

Sample use tix to define generic items type & overrides props
`jsx
import React from "react";
import * as nui from "@nextui-org/react";

import { tix, tw, withProps, xrefs, PolymorphicTixProps, PropsOverrides } from "@/libs/tix";
import { Overrides } from "@/libs/types";

interface Item {
id: number;
text: string;
}

export interface AutocompleteProps {
items: T[];
renderItem: (item: T) => React.ReactNode;
children?: never;
}

const AutocompleteInner = withProps>(tix)(
{
name: "Autocomplete",
base: twrounded-2xl bg-white font-inter,
variants: {},
},
nui.Autocomplete,
(styled) => (props, ref) => {
const [, { items, renderItem, ...rest }] = styled(props);

return (

{items.map((item) => (
className="min-h-4 min-w-4 font-inter"
key={item.id}
value={item.id}
textValue={item.text}
>
{renderItem(item)}

))}

);
}
);

export const Autocomplete: (
props: PropsOverrides<
PolymorphicTixProps,
AutocompleteProps
>
) => ReturnType = AutocompleteInner;
`

Installation


yarn add styled-tix tailwind-merge

(Important) For using with tailwindcss, please install it first: \
https://tailwindcss.com/docs/installation

(Optional) If you don't use tailwindcss no need to install tailwind-merge. \
styled-tix can work alone without any dependencies.




Configuration


Create a tix.ts file inside your src folder.

tix.ts
`typescript
import { newTix } from "styled-tix";
import { twMerge } from "tailwind-merge";

export * from "styled-tix";
export const tix = newTix(twMerge);
// You can use any classes mixer you want.
// here we will use tailwind-merge for tailwindcss
`

VSCode IntelliSense

$3

Install Tailwind CSS IntelliSense from VSCode. \
Add this line to your VSCode config settings, open by pressing ⌘ + ,.
`json
"tailwindCSS.experimental.classRegex": [
"tw([^]*)"
]
``
!VSCode support image

References

// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012
// https://www.tsteele.dev/posts/react-polymorphic-forwardref