working exampple

packages/UI/.storybook/main.js

@@ -10,6 +10,9 @@ module.exports = {
     '@storybook/addon-viewport',
   ],
   framework: '@storybook/react',
+  core: {
+    builder: "webpack5",
+  },
   webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.mjs$/,

packages/UI/.storybook/preview.jsx

@@ -5,7 +5,7 @@ import GlobalStyle from "../src/styles/global";
 import theme from "../src/styles/theme";
 import * as NextImage from "next/image";
 const OriginalNextImage = NextImage.default;
-
+import '@devlaunchers/tailwind/tailwind.css'
 Object.defineProperty(NextImage, "default", {
   configurable: true,
   value: (props) => (

packages/UI/package.json

@@ -4,8 +4,11 @@
   "private": true,
   "dependencies": {
     "@devlaunchers/models": "workspace:*",
+    "@devlaunchers/tailwind": "workspace:*",
     "@devlaunchers/utility": "workspace:*",
     "@storybook/addon-viewport": "6.5.16",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
     "axios": "^0.27.2",
     "babel-loader": "8.2.5",
     "constate": "^3.3.2",
@@ -20,6 +23,7 @@
     "storybook-addon-next-router": "^4.0.0",
     "storybook-react-context": "^0.6.0",
     "styled-normalize": "^8.0.7",
+    "tailwind-variants": "0.1.10",
     "web-vitals": "^2.1.4",
     "zod": "3.19.1",
     "zod-formik-adapter": "1.1.1"

packages/UI/src/components/atoms/NewButton/NewButton.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import NewButton from './NewButton';
+
+export default {
+  title: 'Atoms/NewButton',
+  component: NewButton,
+} as ComponentMeta<typeof NewButton>;
+
+const NavLinkTemplate: ComponentStory<typeof NewButton> = (args) => (
+  <NewButton {...args}>Primary</NewButton>
+);
+
+export const Light = NavLinkTemplate.bind({});
+Light.args = {
+  size: 'default',
+  type: 'Primary',
+};

packages/UI/src/components/atoms/NewButton/NewButton.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+const buttonStyles = tv({
+  base: 'flex justify-center rounded-lg',
+  variants: {
+    type: {
+      Primary:
+        'text-Grey-Scale-white font-normal capitalize leading-normal tracking-wider bg-Blue-blue-600 hover:bg-Blue-blue-700',
+    },
+    size: {
+      default: 'px-4 py-2',
+      XL: 'px-6 py-3',
+    },
+  },
+});
+
+interface NewButtonProps extends VariantProps<typeof buttonStyles> {}
+
+const NewButton: React.FC<NewButtonProps> = ({
+  children,
+  size,
+  type,
+  ...props
+}) => {
+  return (
+    <button className={buttonStyles({ size, type })} {...props}>
+      {children}
+    </button>
+  );
+};
+export default NewButton;

packages/tailwind-constructor/output/core.css

@@ -281,35 +281,35 @@
   --text-case-lowercase: lowercase;
   --text-decoration-none: none;
   --text-decoration-underline: underline;
-  --rounded-sm: 0.25;
-  --rounded: 0.5;
-  --rounded-md: 1;
-  --rounded-lg: 1.5;
-  --rounded-xl: 2;
-  --rounded-2xl: 3;
-  --rounded-3xl: 4;
-  --rounded-4xl: 6;
-  --padding-p-1: 0.25;
-  --padding-p-2: 0.5;
-  --padding-p-4: 1;
-  --padding-p-6: 1.5;
-  --padding-p-8: 2;
-  --padding-p-12: 3;
-  --padding-p-16: 4;
-  --padding-p-24: 6;
-  --padding-p-32: 8;
+  --rounded-sm: 0.25rem;
+  --rounded: 0.5rem;
+  --rounded-md: 1rem;
+  --rounded-lg: 1.5rem;
+  --rounded-xl: 2rem;
+  --rounded-2xl: 3rem;
+  --rounded-3xl: 4rem;
+  --rounded-4xl: 6rem;
+  --padding-p-1: 0.25rem;
+  --padding-p-2: 0.5rem;
+  --padding-p-4: 1rem;
+  --padding-p-6: 1.5rem;
+  --padding-p-8: 2rem;
+  --padding-p-12: 3rem;
+  --padding-p-16: 4rem;
+  --padding-p-24: 6rem;
+  --padding-p-32: 8rem;
   --rem: 16;
-  --font-size-0: 0.75;
-  --font-size-1: 0.875;
-  --font-size-2: 1;
-  --font-size-3: 1.25;
-  --font-size-4: 1.5;
-  --font-size-5: 1.625;
-  --font-size-6: 1.75;
-  --font-size-7: 2;
-  --font-size-8: 2.25;
-  --font-size-9: 2.5;
-  --font-size-10: 2.75;
-  --font-size-11: 3;
-  --font-size-12: 4;
+  --font-size-0: 0.75rem;
+  --font-size-1: 0.875rem;
+  --font-size-2: 1rem;
+  --font-size-3: 1.25rem;
+  --font-size-4: 1.5rem;
+  --font-size-5: 1.625rem;
+  --font-size-6: 1.75rem;
+  --font-size-7: 2rem;
+  --font-size-8: 2.25rem;
+  --font-size-9: 2.5rem;
+  --font-size-10: 2.75rem;
+  --font-size-11: 3rem;
+  --font-size-12: 4rem;
 }

packages/tailwind-constructor/tailwind.config.js

@@ -1,15 +1,16 @@
+const { filterTokensByType } = require('./fns');
+const tokens = require('./output/core.json');
 
-const { filterTokensByType } = require("./fns");
-// const tokens = require("./output/light.json")
-
-// const colors = filterTokensByType('color', tokens)
+const colors = filterTokensByType('color', tokens);
 
 module.exports = {
   purge: [],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    // colors,
+    extend: {
+      colors,
+    },
   },
   variants: {},
   plugins: [],
-}
+};