create-react-scaffold-cli 0.1.0

package/templates/base/src/shared/theme/theme.js

@@ -0,0 +1,2138 @@
+export const marginLookup = {
+  0: 'm-0',
+  0.5: 'm-0.5',
+  1: 'm-1',
+  1.5: 'm-1.5',
+  2: 'm-2',
+  2.5: 'm-2.5',
+  3: 'm-3',
+  3.5: 'm-3.5',
+  4: 'm-4',
+  5: 'm-5',
+  6: 'm-6',
+  7: 'm-7',
+  8: 'm-8',
+  9: 'm-9',
+  10: 'm-10',
+  11: 'm-11',
+  12: 'm-12',
+  14: 'm-14',
+  16: 'm-16',
+  20: 'm-20',
+  24: 'm-24',
+  28: 'm-28',
+  32: 'm-32',
+  36: 'm-36',
+  40: 'm-40',
+};
+
+export const marginMdLookup = {
+  0: 'md:m-0',
+  0.5: 'md:m-0.5',
+  1: 'md:m-1',
+  1.5: 'md:m-1.5',
+  2: 'md:m-2',
+  2.5: 'md:m-2.5',
+  3: 'md:m-3',
+  3.5: 'md:m-3.5',
+  4: 'md:m-4',
+  5: 'md:m-5',
+  6: 'md:m-6',
+  7: 'md:m-7',
+  8: 'md:m-8',
+  9: 'md:m-9',
+  10: 'md:m-10',
+  11: 'md:m-11',
+  12: 'md:m-12',
+  14: 'md:m-14',
+  16: 'md:m-16',
+  20: 'md:m-20',
+  24: 'md:m-24',
+  28: 'md:m-28',
+  32: 'md:m-32',
+  36: 'md:m-36',
+  40: 'md:m-40',
+};
+
+export const marginLgLookup = {
+  0: 'lg:m-0',
+  0.5: 'lg:m-0.5',
+  1: 'lg:m-1',
+  1.5: 'lg:m-1.5',
+  2: 'lg:m-2',
+  2.5: 'lg:m-2.5',
+  3: 'lg:m-3',
+  3.5: 'lg:m-3.5',
+  4: 'lg:m-4',
+  5: 'lg:m-5',
+  6: 'lg:m-6',
+  7: 'lg:m-7',
+  8: 'lg:m-8',
+  9: 'lg:m-9',
+  10: 'lg:m-10',
+  11: 'lg:m-11',
+  12: 'lg:m-12',
+  14: 'lg:m-14',
+  16: 'lg:m-16',
+  20: 'lg:m-20',
+  24: 'lg:m-24',
+  28: 'lg:m-28',
+  32: 'lg:m-32',
+  36: 'lg:m-36',
+  40: 'lg:m-40',
+};
+
+export const marginXlLookup = {
+  0: 'xl:m-0',
+  0.5: 'xl:m-0.5',
+  1: 'xl:m-1',
+  1.5: 'xl:m-1.5',
+  2: 'xl:m-2',
+  2.5: 'xl:m-2.5',
+  3: 'xl:m-3',
+  3.5: 'xl:m-3.5',
+  4: 'xl:m-4',
+  5: 'xl:m-5',
+  6: 'xl:m-6',
+  7: 'xl:m-7',
+  8: 'xl:m-8',
+  9: 'xl:m-9',
+  10: 'xl:m-10',
+  11: 'xl:m-11',
+  12: 'xl:m-12',
+  14: 'xl:m-14',
+  16: 'xl:m-16',
+  20: 'xl:m-20',
+  24: 'xl:m-24',
+  28: 'xl:m-28',
+  32: 'xl:m-32',
+  36: 'xl:m-36',
+  40: 'xl:m-40',
+};
+
+export const marginXLookup = {
+  0: 'mx-0',
+  0.5: 'mx-0.5',
+  1: 'mx-1',
+  1.5: 'mx-1.5',
+  2: 'mx-2',
+  2.5: 'mx-2.5',
+  3: 'mx-3',
+  3.5: 'mx-3.5',
+  4: 'mx-4',
+  5: 'mx-5',
+  6: 'mx-6',
+  7: 'mx-7',
+  8: 'mx-8',
+  9: 'mx-9',
+  10: 'mx-10',
+  11: 'mx-11',
+  12: 'mx-12',
+  14: 'mx-14',
+  16: 'mx-16',
+  20: 'mx-20',
+  24: 'mx-24',
+  28: 'mx-28',
+  32: 'mx-32',
+  36: 'mx-36',
+  40: 'mx-40',
+};
+
+export const marginXMdLookup = {
+  0: 'md:mx-0',
+  0.5: 'md:mx-0.5',
+  1: 'md:mx-1',
+  1.5: 'md:mx-1.5',
+  2: 'md:mx-2',
+  2.5: 'md:mx-2.5',
+  3: 'md:mx-3',
+  3.5: 'md:mx-3.5',
+  4: 'md:mx-4',
+  5: 'md:mx-5',
+  6: 'md:mx-6',
+  7: 'md:mx-7',
+  8: 'md:mx-8',
+  9: 'md:mx-9',
+  10: 'md:mx-10',
+  11: 'md:mx-11',
+  12: 'md:mx-12',
+  14: 'md:mx-14',
+  16: 'md:mx-16',
+  20: 'md:mx-20',
+  24: 'md:mx-24',
+  28: 'md:mx-28',
+  32: 'md:mx-32',
+  36: 'md:mx-36',
+  40: 'md:mx-40',
+};
+
+export const marginXlgLookup = {
+  0: 'lg:mx-0',
+  0.5: 'lg:mx-0.5',
+  1: 'lg:mx-1',
+  1.5: 'lg:mx-1.5',
+  2: 'lg:mx-2',
+  2.5: 'lg:mx-2.5',
+  3: 'lg:mx-3',
+  3.5: 'lg:mx-3.5',
+  4: 'lg:mx-4',
+  5: 'lg:mx-5',
+  6: 'lg:mx-6',
+  7: 'lg:mx-7',
+  8: 'lg:mx-8',
+  9: 'lg:mx-9',
+  10: 'lg:mx-10',
+  11: 'lg:mx-11',
+  12: 'lg:mx-12',
+  14: 'lg:mx-14',
+  16: 'lg:mx-16',
+  20: 'lg:mx-20',
+  24: 'lg:mx-24',
+  28: 'lg:mx-28',
+  32: 'lg:mx-32',
+  36: 'lg:mx-36',
+  40: 'lg:mx-40',
+};
+
+export const marginXXlLookup = {
+  0: 'xl:mx-0',
+  0.5: 'xl:mx-0.5',
+  1: 'xl:mx-1',
+  1.5: 'xl:mx-1.5',
+  2: 'xl:mx-2',
+  2.5: 'xl:mx-2.5',
+  3: 'xl:mx-3',
+  3.5: 'xl:mx-3.5',
+  4: 'xl:mx-4',
+  5: 'xl:mx-5',
+  6: 'xl:mx-6',
+  7: 'xl:mx-7',
+  8: 'xl:mx-8',
+  9: 'xl:mx-9',
+  10: 'xl:mx-10',
+  11: 'xl:mx-11',
+  12: 'xl:mx-12',
+  14: 'xl:mx-14',
+  16: 'xl:mx-16',
+  20: 'xl:mx-20',
+  24: 'xl:mx-24',
+  28: 'xl:mx-28',
+  32: 'xl:mx-32',
+  36: 'xl:mx-36',
+  40: 'xl:mx-40',
+};
+
+export const marginYLookup = {
+  0: 'my-0',
+  0.5: 'my-0.5',
+  1: 'my-1',
+  1.5: 'my-1.5',
+  2: 'my-2',
+  2.5: 'my-2.5',
+  3: 'my-3',
+  3.5: 'my-3.5',
+  4: 'my-4',
+  5: 'my-5',
+  6: 'my-6',
+  7: 'my-7',
+  8: 'my-8',
+  9: 'my-9',
+  10: 'my-10',
+  11: 'my-11',
+  12: 'my-12',
+  14: 'my-14',
+  16: 'my-16',
+  20: 'my-20',
+  24: 'my-24',
+  28: 'my-28',
+  32: 'my-32',
+  36: 'my-36',
+  40: 'my-40',
+};
+
+export const marginYMdLookup = {
+  0: 'md:my-0',
+  0.5: 'md:my-0.5',
+  1: 'md:my-1',
+  1.5: 'md:my-1.5',
+  2: 'md:my-2',
+  2.5: 'md:my-2.5',
+  3: 'md:my-3',
+  3.5: 'md:my-3.5',
+  4: 'md:my-4',
+  5: 'md:my-5',
+  6: 'md:my-6',
+  7: 'md:my-7',
+  8: 'md:my-8',
+  9: 'md:my-9',
+  10: 'md:my-10',
+  11: 'md:my-11',
+  12: 'md:my-12',
+  14: 'md:my-14',
+  16: 'md:my-16',
+  20: 'md:my-20',
+  24: 'md:my-24',
+  28: 'md:my-28',
+  32: 'md:my-32',
+  36: 'md:my-36',
+  40: 'md:my-40',
+};
+
+export const marginYLgLookup = {
+  0: 'lg:my-0',
+  0.5: 'lg:my-0.5',
+  1: 'lg:my-1',
+  1.5: 'lg:my-1.5',
+  2: 'lg:my-2',
+  2.5: 'lg:my-2.5',
+  3: 'lg:my-3',
+  3.5: 'lg:my-3.5',
+  4: 'lg:my-4',
+  5: 'lg:my-5',
+  6: 'lg:my-6',
+  7: 'lg:my-7',
+  8: 'lg:my-8',
+  9: 'lg:my-9',
+  10: 'lg:my-10',
+  11: 'lg:my-11',
+  12: 'lg:my-12',
+  14: 'lg:my-14',
+  16: 'lg:my-16',
+  20: 'lg:my-20',
+  24: 'lg:my-24',
+  28: 'lg:my-28',
+  32: 'lg:my-32',
+  36: 'lg:my-36',
+  40: 'lg:my-40',
+};
+
+export const marginYXlLookup = {
+  0: 'xl:my-0',
+  0.5: 'xl:my-0.5',
+  1: 'xl:my-1',
+  1.5: 'xl:my-1.5',
+  2: 'xl:my-2',
+  2.5: 'xl:my-2.5',
+  3: 'xl:my-3',
+  3.5: 'xl:my-3.5',
+  4: 'xl:my-4',
+  5: 'xl:my-5',
+  6: 'xl:my-6',
+  7: 'xl:my-7',
+  8: 'xl:my-8',
+  9: 'xl:my-9',
+  10: 'xl:my-10',
+  11: 'xl:my-11',
+  12: 'xl:my-12',
+  14: 'xl:my-14',
+  16: 'xl:my-16',
+  20: 'xl:my-20',
+  24: 'xl:my-24',
+  28: 'xl:my-28',
+  32: 'xl:my-32',
+  36: 'xl:my-36',
+  40: 'xl:my-40',
+};
+
+export const paddingLookup = {
+  0: 'p-0',
+  0.5: 'p-0.5',
+  1: 'p-1',
+  1.5: 'p-1.5',
+  2: 'p-2',
+  2.5: 'p-2.5',
+  3: 'p-3',
+  3.5: 'p-3.5',
+  4: 'p-4',
+  5: 'p-5',
+  6: 'p-6',
+  7: 'p-7',
+  8: 'p-8',
+  9: 'p-9',
+  10: 'p-10',
+  11: 'p-11',
+  12: 'p-12',
+  14: 'p-14',
+  16: 'p-16',
+  20: 'p-20',
+  24: 'p-24',
+  28: 'p-28',
+  32: 'p-32',
+  36: 'p-36',
+  40: 'p-40',
+};
+
+export const paddingMdLookup = {
+  0: 'md:p-0',
+  0.5: 'md:p-0.5',
+  1: 'md:p-1',
+  1.5: 'md:p-1.5',
+  2: 'md:p-2',
+  2.5: 'md:p-2.5',
+  3: 'md:p-3',
+  3.5: 'md:p-3.5',
+  4: 'md:p-4',
+  5: 'md:p-5',
+  6: 'md:p-6',
+  7: 'md:p-7',
+  8: 'md:p-8',
+  9: 'md:p-9',
+  10: 'md:p-10',
+  11: 'md:p-11',
+  12: 'md:p-12',
+  14: 'md:p-14',
+  16: 'md:p-16',
+  20: 'md:p-20',
+  24: 'md:p-24',
+  28: 'md:p-28',
+  32: 'md:p-32',
+  36: 'md:p-36',
+  40: 'md:p-40',
+};
+
+export const paddingLgLookup = {
+  0: 'lg:p-0',
+  0.5: 'lg:p-0.5',
+  1: 'lg:p-1',
+  1.5: 'lg:p-1.5',
+  2: 'lg:p-2',
+  2.5: 'lg:p-2.5',
+  3: 'lg:p-3',
+  3.5: 'lg:p-3.5',
+  4: 'lg:p-4',
+  5: 'lg:p-5',
+  6: 'lg:p-6',
+  7: 'lg:p-7',
+  8: 'lg:p-8',
+  9: 'lg:p-9',
+  10: 'lg:p-10',
+  11: 'lg:p-11',
+  12: 'lg:p-12',
+  14: 'lg:p-14',
+  16: 'lg:p-16',
+  20: 'lg:p-20',
+  24: 'lg:p-24',
+  28: 'lg:p-28',
+  32: 'lg:p-32',
+  36: 'lg:p-36',
+  40: 'lg:p-40',
+};
+
+export const paddingXlLookup = {
+  0: 'xl:p-0',
+  0.5: 'xl:p-0.5',
+  1: 'xl:p-1',
+  1.5: 'xl:p-1.5',
+  2: 'xl:p-2',
+  2.5: 'xl:p-2.5',
+  3: 'xl:p-3',
+  3.5: 'xl:p-3.5',
+  4: 'xl:p-4',
+  5: 'xl:p-5',
+  6: 'xl:p-6',
+  7: 'xl:p-7',
+  8: 'xl:p-8',
+  9: 'xl:p-9',
+  10: 'xl:p-10',
+  11: 'xl:p-11',
+  12: 'xl:p-12',
+  14: 'xl:p-14',
+  16: 'xl:p-16',
+  20: 'xl:p-20',
+  24: 'xl:p-24',
+  28: 'xl:p-28',
+  32: 'xl:p-32',
+  36: 'xl:p-36',
+  40: 'xl:p-40',
+};
+export const paddingXLookup = {
+  0: 'px-0',
+  0.5: 'px-0.5',
+  1: 'px-1',
+  1.5: 'px-1.5',
+  2: 'px-2',
+  2.5: 'px-2.5',
+  3: 'px-3',
+  3.5: 'px-3.5',
+  4: 'px-4',
+  5: 'px-5',
+  6: 'px-6',
+  7: 'px-7',
+  8: 'px-8',
+  9: 'px-9',
+  10: 'px-10',
+  11: 'px-11',
+  12: 'px-12',
+  14: 'px-14',
+  16: 'px-16',
+  20: 'px-20',
+  24: 'px-24',
+  28: 'px-28',
+  32: 'px-32',
+  36: 'px-36',
+  40: 'px-40',
+};
+
+export const paddingXMdLookup = {
+  0: 'md:px-0',
+  0.5: 'md:px-0.5',
+  1: 'md:px-1',
+  1.5: 'md:px-1.5',
+  2: 'md:px-2',
+  2.5: 'md:px-2.5',
+  3: 'md:px-3',
+  3.5: 'md:px-3.5',
+  4: 'md:px-4',
+  5: 'md:px-5',
+  6: 'md:px-6',
+  7: 'md:px-7',
+  8: 'md:px-8',
+  9: 'md:px-9',
+  10: 'md:px-10',
+  11: 'md:px-11',
+  12: 'md:px-12',
+  14: 'md:px-14',
+  16: 'md:px-16',
+  20: 'md:px-20',
+  24: 'md:px-24',
+  28: 'md:px-28',
+  32: 'md:px-32',
+  36: 'md:px-36',
+  40: 'md:px-40',
+};
+
+export const paddingXLgLookup = {
+  0: 'lg:px-0',
+  0.5: 'lg:px-0.5',
+  1: 'lg:px-1',
+  1.5: 'lg:px-1.5',
+  2: 'lg:px-2',
+  2.5: 'lg:px-2.5',
+  3: 'lg:px-3',
+  3.5: 'lg:px-3.5',
+  4: 'lg:px-4',
+  5: 'lg:px-5',
+  6: 'lg:px-6',
+  7: 'lg:px-7',
+  8: 'lg:px-8',
+  9: 'lg:px-9',
+  10: 'lg:px-10',
+  11: 'lg:px-11',
+  12: 'lg:px-12',
+  14: 'lg:px-14',
+  16: 'lg:px-16',
+  20: 'lg:px-20',
+  24: 'lg:px-24',
+  28: 'lg:px-28',
+  32: 'lg:px-32',
+  36: 'lg:px-36',
+  40: 'lg:px-40',
+};
+
+export const paddingXXlLookup = {
+  0: 'xl:px-0',
+  0.5: 'xl:px-0.5',
+  1: 'xl:px-1',
+  1.5: 'xl:px-1.5',
+  2: 'xl:px-2',
+  2.5: 'xl:px-2.5',
+  3: 'xl:px-3',
+  3.5: 'xl:px-3.5',
+  4: 'xl:px-4',
+  5: 'xl:px-5',
+  6: 'xl:px-6',
+  7: 'xl:px-7',
+  8: 'xl:px-8',
+  9: 'xl:px-9',
+  10: 'xl:px-10',
+  11: 'xl:px-11',
+  12: 'xl:px-12',
+  14: 'xl:px-14',
+  16: 'xl:px-16',
+  20: 'xl:px-20',
+  24: 'xl:px-24',
+  28: 'xl:px-28',
+  32: 'xl:px-32',
+  36: 'xl:px-36',
+  40: 'xl:px-40',
+};
+
+export const paddingX2XlLookup = {
+  0: '2xl:px-0',
+  0.5: '2xl:px-0.5',
+  1: '2xl:px-1',
+  1.5: '2xl:px-1.5',
+  2: '2xl:px-2',
+  2.5: '2xl:px-2.5',
+  3: '2xl:px-3',
+  3.5: '2xl:px-3.5',
+  4: '2xl:px-4',
+  5: '2xl:px-5',
+  6: '2xl:px-6',
+  7: '2xl:px-7',
+  8: '2xl:px-8',
+  9: '2xl:px-9',
+  10: '2xl:px-10',
+  11: '2xl:px-11',
+  12: '2xl:px-12',
+  14: '2xl:px-14',
+  16: '2xl:px-16',
+  20: '2xl:px-20',
+  24: '2xl:px-24',
+  28: '2xl:px-28',
+  32: '2xl:px-32',
+  36: '2xl:px-36',
+  40: '2xl:px-40',
+};
+
+export const paddingYLookup = {
+  0: 'py-0',
+  0.5: 'py-0.5',
+  1: 'py-1',
+  1.5: 'py-1.5',
+  2: 'py-2',
+  2.5: 'py-2.5',
+  3: 'py-3',
+  3.5: 'py-3.5',
+  4: 'py-4',
+  5: 'py-5',
+  6: 'py-6',
+  7: 'py-7',
+  8: 'py-8',
+  9: 'py-9',
+  10: 'py-10',
+  11: 'py-11',
+  12: 'py-12',
+  14: 'py-14',
+  16: 'py-16',
+  20: 'py-20',
+  24: 'py-24',
+  28: 'py-28',
+  32: 'py-32',
+  36: 'py-36',
+  40: 'py-40',
+};
+
+export const paddingYMdLookup = {
+  0: 'md:py-0',
+  0.5: 'md:py-0.5',
+  1: 'md:py-1',
+  1.5: 'md:py-1.5',
+  2: 'md:py-2',
+  2.5: 'md:py-2.5',
+  3: 'md:py-3',
+  3.5: 'md:py-3.5',
+  4: 'md:py-4',
+  5: 'md:py-5',
+  6: 'md:py-6',
+  7: 'md:py-7',
+  8: 'md:py-8',
+  9: 'md:py-9',
+  10: 'md:py-10',
+  11: 'md:py-11',
+  12: 'md:py-12',
+  14: 'md:py-14',
+  16: 'md:py-16',
+  20: 'md:py-20',
+  24: 'md:py-24',
+  28: 'md:py-28',
+  32: 'md:py-32',
+  36: 'md:py-36',
+  40: 'md:py-40',
+};
+
+export const paddingYLgLookup = {
+  0: 'lg:py-0',
+  0.5: 'lg:py-0.5',
+  1: 'lg:py-1',
+  1.5: 'lg:py-1.5',
+  2: 'lg:py-2',
+  2.5: 'lg:py-2.5',
+  3: 'lg:py-3',
+  3.5: 'lg:py-3.5',
+  4: 'lg:py-4',
+  5: 'lg:py-5',
+  6: 'lg:py-6',
+  7: 'lg:py-7',
+  8: 'lg:py-8',
+  9: 'lg:py-9',
+  10: 'lg:py-10',
+  11: 'lg:py-11',
+  12: 'lg:py-12',
+  14: 'lg:py-14',
+  16: 'lg:py-16',
+  20: 'lg:py-20',
+  24: 'lg:py-24',
+  28: 'lg:py-28',
+  32: 'lg:py-32',
+  36: 'lg:py-36',
+  40: 'lg:py-40',
+};
+
+export const paddingYXlLookup = {
+  0: 'xl:py-0',
+  0.5: 'xl:py-0.5',
+  1: 'xl:py-1',
+  1.5: 'xl:py-1.5',
+  2: 'xl:py-2',
+  2.5: 'xl:py-2.5',
+  3: 'xl:py-3',
+  3.5: 'xl:py-3.5',
+  4: 'xl:py-4',
+  5: 'xl:py-5',
+  6: 'xl:py-6',
+  7: 'xl:py-7',
+  8: 'xl:py-8',
+  9: 'xl:py-9',
+  10: 'xl:py-10',
+  11: 'xl:py-11',
+  12: 'xl:py-12',
+  14: 'xl:py-14',
+  16: 'xl:py-16',
+  20: 'xl:py-20',
+  24: 'xl:py-24',
+  28: 'xl:py-28',
+  32: 'xl:py-32',
+  36: 'xl:py-36',
+  40: 'xl:py-40',
+};
+
+export const paddingY2XlLookup = {
+  0: '2xl:py-0',
+  0.5: '2xl:py-0.5',
+  1: '2xl:py-1',
+  1.5: '2xl:py-1.5',
+  2: '2xl:py-2',
+  2.5: '2xl:py-2.5',
+  3: '2xl:py-3',
+  3.5: '2xl:py-3.5',
+  4: '2xl:py-4',
+  5: '2xl:py-5',
+  6: '2xl:py-6',
+  7: '2xl:py-7',
+  8: '2xl:py-8',
+  9: '2xl:py-9',
+  10: '2xl:py-10',
+  11: '2xl:py-11',
+  12: '2xl:py-12',
+  14: '2xl:py-14',
+  16: '2xl:py-16',
+  20: '2xl:py-20',
+  24: '2xl:py-24',
+  28: '2xl:py-28',
+  32: '2xl:py-32',
+  36: '2xl:py-36',
+  40: '2xl:py-40',
+};
+
+export const gapLookup = {
+  0: 'gap-0',
+  0.5: 'gap-0.5',
+  1: 'gap-1',
+  1.5: 'gap-1.5',
+  2: 'gap-2',
+  2.5: 'gap-2.5',
+  3: 'gap-3',
+  3.5: 'gap-3.5',
+  4: 'gap-4',
+  5: 'gap-5',
+  6: 'gap-6',
+  7: 'gap-7',
+  8: 'gap-8',
+  9: 'gap-9',
+  10: 'gap-10',
+  11: 'gap-11',
+  12: 'gap-12',
+  14: 'gap-14',
+  16: 'gap-16',
+  20: 'gap-20',
+  24: 'gap-24',
+  28: 'gap-28',
+  32: 'gap-32',
+  36: 'gap-36',
+  40: 'gap-40',
+};
+
+export const gapMdLookup = {
+  0: 'md:gap-0',
+  0.5: 'md:gap-0.5',
+  1: 'md:gap-1',
+  1.5: 'md:gap-1.5',
+  2: 'md:gap-2',
+  2.5: 'md:gap-2.5',
+  3: 'md:gap-3',
+  3.5: 'md:gap-3.5',
+  4: 'md:gap-4',
+  5: 'md:gap-5',
+  6: 'md:gap-6',
+  7: 'md:gap-7',
+  8: 'md:gap-8',
+  9: 'md:gap-9',
+  10: 'md:gap-10',
+  11: 'md:gap-11',
+  12: 'md:gap-12',
+  14: 'md:gap-14',
+  16: 'md:gap-16',
+  20: 'md:gap-20',
+  24: 'md:gap-24',
+  28: 'md:gap-28',
+  32: 'md:gap-32',
+  36: 'md:gap-36',
+  40: 'md:gap-40',
+};
+
+export const gapLgLookup = {
+  0: 'lg:gap-0',
+  0.5: 'lg:gap-0.5',
+  1: 'lg:gap-1',
+  1.5: 'lg:gap-1.5',
+  2: 'lg:gap-2',
+  2.5: 'lg:gap-2.5',
+  3: 'lg:gap-3',
+  3.5: 'lg:gap-3.5',
+  4: 'lg:gap-4',
+  5: 'lg:gap-5',
+  6: 'lg:gap-6',
+  7: 'lg:gap-7',
+  8: 'lg:gap-8',
+  9: 'lg:gap-9',
+  10: 'lg:gap-10',
+  11: 'lg:gap-11',
+  12: 'lg:gap-12',
+  14: 'lg:gap-14',
+  16: 'lg:gap-16',
+  20: 'lg:gap-20',
+  24: 'lg:gap-24',
+  28: 'lg:gap-28',
+  32: 'lg:gap-32',
+  36: 'lg:gap-36',
+  40: 'lg:gap-40',
+};
+
+export const gapXlLookup = {
+  0: 'xl:gap-0',
+  0.5: 'xl:gap-0.5',
+  1: 'xl:gap-1',
+  1.5: 'xl:gap-1.5',
+  2: 'xl:gap-2',
+  2.5: 'xl:gap-2.5',
+  3: 'xl:gap-3',
+  3.5: 'xl:gap-3.5',
+  4: 'xl:gap-4',
+  5: 'xl:gap-5',
+  6: 'xl:gap-6',
+  7: 'xl:gap-7',
+  8: 'xl:gap-8',
+  9: 'xl:gap-9',
+  10: 'xl:gap-10',
+  11: 'xl:gap-11',
+  12: 'xl:gap-12',
+  14: 'xl:gap-14',
+  16: 'xl:gap-16',
+  20: 'xl:gap-20',
+  24: 'xl:gap-24',
+  28: 'xl:gap-28',
+  32: 'xl:gap-32',
+  36: 'xl:gap-36',
+  40: 'xl:gap-40',
+};
+
+export const gap2XlLookup = {
+  0: '2xl:gap-0',
+  0.5: '2xl:gap-0.5',
+  1: '2xl:gap-1',
+  1.5: '2xl:gap-1.5',
+  2: '2xl:gap-2',
+  2.5: '2xl:gap-2.5',
+  3: '2xl:gap-3',
+  3.5: '2xl:gap-3.5',
+  4: '2xl:gap-4',
+  5: '2xl:gap-5',
+  6: '2xl:gap-6',
+  7: '2xl:gap-7',
+  8: '2xl:gap-8',
+  9: '2xl:gap-9',
+  10: '2xl:gap-10',
+  11: '2xl:gap-11',
+  12: '2xl:gap-12',
+  14: '2xl:gap-14',
+  16: '2xl:gap-16',
+  20: '2xl:gap-20',
+  24: '2xl:gap-24',
+  28: '2xl:gap-28',
+  32: '2xl:gap-32',
+  36: '2xl:gap-36',
+  40: '2xl:gap-40',
+};
+
+export const justifyLookup = {
+  normal: 'justify-normal',
+  start: 'justify-start',
+  end: 'justify-end',
+  center: 'justify-center',
+  between: 'justify-between',
+  around: 'justify-around',
+  evenly: 'justify-evenly',
+  stretch: 'justify-stretch',
+};
+
+export const justifyMdLookup = {
+  normal: 'md:justify-normal',
+  start: 'md:justify-start',
+  end: 'md:justify-end',
+  center: 'md:justify-center',
+  between: 'md:justify-between',
+  around: 'md:justify-around',
+  evenly: 'md:justify-evenly',
+  stretch: 'md:justify-stretch',
+};
+export const justifyLgLookup = {
+  normal: 'lg:justify-normal',
+  start: 'lg:justify-start',
+  end: 'lg:justify-end',
+  center: 'lg:justify-center',
+  between: 'lg:justify-between',
+  around: 'lg:justify-around',
+  evenly: 'lg:justify-evenly',
+  stretch: 'lg:justify-stretch',
+};
+
+export const justifyXlLookup = {
+  normal: 'xl:justify-normal',
+  start: 'xl:justify-start',
+  end: 'xl:justify-end',
+  center: 'xl:justify-center',
+  between: 'xl:justify-between',
+  around: 'xl:justify-around',
+  evenly: 'xl:justify-evenly',
+  stretch: 'xl:justify-stretch',
+};
+
+export const alignLookup = {
+  start: 'items-start',
+  end: 'items-end',
+  center: 'items-center',
+  baseline: 'items-baseline',
+  stretch: 'items-stretch',
+};
+
+export const alignMdLookup = {
+  start: 'md:items-start',
+  end: 'md:items-end',
+  center: 'md:items-center',
+  baseline: 'md:items-baseline',
+  stretch: 'md:items-stretch',
+};
+
+export const alignLgLookup = {
+  start: 'lg:items-start',
+  end: 'lg:items-end',
+  center: 'lg:items-center',
+  baseline: 'lg:items-baseline',
+  stretch: 'lg:items-stretch',
+};
+
+export const alignXlLookup = {
+  start: 'xl:items-start',
+  end: 'xl:items-end',
+  center: 'xl:items-center',
+  baseline: 'xl:items-baseline',
+  stretch: 'xl:items-stretch',
+};
+
+export const alignSelfLookup = {
+  auto: 'self-auto',
+  start: 'self-start',
+  end: 'self-end',
+  center: 'self-center',
+  baseline: 'self-baseline',
+  stretch: 'self-stretch',
+};
+
+export const alignSelfMdLookup = {
+  auto: 'md:self-auto',
+  start: 'md:self-start',
+  end: 'md:self-end',
+  center: 'md:self-center',
+  baseline: 'md:self-baseline',
+  stretch: 'md:self-stretch',
+};
+
+export const alignSelfLgLookup = {
+  auto: 'lg:self-auto',
+  start: 'lg:self-start',
+  end: 'lg:self-end',
+  center: 'lg:self-center',
+  baseline: 'lg:self-baseline',
+  stretch: 'lg:self-stretch',
+};
+
+export const alignSelfXlLookup = {
+  auto: 'xl:self-auto',
+  start: 'xl:self-start',
+  end: 'xl:self-end',
+  center: 'xl:self-center',
+  baseline: 'xl:self-baseline',
+  stretch: 'xl:self-stretch',
+};
+
+export const directionLookup = {
+  row: 'flex-row',
+  rowReverse: 'flex-row-reverse',
+  column: 'flex-col',
+  columnReverse: 'flex-col-reverse',
+};
+
+export const directionMdLookup = {
+  row: 'md:flex-row',
+  rowReverse: 'md:flex-row-reverse',
+  column: 'md:flex-col',
+  columnReverse: 'md:flex-col-reverse',
+};
+
+export const directionLgLookup = {
+  row: 'lg:flex-row',
+  rowReverse: 'lg:flex-row-reverse',
+  column: 'lg:flex-col',
+  columnReverse: 'lg:flex-col-reverse',
+};
+
+export const directionXlLookup = {
+  row: 'xl:flex-row',
+  rowReverse: 'xl:flex-row-reverse',
+  column: 'xl:flex-col',
+  columnReverse: 'xl:flex-col-reverse',
+};
+export const growLookup = {
+  0: 'grow-0',
+  1: 'grow-1',
+  2: 'grow-2',
+  3: 'grow-3',
+  4: 'grow-4',
+  5: 'grow-5',
+  6: 'grow-6',
+  7: 'grow-7',
+  8: 'grow-8',
+  9: 'grow-9',
+  10: 'grow-10',
+  11: 'grow-11',
+  12: 'grow-12',
+};
+
+export const growMdLookup = {
+  0: 'md:grow-0',
+  1: 'md:grow-1',
+  2: 'md:grow-2',
+  3: 'md:grow-3',
+  4: 'md:grow-4',
+  5: 'md:grow-5',
+  6: 'md:grow-6',
+  7: 'md:grow-7',
+  8: 'md:grow-8',
+  9: 'md:grow-9',
+  10: 'md:grow-10',
+  11: 'md:grow-11',
+  12: 'md:grow-12',
+};
+
+export const growLgLookup = {
+  0: 'lg:grow-0',
+  1: 'lg:grow-1',
+  2: 'lg:grow-2',
+  3: 'lg:grow-3',
+  4: 'lg:grow-4',
+  5: 'lg:grow-5',
+  6: 'lg:grow-6',
+  7: 'lg:grow-7',
+  8: 'lg:grow-8',
+  9: 'lg:grow-9',
+  10: 'lg:grow-10',
+  11: 'lg:grow-11',
+  12: 'lg:grow-12',
+};
+
+export const growXlLookup = {
+  0: 'xl:grow-0',
+  1: 'xl:grow-1',
+  2: 'xl:grow-2',
+  3: 'xl:grow-3',
+  4: 'xl:grow-4',
+  5: 'xl:grow-5',
+  6: 'xl:grow-6',
+  7: 'xl:grow-7',
+  8: 'xl:grow-8',
+  9: 'xl:grow-9',
+  10: 'xl:grow-10',
+  11: 'xl:grow-11',
+  12: 'xl:grow-12',
+};
+
+export const widthLookup = {
+  0: 'w-0',
+  0.5: 'w-0.5',
+  1: 'w-1',
+  1.5: 'w-1.5',
+  2: 'w-2',
+  2.5: 'w-2.5',
+  3: 'w-3',
+  3.5: 'w-3.5',
+  4: 'w-4',
+  5: 'w-5',
+  6: 'w-6',
+  7: 'w-7',
+  8: 'w-8',
+  9: 'w-9',
+  10: 'w-10',
+  11: 'w-11',
+  12: 'w-12',
+  14: 'w-14',
+  16: 'w-16',
+  20: 'w-20',
+  24: 'w-24',
+  28: 'w-28',
+  32: 'w-32',
+  36: 'w-36',
+  40: 'w-40',
+  44: 'w-44',
+  48: 'w-48',
+  52: 'w-52',
+  56: 'w-56',
+  60: 'w-60',
+  64: 'w-64',
+  72: 'w-72',
+  80: 'w-80',
+  96: 'w-96',
+  auto: 'w-auto',
+  fit: 'w-fit',
+  full: 'w-full',
+};
+
+export const widthMdLookup = {
+  0: 'md:w-0',
+  0.5: 'md:w-0.5',
+  1: 'md:w-1',
+  1.5: 'md:w-1.5',
+  2: 'md:w-2',
+  2.5: 'md:w-2.5',
+  3: 'md:w-3',
+  3.5: 'md:w-3.5',
+  4: 'md:w-4',
+  5: 'md:w-5',
+  6: 'md:w-6',
+  7: 'md:w-7',
+  8: 'md:w-8',
+  9: 'md:w-9',
+  10: 'md:w-10',
+  11: 'md:w-11',
+  12: 'md:w-12',
+  14: 'md:w-14',
+  16: 'md:w-16',
+  20: 'md:w-20',
+  24: 'md:w-24',
+  28: 'md:w-28',
+  32: 'md:w-32',
+  36: 'md:w-36',
+  40: 'md:w-40',
+  44: 'md:w-44',
+  48: 'md:w-48',
+  52: 'md:w-52',
+  56: 'md:w-56',
+  60: 'md:w-60',
+  64: 'md:w-64',
+  72: 'md:w-72',
+  80: 'md:w-80',
+  96: 'md:w-96',
+  auto: 'md:w-auto',
+  fit: 'md:w-fit',
+  full: 'md:w-full',
+};
+
+export const widthLgLookup = {
+  0: 'lg:w-0',
+  0.5: 'lg:w-0.5',
+  1: 'lg:w-1',
+  1.5: 'lg:w-1.5',
+  2: 'lg:w-2',
+  2.5: 'lg:w-2.5',
+  3: 'lg:w-3',
+  3.5: 'lg:w-3.5',
+  4: 'lg:w-4',
+  5: 'lg:w-5',
+  6: 'lg:w-6',
+  7: 'lg:w-7',
+  8: 'lg:w-8',
+  9: 'lg:w-9',
+  10: 'lg:w-10',
+  11: 'lg:w-11',
+  12: 'lg:w-12',
+  14: 'lg:w-14',
+  16: 'lg:w-16',
+  20: 'lg:w-20',
+  24: 'lg:w-24',
+  28: 'lg:w-28',
+  32: 'lg:w-32',
+  36: 'lg:w-36',
+  40: 'lg:w-40',
+  44: 'lg:w-44',
+  48: 'lg:w-48',
+  52: 'lg:w-52',
+  56: 'lg:w-56',
+  60: 'lg:w-60',
+  64: 'lg:w-64',
+  72: 'lg:w-72',
+  80: 'lg:w-80',
+  96: 'lg:w-96',
+  auto: 'lg:w-auto',
+  fit: 'lg:w-fit',
+  full: 'lg:w-full',
+};
+
+export const widthXlLookup = {
+  0: 'xl:w-0',
+  0.5: 'xl:w-0.5',
+  1: 'xl:w-1',
+  1.5: 'xl:w-1.5',
+  2: 'xl:w-2',
+  2.5: 'xl:w-2.5',
+  3: 'xl:w-3',
+  3.5: 'xl:w-3.5',
+  4: 'xl:w-4',
+  5: 'xl:w-5',
+  6: 'xl:w-6',
+  7: 'xl:w-7',
+  8: 'xl:w-8',
+  9: 'xl:w-9',
+  10: 'xl:w-10',
+  11: 'xl:w-11',
+  12: 'xl:w-12',
+  14: 'xl:w-14',
+  16: 'xl:w-16',
+  20: 'xl:w-20',
+  24: 'xl:w-24',
+  28: 'xl:w-28',
+  32: 'xl:w-32',
+  36: 'xl:w-36',
+  40: 'xl:w-40',
+  44: 'xl:w-44',
+  48: 'xl:w-48',
+  52: 'xl:w-52',
+  56: 'xl:w-56',
+  60: 'xl:w-60',
+  64: 'xl:w-64',
+  72: 'xl:w-72',
+  80: 'xl:w-80',
+  96: 'xl:w-96',
+  auto: 'xl:w-auto',
+  fit: 'xl:w-fit',
+  full: 'xl:w-full',
+};
+
+export const width2XlLookup = {
+  0: '2xl:w-0',
+  0.5: '2xl:w-0.5',
+  1: '2xl:w-1',
+  1.5: '2xl:w-1.5',
+  2: '2xl:w-2',
+  2.5: '2xl:w-2.5',
+  3: '2xl:w-3',
+  3.5: '2xl:w-3.5',
+  4: '2xl:w-4',
+  5: '2xl:w-5',
+  6: '2xl:w-6',
+  7: '2xl:w-7',
+  8: '2xl:w-8',
+  9: '2xl:w-9',
+  10: '2xl:w-10',
+  11: '2xl:w-11',
+  12: '2xl:w-12',
+  14: '2xl:w-14',
+  16: '2xl:w-16',
+  20: '2xl:w-20',
+  24: '2xl:w-24',
+  28: '2xl:w-28',
+  32: '2xl:w-32',
+  36: '2xl:w-36',
+  40: '2xl:w-40',
+  44: '2xl:w-44',
+  48: '2xl:w-48',
+  52: '2xl:w-52',
+  56: '2xl:w-56',
+  60: '2xl:w-60',
+  64: '2xl:w-64',
+  72: '2xl:w-72',
+  80: '2xl:w-80',
+  96: '2xl:w-96',
+  auto: '2xl:w-auto',
+  fit: '2xl:w-fit',
+  full: '2xl:w-full',
+};
+
+export const heightLookup = {
+  0: 'h-0',
+  0.5: 'h-0.5',
+  1: 'h-1',
+  1.5: 'h-1.5',
+  2: 'h-2',
+  2.5: 'h-2.5',
+  3: 'h-3',
+  3.5: 'h-3.5',
+  4: 'h-4',
+  5: 'h-5',
+  6: 'h-6',
+  7: 'h-7',
+  8: 'h-8',
+  9: 'h-9',
+  10: 'h-10',
+  11: 'h-11',
+  12: 'h-12',
+  14: 'h-14',
+  16: 'h-16',
+  20: 'h-20',
+  24: 'h-24',
+  28: 'h-28',
+  32: 'h-32',
+  36: 'h-36',
+  40: 'h-40',
+  44: 'h-44',
+  48: 'h-48',
+  52: 'h-52',
+  56: 'h-56',
+  60: 'h-60',
+  64: 'h-64',
+  72: 'h-72',
+  80: 'h-80',
+  96: 'h-96',
+  auto: 'h-auto',
+  fit: 'h-fit',
+  full: 'h-full',
+};
+
+export const heightMdLookup = {
+  0: 'md:h-0',
+  0.5: 'md:h-0.5',
+  1: 'md:h-1',
+  1.5: 'md:h-1.5',
+  2: 'md:h-2',
+  2.5: 'md:h-2.5',
+  3: 'md:h-3',
+  3.5: 'md:h-3.5',
+  4: 'md:h-4',
+  5: 'md:h-5',
+  6: 'md:h-6',
+  7: 'md:h-7',
+  8: 'md:h-8',
+  9: 'md:h-9',
+  10: 'md:h-10',
+  11: 'md:h-11',
+  12: 'md:h-12',
+  14: 'md:h-14',
+  16: 'md:h-16',
+  20: 'md:h-20',
+  24: 'md:h-24',
+  28: 'md:h-28',
+  32: 'md:h-32',
+  36: 'md:h-36',
+  40: 'md:h-40',
+  44: 'md:h-44',
+  48: 'md:h-48',
+  52: 'md:h-52',
+  56: 'md:h-56',
+  60: 'md:h-60',
+  64: 'md:h-64',
+  72: 'md:h-72',
+  80: 'md:h-80',
+  96: 'md:h-96',
+  auto: 'md:h-auto',
+  fit: 'md:h-fit',
+  full: 'md:h-full',
+};
+
+export const heightLgLookup = {
+  0: 'lg:h-0',
+  0.5: 'lg:h-0.5',
+  1: 'lg:h-1',
+  1.5: 'lg:h-1.5',
+  2: 'lg:h-2',
+  2.5: 'lg:h-2.5',
+  3: 'lg:h-3',
+  3.5: 'lg:h-3.5',
+  4: 'lg:h-4',
+  5: 'lg:h-5',
+  6: 'lg:h-6',
+  7: 'lg:h-7',
+  8: 'lg:h-8',
+  9: 'lg:h-9',
+  10: 'lg:h-10',
+  11: 'lg:h-11',
+  12: 'lg:h-12',
+  14: 'lg:h-14',
+  16: 'lg:h-16',
+  20: 'lg:h-20',
+  24: 'lg:h-24',
+  28: 'lg:h-28',
+  32: 'lg:h-32',
+  36: 'lg:h-36',
+  40: 'lg:h-40',
+  44: 'lg:h-44',
+  48: 'lg:h-48',
+  52: 'lg:h-52',
+  56: 'lg:h-56',
+  60: 'lg:h-60',
+  64: 'lg:h-64',
+  72: 'lg:h-72',
+  80: 'lg:h-80',
+  96: 'lg:h-96',
+  auto: 'lg:h-auto',
+  fit: 'lg:h-fit',
+  full: 'lg:h-full',
+};
+
+export const heightXlLookup = {
+  0: 'xl:h-0',
+  0.5: 'xl:h-0.5',
+  1: 'xl:h-1',
+  1.5: 'xl:h-1.5',
+  2: 'xl:h-2',
+  2.5: 'xl:h-2.5',
+  3: 'xl:h-3',
+  3.5: 'xl:h-3.5',
+  4: 'xl:h-4',
+  5: 'xl:h-5',
+  6: 'xl:h-6',
+  7: 'xl:h-7',
+  8: 'xl:h-8',
+  9: 'xl:h-9',
+  10: 'xl:h-10',
+  11: 'xl:h-11',
+  12: 'xl:h-12',
+  14: 'xl:h-14',
+  16: 'xl:h-16',
+  20: 'xl:h-20',
+  24: 'xl:h-24',
+  28: 'xl:h-28',
+  32: 'xl:h-32',
+  36: 'xl:h-36',
+  40: 'xl:h-40',
+  44: 'xl:h-44',
+  48: 'xl:h-48',
+  52: 'xl:h-52',
+  56: 'xl:h-56',
+  60: 'xl:h-60',
+  64: 'xl:h-64',
+  72: 'xl:h-72',
+  80: 'xl:h-80',
+  96: 'xl:h-96',
+  auto: 'xl:h-auto',
+  fit: 'xl:h-fit',
+  full: 'xl:h-full',
+};
+
+export const height2XlLookup = {
+  0: '2xl:h-0',
+  0.5: '2xl:h-0.5',
+  1: '2xl:h-1',
+  1.5: '2xl:h-1.5',
+  2: '2xl:h-2',
+  2.5: '2xl:h-2.5',
+  3: '2xl:h-3',
+  3.5: '2xl:h-3.5',
+  4: '2xl:h-4',
+  5: '2xl:h-5',
+  6: '2xl:h-6',
+  7: '2xl:h-7',
+  8: '2xl:h-8',
+  9: '2xl:h-9',
+  10: '2xl:h-10',
+  11: '2xl:h-11',
+  12: '2xl:h-12',
+  14: '2xl:h-14',
+  16: '2xl:h-16',
+  20: '2xl:h-20',
+  24: '2xl:h-24',
+  28: '2xl:h-28',
+  32: '2xl:h-32',
+  36: '2xl:h-36',
+  40: '2xl:h-40',
+  44: '2xl:h-44',
+  48: '2xl:h-48',
+  52: '2xl:h-52',
+  56: '2xl:h-56',
+  60: '2xl:h-60',
+  64: '2xl:h-64',
+  72: '2xl:h-72',
+  80: '2xl:h-80',
+  96: '2xl:h-96',
+  auto: '2xl:h-auto',
+  fit: '2xl:h-fit',
+  full: '2xl:h-full',
+};
+
+export const columnsLookup = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  7: 'grid-cols-7',
+  8: 'grid-cols-8',
+  9: 'grid-cols-9',
+  10: 'grid-cols-10',
+  11: 'grid-cols-11',
+  12: 'grid-cols-12',
+};
+
+export const columnsSmLookup = {
+  1: 'sm:grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+  4: 'sm:grid-cols-4',
+  5: 'sm:grid-cols-5',
+  6: 'sm:grid-cols-6',
+  7: 'sm:grid-cols-7',
+  8: 'sm:grid-cols-8',
+  9: 'sm:grid-cols-9',
+  10: 'sm:grid-cols-10',
+  11: 'sm:grid-cols-11',
+  12: 'sm:grid-cols-12',
+};
+
+export const columnsMdLookup = {
+  1: 'md:grid-cols-1',
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+  7: 'md:grid-cols-7',
+  8: 'md:grid-cols-8',
+  9: 'md:grid-cols-9',
+  10: 'md:grid-cols-10',
+  11: 'md:grid-cols-11',
+  12: 'md:grid-cols-12',
+};
+
+export const columnsLgLookup = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5',
+  6: 'lg:grid-cols-6',
+  7: 'lg:grid-cols-7',
+  8: 'lg:grid-cols-8',
+  9: 'lg:grid-cols-9',
+  10: 'lg:grid-cols-10',
+  11: 'lg:grid-cols-11',
+  12: 'lg:grid-cols-12',
+};
+
+export const columnsXlLookup = {
+  1: 'xl:grid-cols-1',
+  2: 'xl:grid-cols-2',
+  3: 'xl:grid-cols-3',
+  4: 'xl:grid-cols-4',
+  5: 'xl:grid-cols-5',
+  6: 'xl:grid-cols-6',
+  7: 'xl:grid-cols-7',
+  8: 'xl:grid-cols-8',
+  9: 'xl:grid-cols-9',
+  10: 'xl:grid-cols-10',
+  11: 'xl:grid-cols-11',
+  12: 'xl:grid-cols-12',
+};
+
+export const columns2XlLookup = {
+  1: '2xl:grid-cols-1',
+  2: '2xl:grid-cols-2',
+  3: '2xl:grid-cols-3',
+  4: '2xl:grid-cols-4',
+  5: '2xl:grid-cols-5',
+  6: '2xl:grid-cols-6',
+  7: '2xl:grid-cols-7',
+  8: '2xl:grid-cols-8',
+  9: '2xl:grid-cols-9',
+  10: '2xl:grid-cols-10',
+  11: '2xl:grid-cols-11',
+  12: '2xl:grid-cols-12',
+};
+
+export const spanLookup = {
+  auto: 'col-auto',
+  full: 'col-span-full',
+  1: 'col-span-1',
+  2: 'col-span-2',
+  3: 'col-span-3',
+  4: 'col-span-4',
+  5: 'col-span-5',
+  6: 'col-span-6',
+  7: 'col-span-7',
+  8: 'col-span-8',
+  9: 'col-span-9',
+  10: 'col-span-10',
+  11: 'col-span-11',
+  12: 'col-span-12',
+};
+
+export const spanMdLookup = {
+  auto: 'md:col-auto',
+  full: 'md:col-span-full',
+  1: 'md:col-span-1',
+  2: 'md:col-span-2',
+  3: 'md:col-span-3',
+  4: 'md:col-span-4',
+  5: 'md:col-span-5',
+  6: 'md:col-span-6',
+  7: 'md:col-span-7',
+  8: 'md:col-span-8',
+  9: 'md:col-span-9',
+  10: 'md:col-span-10',
+  11: 'md:col-span-11',
+  12: 'md:col-span-12',
+};
+
+export const spanLgLookup = {
+  auto: 'lg:col-auto',
+  full: 'lg:col-span-full',
+  1: 'lg:col-span-1',
+  2: 'lg:col-span-2',
+  3: 'lg:col-span-3',
+  4: 'lg:col-span-4',
+  5: 'lg:col-span-5',
+  6: 'lg:col-span-6',
+  7: 'lg:col-span-7',
+  8: 'lg:col-span-8',
+  9: 'lg:col-span-9',
+  10: 'lg:col-span-10',
+  11: 'lg:col-span-11',
+  12: 'lg:col-span-12',
+};
+
+export const spanXlLookup = {
+  auto: 'xl:col-auto',
+  full: 'xl:col-span-full',
+  1: 'xl:col-span-1',
+  2: 'xl:col-span-2',
+  3: 'xl:col-span-3',
+  4: 'xl:col-span-4',
+  5: 'xl:col-span-5',
+  6: 'xl:col-span-6',
+  7: 'xl:col-span-7',
+  8: 'xl:col-span-8',
+  9: 'xl:col-span-9',
+  10: 'xl:col-span-10',
+  11: 'xl:col-span-11',
+  12: 'xl:col-span-12',
+};
+
+export const span2XlLookup = {
+  auto: '2xl:col-auto',
+  full: '2xl:col-span-full',
+  1: '2xl:col-span-1',
+  2: '2xl:col-span-2',
+  3: '2xl:col-span-3',
+  4: '2xl:col-span-4',
+  5: '2xl:col-span-5',
+  6: '2xl:col-span-6',
+  7: '2xl:col-span-7',
+  8: '2xl:col-span-8',
+  9: '2xl:col-span-9',
+  10: '2xl:col-span-10',
+  11: '2xl:col-span-11',
+  12: '2xl:col-span-12',
+};
+
+export const fontSizeLookup = {
+  xxxs: 'text-[8px]',
+  xxs: 'text-[10px]',
+  xs: 'text-xs',
+  sm: 'text-sm',
+  base: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+  '2xl': 'text-2xl',
+  '3xl': 'text-3xl',
+  '4xl': 'text-4xl',
+  '5xl': 'text-5xl',
+  '6xl': 'text-6xl',
+  '7xl': 'text-7xl',
+  '8xl': 'text-8xl',
+  '9xl': 'text-9xl',
+};
+
+export const fontSizeMdLookup = {
+  xxxs: 'md:text-[8px]',
+  xxs: 'md:text-[10px]',
+  xs: 'md:text-xs',
+  sm: 'md:text-sm',
+  base: 'md:text-base',
+  lg: 'md:text-lg',
+  xl: 'md:text-xl',
+  '2xl': 'md:text-2xl',
+  '3xl': 'md:text-3xl',
+  '4xl': 'md:text-4xl',
+  '5xl': 'md:text-5xl',
+  '6xl': 'md:text-6xl',
+  '7xl': 'md:text-7xl',
+  '8xl': 'md:text-8xl',
+  '9xl': 'md:text-9xl',
+};
+
+export const fontSizeLgLookup = {
+  xxxs: 'lg:text-[8px]',
+  xxs: 'lg:text-[10px]',
+  xs: 'lg:text-xs',
+  sm: 'lg:text-sm',
+  base: 'lg:text-base',
+  lg: 'lg:text-lg',
+  xl: 'lg:text-xl',
+  '2xl': 'lg:text-2xl',
+  '3xl': 'lg:text-3xl',
+  '4xl': 'lg:text-4xl',
+  '5xl': 'lg:text-5xl',
+  '6xl': 'lg:text-6xl',
+  '7xl': 'lg:text-7xl',
+  '8xl': 'lg:text-8xl',
+  '9xl': 'lg:text-9xl',
+};
+
+export const fontSizeXlLookup = {
+  xxxs: 'xl:text-[8px]',
+  xxs: 'xl:text-[10px]',
+  xs: 'xl:text-xs',
+  sm: 'xl:text-sm',
+  base: 'xl:text-base',
+  lg: 'xl:text-lg',
+  xl: 'xl:text-xl',
+  '2xl': 'xl:text-2xl',
+  '3xl': 'xl:text-3xl',
+  '4xl': 'xl:text-4xl',
+  '5xl': 'xl:text-5xl',
+  '6xl': 'xl:text-6xl',
+  '7xl': 'xl:text-7xl',
+  '8xl': 'xl:text-8xl',
+  '9xl': 'xl:text-9xl',
+};
+
+export const fontSize2xlLookup = {
+  xxxs: '2xl:text-[8px]',
+  xxs: '2xl:text-[10px]',
+  xs: '2xl:text-xs',
+  sm: '2xl:text-sm',
+  base: '2xl:text-base',
+  lg: '2xl:text-lg',
+  xl: '2xl:text-xl',
+  '2xl': '2xl:text-2xl',
+  '3xl': '2xl:text-3xl',
+  '4xl': '2xl:text-4xl',
+  '5xl': '2xl:text-5xl',
+  '6xl': '2xl:text-6xl',
+  '7xl': '2xl:text-7xl',
+  '8xl': '2xl:text-8xl',
+  '9xl': '2xl:text-9xl',
+};
+
+export const fontWeightLookup = {
+  thin: 'font-thin',
+  extralight: 'font-extralight',
+  light: 'font-light',
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+  extrabold: 'font-extrabold',
+  black: 'font-black',
+};
+
+export const fontWeightMdLookup = {
+  thin: 'md:font-thin',
+  extralight: 'md:font-extralight',
+  light: 'md:font-light',
+  normal: 'md:font-normal',
+  medium: 'md:font-medium',
+  semibold: 'md:font-semibold',
+  bold: 'md:font-bold',
+  extrabold: 'md:font-extrabold',
+  black: 'md:font-black',
+};
+
+export const fontWeightLgLookup = {
+  thin: 'lg:font-thin',
+  extralight: 'lg:font-extralight',
+  light: 'lg:font-light',
+  normal: 'lg:font-normal',
+  medium: 'lg:font-medium',
+  semibold: 'lg:font-semibold',
+  bold: 'lg:font-bold',
+  extrabold: 'lg:font-extrabold',
+  black: 'lg:font-black',
+};
+
+export const fontWeightXlLookup = {
+  thin: 'xl:font-thin',
+  extralight: 'xl:font-extralight',
+  light: 'xl:font-light',
+  normal: 'xl:font-normal',
+  medium: 'xl:font-medium',
+  semibold: 'xl:font-semibold',
+  bold: 'xl:font-bold',
+  extrabold: 'xl:font-extrabold',
+  black: 'xl:font-black',
+};
+
+export const fontWeight2xlLookup = {
+  thin: '2xl:font-thin',
+  extralight: '2xl:font-extralight',
+  light: '2xl:font-light',
+  normal: '2xl:font-normal',
+  medium: '2xl:font-medium',
+  semibold: '2xl:font-semibold',
+  bold: '2xl:font-bold',
+  extrabold: '2xl:font-extrabold',
+  black: '2xl:font-black',
+};
+
+export const textAlignLookup = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+  justify: 'text-justify',
+  start: 'text-start',
+  end: 'text-end',
+};
+
+export const textAlignMdLookup = {
+  left: 'md:text-left',
+  center: 'md:text-center',
+  right: 'md:text-right',
+  justify: 'md:text-justify',
+  start: 'md:text-start',
+  end: 'md:text-end',
+};
+
+export const textAlignLgLookup = {
+  left: 'lg:text-left',
+  center: 'lg:text-center',
+  right: 'lg:text-right',
+  justify: 'lg:text-justify',
+  start: 'lg:text-start',
+  end: 'lg:text-end',
+};
+
+export const textAlignXlLookup = {
+  left: 'xl:text-left',
+  center: 'xl:text-center',
+  right: 'xl:text-right',
+  justify: 'xl:text-justify',
+  start: 'xl:text-start',
+  end: 'xl:text-end',
+};
+
+export const fieldSizeLookup = {
+  xxxs: 'h-5',
+  xxs: 'h-6',
+  xs: 'h-7',
+  sm: 'h-8',
+  base: 'h-9',
+  md: 'h-10',
+  lg: 'h-12',
+  xl: 'h-14',
+};
+
+export const fieldSizeMdLookup = {
+  xxxs: 'md:h-5',
+  xxs: 'md:h-6',
+  xs: 'md:h-7',
+  sm: 'md:h-8',
+  base: 'md:h-9',
+  md: 'md:h-10',
+  lg: 'md:h-12',
+  xl: 'md:h-14',
+};
+
+export const fieldSizeLgLookup = {
+  xxxs: 'lg:h-5',
+  xxs: 'lg:h-6',
+  xs: 'lg:h-7',
+  sm: 'lg:h-8',
+  base: 'lg:h-9',
+  md: 'lg:h-10',
+  lg: 'lg:h-12',
+  xl: 'lg:h-14',
+};
+
+export const fieldSizeXlLookup = {
+  xxxs: 'xl:h-5',
+  xxs: 'xl:h-6',
+  xs: 'xl:h-7',
+  sm: 'xl:h-8',
+  base: 'xl:h-9',
+  md: 'xl:h-10',
+  lg: 'xl:h-12',
+  xl: 'xl:h-14',
+};
+
+export const fieldSize2XlLookup = {
+  xxxs: '2xl:h-5',
+  xxs: '2xl:h-6',
+  xs: '2xl:h-7',
+  sm: '2xl:h-8',
+  base: '2xl:h-9',
+  md: '2xl:h-10',
+  lg: '2xl:h-12',
+  xl: '2xl:h-14',
+};
+
+export const radiusLookup = {
+  sm: 'rounded-sm',
+  rounded: 'rounded',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  '2xl': 'rounded-2xl',
+  '3xl': 'rounded-3xl',
+  full: 'rounded-full',
+  none: 'rounded-none',
+};
+
+export const radiusMdLookup = {
+  sm: 'md:rounded-sm',
+  rounded: 'md:rounded',
+  md: 'md:rounded-md',
+  lg: 'md:rounded-lg',
+  xl: 'md:rounded-xl',
+  '2xl': 'md:rounded-2xl',
+  '3xl': 'md:rounded-3xl',
+  full: 'md:rounded-full',
+  none: 'md:rounded-none',
+};
+
+export const radiusLgLookup = {
+  sm: 'lg:rounded-sm',
+  rounded: 'lg:rounded',
+  md: 'lg:rounded-md',
+  lg: 'lg:rounded-lg',
+  xl: 'lg:rounded-xl',
+  '2xl': 'lg:rounded-2xl',
+  '3xl': 'lg:rounded-3xl',
+  full: 'lg:rounded-full',
+  none: 'lg:rounded-none',
+};
+
+export const radiusXlLookup = {
+  sm: 'xl:rounded-sm',
+  rounded: 'xl:rounded',
+  md: 'xl:rounded-md',
+  lg: 'xl:rounded-lg',
+  xl: 'xl:rounded-xl',
+  '2xl': 'xl:rounded-2xl',
+  '3xl': 'xl:rounded-3xl',
+  full: 'xl:rounded-full',
+  none: 'xl:rounded-none',
+};
+
+export const sizeLookup = {
+  0: 'size-0',
+  0.5: 'size-0.5',
+  1: 'size-1',
+  1.5: 'size-1.5',
+  2: 'size-2',
+  2.5: 'size-2.5',
+  3: 'size-3',
+  3.5: 'size-3.5',
+  4: 'size-4',
+  5: 'size-5',
+  6: 'size-6',
+  7: 'size-7',
+  8: 'size-8',
+  9: 'size-9',
+  10: 'size-10',
+  11: 'size-11',
+  12: 'size-12',
+  14: 'size-14',
+  16: 'size-16',
+  20: 'size-20',
+  24: 'size-24',
+  28: 'size-28',
+  32: 'size-32',
+  36: 'size-36',
+  40: 'size-40',
+};
+
+export const sizeMdLookup = {
+  0: 'md:size-0',
+  0.5: 'md:size-0.5',
+  1: 'md:size-1',
+  1.5: 'md:size-1.5',
+  2: 'md:size-2',
+  2.5: 'md:size-2.5',
+  3: 'md:size-3',
+  3.5: 'md:size-3.5',
+  4: 'md:size-4',
+  5: 'md:size-5',
+  6: 'md:size-6',
+  7: 'md:size-7',
+  8: 'md:size-8',
+  9: 'md:size-9',
+  10: 'md:size-10',
+  11: 'md:size-11',
+  12: 'md:size-12',
+  14: 'md:size-14',
+  16: 'md:size-16',
+  20: 'md:size-20',
+  24: 'md:size-24',
+  28: 'md:size-28',
+  32: 'md:size-32',
+  36: 'md:size-36',
+  40: 'md:size-40',
+};
+
+export const sizeLgLookup = {
+  0: 'lg:size-0',
+  0.5: 'lg:size-0.5',
+  1: 'lg:size-1',
+  1.5: 'lg:size-1.5',
+  2: 'lg:size-2',
+  2.5: 'lg:size-2.5',
+  3: 'lg:size-3',
+  3.5: 'lg:size-3.5',
+  4: 'lg:size-4',
+  5: 'lg:size-5',
+  6: 'lg:size-6',
+  7: 'lg:size-7',
+  8: 'lg:size-8',
+  9: 'lg:size-9',
+  10: 'lg:size-10',
+  11: 'lg:size-11',
+  12: 'lg:size-12',
+  14: 'lg:size-14',
+  16: 'lg:size-16',
+  20: 'lg:size-20',
+  24: 'lg:size-24',
+  28: 'lg:size-28',
+  32: 'lg:size-32',
+  36: 'lg:size-36',
+  40: 'lg:size-40',
+};
+
+export const sizeXlLookup = {
+  0: 'xl:size-0',
+  0.5: 'xl:size-0.5',
+  1: 'xl:size-1',
+  1.5: 'xl:size-1.5',
+  2: 'xl:size-2',
+  2.5: 'xl:size-2.5',
+  3: 'xl:size-3',
+  3.5: 'xl:size-3.5',
+  4: 'xl:size-4',
+  5: 'xl:size-5',
+  6: 'xl:size-6',
+  7: 'xl:size-7',
+  8: 'xl:size-8',
+  9: 'xl:size-9',
+  10: 'xl:size-10',
+  11: 'xl:size-11',
+  12: 'xl:size-12',
+  14: 'xl:size-14',
+  16: 'xl:size-16',
+  20: 'xl:size-20',
+  24: 'xl:size-24',
+  28: 'xl:size-28',
+  32: 'xl:size-32',
+  36: 'xl:size-36',
+  40: 'xl:size-40',
+};
+
+export const size2xlLookup = {
+  0: '2xl:size-0',
+  0.5: '2xl:size-0.5',
+  1: '2xl:size-1',
+  1.5: '2xl:size-1.5',
+  2: '2xl:size-2',
+  2.5: '2xl:size-2.5',
+  3: '2xl:size-3',
+  3.5: '2xl:size-3.5',
+  4: '2xl:size-4',
+  5: '2xl:size-5',
+  6: '2xl:size-6',
+  7: '2xl:size-7',
+  8: '2xl:size-8',
+  9: '2xl:size-9',
+  10: '2xl:size-10',
+  11: '2xl:size-11',
+  12: '2xl:size-12',
+  14: '2xl:size-14',
+  16: '2xl:size-16',
+  20: '2xl:size-20',
+  24: '2xl:size-24',
+  28: '2xl:size-28',
+  32: '2xl:size-32',
+  36: '2xl:size-36',
+  40: '2xl:size-40',
+};
+
+export const colorLookup = {
+  primary: 'text-primary',
+  secondary: 'text-secondary',
+  success: 'text-green-500',
+  danger: 'text-red-500',
+  white: 'text-white',
+  black: 'text-black',
+};
+
+export const color2XlLookup = {
+  primary: '2xl:text-primary',
+  secondary: '2xl:text-secondary',
+  success: '2xl:text-green-500',
+  danger: '2xl:text-red-500',
+  white: '2xl:text-white',
+  black: '2xl:text-black',
+};
+
+export const colorXlLookup = {
+  primary: 'xl:text-primary',
+  secondary: 'xl:text-secondary',
+  success: 'xl:text-green-500',
+  danger: 'xl:text-red-500',
+  white: 'xl:text-white',
+  black: 'xl:text-black',
+};
+
+export const colorLgLookup = {
+  primary: 'lg:text-primary',
+  secondary: 'lg:text-secondary',
+  success: 'lg:text-green-500',
+  danger: 'lg:text-red-500',
+  white: 'lg:text-white',
+  black: 'lg:text-black',
+};
+
+export const colorMdLookup = {
+  primary: 'md:text-primary',
+  secondary: 'md:text-secondary',
+  success: 'md:text-green-500',
+  danger: 'md:text-red-500',
+  white: 'md:text-white',
+  black: 'md:text-black',
+};
+
+export const bgColorLookup = {
+  primary: 'bg-primary',
+  secondary: 'bg-secondary',
+  success: 'bg-green-500',
+  danger: 'bg-red-500',
+};
+
+export const fontFamilyLookup = {};
+
+export const fontFamilyMdLookup = Object.fromEntries(
+  Object.entries(fontFamilyLookup).map(([k, v]) => [k, `md:${v}`])
+);
+
+export const fontFamilyLgLookup = Object.fromEntries(
+  Object.entries(fontFamilyLookup).map(([k, v]) => [k, `lg:${v}`])
+);
+
+export const fontFamilyXlLookup = Object.fromEntries(
+  Object.entries(fontFamilyLookup).map(([k, v]) => [k, `xl:${v}`])
+);