first commit

examples/data-fetching/tailwind.config.js

@@ -0,0 +1,100 @@
+const { fontFamily } = require('tailwindcss/defaultTheme')
+
+const radixHeightCSSVars =
+    'var(--radix-accordion-content-height, var(--radix-collapsible-content-height))'
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+    theme: {
+        container: {
+            center: true,
+            padding: '2rem',
+            screens: {
+                '2xl': '1400px',
+            },
+        },
+        extend: {
+            keyframes: {
+                'radix-slide-down': {
+                    from: { height: 0 },
+                    to: { height: radixHeightCSSVars },
+                },
+                'radix-slide-up': {
+                    from: { height: radixHeightCSSVars },
+                    to: { height: 0 },
+                },
+            },
+            animation: {
+                'accordion-down': 'radix-slide-down 0.2s ease-out',
+                'accordion-up': 'radix-slide-up 0.2s ease-out',
+                'collapsible-down': 'radix-slide-down 0.2s ease-out',
+                'collapsible-up': 'radix-slide-up 0.2s ease-out',
+            },
+            borderRadius: {
+                lg: `0.5rem`,
+                md: `calc(0.5rem - 2px)`,
+                sm: 'calc(0.5rem - 4px)',
+            },
+            fontFamily: {
+                sans: ['var(--font-sans, Lexend)', ...fontFamily.sans],
+            },
+            variables: {
+                DEFAULT: {
+                    color: {
+                        primary: {
+                            DEFAULT: 'var(--color-primary-100)',
+                            100: '15 23 42',
+                            500: '100 116 139',
+                            700: '148 163 184',
+                            900: '226 232 240',
+                        },
+                        secondary: '241 245 249',
+                        white: '255 255 255',
+                        danger: '255 0 0',
+                    },
+                },
+            },
+            colors: {
+                primary: {
+                    DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
+                    fg: 'rgb(var(--color-secondary) / <alpha-value>)',
+                },
+                secondary: {
+                    DEFAULT: 'rgb(var(--color-secondary) / <alpha-value>)',
+                    fg: 'rgb(var(--color-primary) / <alpha-value>)',
+                },
+                accent: {
+                    DEFAULT: 'rgb(var(--color-secondary) / <alpha-value>)',
+                    fg: 'rgb(var(--color-primary) / <alpha-value>)',
+                },
+                danger: {
+                    DEFAULT: 'rgb(var(--color-danger) / <alpha-value>)',
+                    fg: 'rgb(var(--color-secondary) / <alpha-value>)',
+                },
+                popover: {
+                    DEFAULT: 'rgb(var(--color-white) / <alpha-value>)',
+                    fg: 'rgb(var(--color-primary) / <alpha-value>)',
+                },
+                card: {
+                    DEFAULT: 'rgb(var(--color-white) / <alpha-value>)',
+                    fg: 'rgb(var(--color-primary) / <alpha-value>)',
+                },
+                muted: {
+                    DEFAULT: 'rgb(var(--color-secondary) / <alpha-value>)',
+                    fg: 'rgb(var(--color-primary-500) / <alpha-value>)',
+                },
+                background: 'rgb(var(--color-white) / <alpha-value>)',
+                foreground: 'rgb(var(--color-primary) / <alpha-value>)',
+                ring: 'rgb(var(--color-primary-700) / <alpha-value>)',
+                input: 'rgb(var(--color-primary-900) / <alpha-value>)',
+                border: 'rgb(var(--color-primary-900) / <alpha-value>)',
+            },
+        },
+    },
+
+    plugins: [
+        require('tailwindcss-animate'),
+        require('@mertasan/tailwindcss-variables'),
+    ],
+}