diff --git a/packages/core/src/tailwind-buddy.ts b/packages/core/src/tailwind-buddy.ts index cfeeb52..284406e 100644 --- a/packages/core/src/tailwind-buddy.ts +++ b/packages/core/src/tailwind-buddy.ts @@ -203,6 +203,12 @@ export const setupCompose = ( .forEach((cls) => classSet.add(cls)); } + if (props?.class) { + cleanString(props.class) + .split(" ") + .forEach((cls) => classSet.add(cls)); + } + const result = mergeClasses(uniquifyClasses(Array.from(classSet))); variantCache.set(cacheKey, result); return result; diff --git a/packages/core/src/types/props.ts b/packages/core/src/types/props.ts index 6e3fa65..27a5b8c 100644 --- a/packages/core/src/types/props.ts +++ b/packages/core/src/types/props.ts @@ -7,6 +7,7 @@ export type MergedProps< R extends ResponsiveVariants > = { className?: string; + class?: string; } & { [K in keyof V]?: R extends undefined ? keyof V[K] diff --git a/packages/core/tests/configs/specific.test.ts b/packages/core/tests/configs/specific.test.ts index 1b778df..aa147a2 100644 --- a/packages/core/tests/configs/specific.test.ts +++ b/packages/core/tests/configs/specific.test.ts @@ -17,7 +17,7 @@ describe("test simple config", () => { root({ size: "xxs", fontWeight: "regular", - className: "bg-color-scheme-literal-red-500", + class: "bg-color-scheme-literal-red-500", disabled: true, }) ).toBe(root_full_str); @@ -34,7 +34,7 @@ describe("test simple config", () => { root({ size: "xxs", fontWeight: "regular", - className: "bg-color-scheme-literal-red-500", + class: "bg-color-scheme-literal-red-500", disabled: false, }) ).toBe(root_full_str); @@ -53,13 +53,13 @@ describe("test simple config", () => { root({ size: "xxs", fontWeight: "bold", - className: "bg-color-scheme-literal-red-500", + class: "bg-color-scheme-literal-red-500", disabled: false, }) ).toBe(root_full_str); }); - test.skip("start working with responsive props but no array condition", () => { + test("start working with responsive props but no array condition", () => { const root_full_str = [ "inline-flex", "font-weight-bold", @@ -78,12 +78,12 @@ describe("test simple config", () => { md: "xxl", }, fontWeight: "bold", - className: "bg-color-scheme-literal-red-500", + class: "bg-color-scheme-literal-red-500", }) ).toBe(root_full_str); }); - test.skip("start working with responsive props and array condition", () => { + test("start working with responsive props and array condition", () => { const root_full_str = [ "inline-flex", "font-weight-bold", @@ -102,12 +102,12 @@ describe("test simple config", () => { initial: "bold", md: "extraBold", }, - className: "bg-color-scheme-literal-red-500", + class: "bg-color-scheme-literal-red-500", }) ).toBe(root_full_str); }); - test.skip("start working with two responsive props and array condition", () => { + test("start working with two responsive props and array condition", () => { const root_full_str = [ "inline-flex", "font-weight-bold", @@ -131,12 +131,12 @@ describe("test simple config", () => { initial: "bold", md: "extraBold", }, - className: "bg-color-scheme-literal-red-500", + class: "bg-color-scheme-literal-red-500", }) ).toBe(root_full_str); }); - test.skip("start working with two responsive props and array condition", () => { + test("start working with two responsive props and array condition", () => { const root_full_str = [ "inline-flex", "font-weight-bold", @@ -162,7 +162,7 @@ describe("test simple config", () => { initial: "bold", md: "extraBold", }, - className: "bg-color-scheme-literal-red-500", + class: "bg-color-scheme-literal-red-500", disabled: true, }) ).toBe(root_full_str); diff --git a/packages/core/tests/setup/specific.ts b/packages/core/tests/setup/specific.ts index 2c4d5f7..ef56341 100644 --- a/packages/core/tests/setup/specific.ts +++ b/packages/core/tests/setup/specific.ts @@ -78,4 +78,4 @@ export const labelVariants = compose({ class: ["opacity-200"], }, ], -})(); +})(); diff --git a/packages/documentation/.gitignore b/packages/documentation/.gitignore new file mode 100644 index 0000000..6dc972e --- /dev/null +++ b/packages/documentation/.gitignore @@ -0,0 +1 @@ +.vitepress/cache \ No newline at end of file diff --git a/packages/documentation/pages/responsive-variants.md b/packages/documentation/pages/responsive-variants.md index 9b298d8..91559ce 100644 --- a/packages/documentation/pages/responsive-variants.md +++ b/packages/documentation/pages/responsive-variants.md @@ -5,6 +5,8 @@ editLink: true # Responsive Variants +**IMPORTANT**: If you are not using any responsive variants you can just not use all this configuration. + To enable responsive variants: 1. Add the variant to the `responsiveVariants` array in your compose function. @@ -18,7 +20,6 @@ export const buttonVariants = compose({ })(); // Usage in a React component -import { twMerge } from "tailwind-merge"; // class .font-bold will be applied as the condition is fulfilled. export const Button: React.FC<{}> = () => { @@ -26,12 +27,10 @@ export const Button: React.FC<{}> = () => { return ( diff --git a/packages/documentation/pages/slots.md b/packages/documentation/pages/slots.md index 67a49f2..cd9eecf 100644 --- a/packages/documentation/pages/slots.md +++ b/packages/documentation/pages/slots.md @@ -38,9 +38,9 @@ export const Card = () => { const { root, header, body } = cardVariants; return ( -
-
header
-
body
+
+
header
+
body
); }; diff --git a/packages/documentation/pages/usage.md b/packages/documentation/pages/usage.md index 45cd7ac..45f2221 100644 --- a/packages/documentation/pages/usage.md +++ b/packages/documentation/pages/usage.md @@ -40,7 +40,6 @@ export const buttonVariants = compose({ export type ButtonProps = VariantsProps; // Usage in a React component -import { twMerge } from "tailwind-merge"; export const Button: React.FC> = ({ as: Component = "button", @@ -54,16 +53,15 @@ export const Button: React.FC> = ({ return ( {children} diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index 4e465f9..9dfb078 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -33,7 +33,7 @@ export const Button: React.FC = ({