fix(twind): 🐛 fixed twind & checkbox flex bug

components/Codeblock.tsx

@@ -8,14 +8,41 @@ import { useTheme } from "next-themes";
 import Highlight, { defaultProps, Language } from "prism-react-renderer";
 import darkTheme from "prism-react-renderer/themes/vsDark";
 import lightTheme from "prism-react-renderer/themes/vsLight";
-import { tw } from "twind";
+import { setup, tw } from "twind";
+import * as colors from "twind/colors";
 
 export type StaticCodeProps = {
   className?: string;
   highlight?: string;
   noCopy?: boolean;
 };
 
+setup({
+  preflight: false, // do not include base style reset (default: use tailwind preflight)
+  theme: {
+    extend: {
+      colors: {
+        dark: "#111",
+        oldGray: {
+          100: "#f7fafc",
+          200: "#edf2f7",
+          300: "#e2e8f0",
+          400: "#cbd5e0",
+          500: "#a0aec0",
+          600: "#718096",
+          700: "#4a5568",
+          800: "#2d3748",
+          900: "#1a202c",
+        },
+        transparent: "transparent",
+        current: "currentColor",
+        ...colors,
+      },
+    },
+  }, // define custom theme values (default: tailwind theme)
+  darkMode: "class", // use a different dark mode strategy (default: 'media')
+});
+
 export const StaticCode: React.FC<StaticCodeProps> = props => {
   const { children, className, highlight, noCopy, ...rest } = props;
 

components/InteractiveCodeblock.tsx

@@ -15,7 +15,8 @@ import { get } from "lodash";
 import { useTheme } from "next-themes";
 import darkTheme from "prism-react-renderer/themes/vsDark";
 import lightTheme from "prism-react-renderer/themes/vsLight";
-import { tw } from "twind";
+import { setup, tw } from "twind";
+import * as colors from "twind/colors";
 
 type TemplateFunctionProps = {
   booleanProps: string[];
@@ -25,6 +26,32 @@ type TemplateFunctionProps = {
   props: Record<string, any>;
 };
 
+setup({
+  preflight: false, // do not include base style reset (default: use tailwind preflight)
+  theme: {
+    extend: {
+      colors: {
+        dark: "#111",
+        oldGray: {
+          100: "#f7fafc",
+          200: "#edf2f7",
+          300: "#e2e8f0",
+          400: "#cbd5e0",
+          500: "#a0aec0",
+          600: "#718096",
+          700: "#4a5568",
+          800: "#2d3748",
+          900: "#1a202c",
+        },
+        transparent: "transparent",
+        current: "currentColor",
+        ...colors,
+      },
+    },
+  }, // define custom theme values (default: tailwind theme)
+  darkMode: "class", // use a different dark mode strategy (default: 'media')
+});
+
 type TemplateFunction = (props: TemplateFunctionProps) => string;
 
 type InteractiveCodeblockProps = {

package.json

@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@chakra-ui/hooks": "1.8.2",
-    "@renderlesskit/react-tailwind": "0.0.1-alpha.37",
+    "@renderlesskit/react-tailwind": "0.0.1-alpha.38",
     "lodash": "4.17.21",
     "next": "12.0.10",
     "nextra": "2.0.0-alpha.24",
@@ -68,39 +68,39 @@
     "twind": "^0.16.16"
   },
   "devDependencies": {
-    "@babel/core": "7.17.2",
-    "@commitlint/cli": "16.1.0",
-    "@commitlint/config-conventional": "16.0.0",
+    "@babel/core": "7.17.4",
+    "@commitlint/cli": "16.2.1",
+    "@commitlint/config-conventional": "16.2.1",
     "@next/eslint-plugin-next": "12.0.10",
     "@release-it/conventional-changelog": "4.1.0",
     "@testing-library/dom": "8.11.3",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/react": "12.1.3",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.4.0",
     "@types/lodash": "4.14.178",
-    "@types/node": "17.0.17",
+    "@types/node": "17.0.18",
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
     "all-contributors-cli": "6.20.0",
     "autoprefixer": "10.4.2",
     "babel-jest": "27.5.1",
-    "eslint": "8.8.0",
+    "eslint": "8.9.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react-app": "7.0.0",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "gacp": "2.10.2",
     "husky": "7.0.4",
     "jest": "27.5.1",
-    "lint-staged": "12.3.3",
+    "lint-staged": "12.3.4",
     "postcss": "8.4.6",
     "prettier": "2.5.1",
     "prettier-plugin-tailwindcss": "0.1.7",
     "react-icons": "4.3.1",
     "release-it": "14.12.4",
     "sort-package-json": "1.54.0",
-    "tailwindcss": "3.0.21",
+    "tailwindcss": "3.0.23",
     "typescript": "4.5.5"
   },
   "gacp": {

pages/docs/components/forms/checkbox.mdx

@@ -46,7 +46,7 @@ Checkbox comes with 3 sizes `sm` `md` `lg`
 <Codeblock
   live
   children={`
-<div className="flex flex-col space-y-2">
+<div className="inline-flex flex-col space-y-2">
   <Checkbox size="sm" defaultState={false} />
   <Checkbox size="md" defaultState={false} />
   <Checkbox size="lg" defaultState={false} />
@@ -61,7 +61,7 @@ Uncontrolled checkbox can be used with `defaultState` prop.
 <Codeblock
   live
   children={`
-<div className="flex flex-col space-y-2">
+<div className="inline-flex flex-col space-y-2">
   <Checkbox size="md" defaultState={true} />
   <Checkbox size="md" defaultState={false} />
   <Checkbox size="md" defaultState="indeterminate" />
@@ -74,10 +74,10 @@ Uncontrolled checkbox can be used with `defaultState` prop.
 <Codeblock
   live
   children={`
-<div className="flex flex-col space-y-2">
-  <Checkbox size="md" defaultState={false} label="Checkbox" className="w-72" />
-  <Checkbox size="md" defaultState={false} label="Multilined label Checkbox, just for demonstration" className="w-72" />
-  <Checkbox size="md" defaultState={false} label="Checkbox" description="Used when the checkbox is selected and will use its value for the form submission." className="w-72"/>
+<div className="inline-flex flex-col space-y-2 w-72">
+  <Checkbox size="md" defaultState={false} label="Checkbox" />
+  <Checkbox size="md" defaultState={false} label="Multilined label Checkbox, just for demonstration" />
+  <Checkbox size="md" defaultState={false} label="Checkbox" description="Used when the checkbox is selected and will use its value for the form submission."/>
 </div>
 `}
 />
@@ -87,10 +87,10 @@ Uncontrolled checkbox can be used with `defaultState` prop.
 <Codeblock
   live
   children={`
-<div className="flex flex-col space-y-2">
+<div className="flex flex-col space-y-2 w-72">
   <Checkbox size="md" disabled defaultState={false} />
   <Checkbox size="md" disabled defaultState={false} label="Checkboxs" />
-  <Checkbox size="md" disabled defaultState={false} label="Used when the checkbox is selected and will use its value for the form submission." className="w-72" />
+  <Checkbox size="md" disabled defaultState={false} label="Used when the checkbox is selected and will use its value for the form submission." />
   <Checkbox size="md" disabled defaultState={false} label="Checkboxs" description="Used when the checkbox is selected and will use its value for the form submission."/>
 </div>
 `}

pages/docs/components/forms/radio.mdx

@@ -44,7 +44,7 @@ Radio comes with 3 sizes `sm` `md` `lg`
 <Codeblock
   live
   children={`
-<div className="flex flex-col space-y-2">
+<div className="inline-flex flex-col space-y-2">
   <Radio value="apple" label="Apple" size="sm" />
   <Radio value="apple" label="Apple" size="md" />
   <Radio value="apple" label="Apple"size="lg" />
@@ -59,7 +59,7 @@ Radio can be controlled using `state` prop.
 <Codeblock
   live
   children={`
-<div className="flex flex-col space-y-2">
+<div className="inline-flex flex-col space-y-2">
   <Radio size="md" value="apple" label="Apple" />
   <Radio size="md" value="apple" label="Apple" state="apple" />
 </div>
@@ -71,7 +71,7 @@ Radio can be controlled using `state` prop.
 <Codeblock
   live
   children={`
-<div className="flex flex-col space-y-2">
+<div className="inline-flex flex-col space-y-2">
   <Radio size="md" value="apple" label="Apple" disabled />
   <Radio size="md" value="apple" label="Apple" state="apple" disabled />
 </div>
@@ -83,10 +83,10 @@ Radio can be controlled using `state` prop.
 <Codeblock
   live
   children={`
-<div className="flex flex-col space-y-2">
-  <Radio size="md" value="apple" label="Apple" className="w-72" />
-  <Radio size="md" value="apple" label="Used when the Radio is selected and will use its value for the form submission." className="w-72" />
-  <Radio size="md" value="apple" label="Apple" description="Used when the Radio is selected and will use its value for the form submission." className="w-72" />
+<div className="inline-flex flex-col space-y-2 w-72">
+  <Radio size="md" value="apple" label="Apple" />
+  <Radio size="md" value="apple" label="Used when the Radio is selected and will use its value for the form submission." />
+  <Radio size="md" value="apple" label="Apple" description="Used when the Radio is selected and will use its value for the form submission." />
 </div>
 `}
 />