From 9f1acb8ca08e37c8011958e9e9cf9eb7639ea06d Mon Sep 17 00:00:00 2001 From: Bloodiko Date: Thu, 17 Jul 2025 22:14:34 +0200 Subject: [PATCH 1/4] WIP Migrate to real Tailwind --- .gitignore | 3 +- deno.json | 4 +- fresh.config.ts | 9 +- routes/_app.tsx | 2 +- static/styles.css | 4 + tailwind.config.ts | 1071 ++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 1087 insertions(+), 6 deletions(-) create mode 100644 tailwind.config.ts diff --git a/.gitignore b/.gitignore index 69c1e7d..efaa7c2 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,5 @@ node_modules/ secretshare* -vendor/ \ No newline at end of file +vendor/ +node_modules/ diff --git a/deno.json b/deno.json index da5e64a..7445be2 100644 --- a/deno.json +++ b/deno.json @@ -19,6 +19,7 @@ }, "lint": { "rules": { "tags": ["fresh", "recommended"] } }, "exclude": ["**/_fresh/*"], + "nodeModulesDir": "auto", "imports": { "@/": "./", "@bjesuiter/deno-tailwindcss-iso": "jsr:@bjesuiter/deno-tailwindcss-iso@1.0.5-poc.1", @@ -29,7 +30,8 @@ "preact/": "https://esm.sh/preact@10.22.0/", "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2", "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1", - "tailwind-merge": "npm:tailwind-merge@^3.3.1" + "tailwind-merge": "npm:tailwind-merge@^3.3.1", + "tailwindcss": "npm:tailwindcss@^3.4.1" }, "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" } } diff --git a/fresh.config.ts b/fresh.config.ts index e7b63d9..849d516 100644 --- a/fresh.config.ts +++ b/fresh.config.ts @@ -1,3 +1,6 @@ -import { defineConfig } from "$fresh/server.ts"; - -export default defineConfig({}); +import { defineConfig } from "$fresh/server.ts"; +import tailwind from "$fresh/plugins/tailwind.ts"; + +export default defineConfig({ + plugins: [tailwind()], +}); diff --git a/routes/_app.tsx b/routes/_app.tsx index 28465a9..11d7856 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -7,7 +7,7 @@ export default function App({ Component }: PageProps) { SecretShare - + {/* */} diff --git a/static/styles.css b/static/styles.css index 65beac6..368fdd8 100644 --- a/static/styles.css +++ b/static/styles.css @@ -57,3 +57,7 @@ html { .tabular-nums { font-variant-numeric: tabular-nums; } + +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..66be226 --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,1071 @@ +import type { Config } from 'tailwindcss' + +export default { + content: [ + "./routes/**/*.{ts,tsx}", + "./islands/**/*.{ts,tsx}", + "./components/**/*.{ts,tsx}", + "./utils/**/*.{ts,tsx}", + "./static/**/*.{html,js}", + ], + presets: [], + darkMode: 'media', // or 'class' + theme: { + accentColor: ({ theme }) => ({ + ...theme('colors'), + auto: 'auto', + }), + animation: { + none: 'none', + spin: 'spin 1s linear infinite', + ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', + pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', + bounce: 'bounce 1s infinite', + }, + aria: { + busy: 'busy="true"', + checked: 'checked="true"', + disabled: 'disabled="true"', + expanded: 'expanded="true"', + hidden: 'hidden="true"', + pressed: 'pressed="true"', + readonly: 'readonly="true"', + required: 'required="true"', + selected: 'selected="true"', + }, + aspectRatio: { + auto: 'auto', + square: '1 / 1', + video: '16 / 9', + }, + backdropBlur: ({ theme }) => theme('blur'), + backdropBrightness: ({ theme }) => theme('brightness'), + backdropContrast: ({ theme }) => theme('contrast'), + backdropGrayscale: ({ theme }) => theme('grayscale'), + backdropHueRotate: ({ theme }) => theme('hueRotate'), + backdropInvert: ({ theme }) => theme('invert'), + backdropOpacity: ({ theme }) => theme('opacity'), + backdropSaturate: ({ theme }) => theme('saturate'), + backdropSepia: ({ theme }) => theme('sepia'), + backgroundColor: ({ theme }) => theme('colors'), + backgroundImage: { + none: 'none', + 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))', + 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))', + 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))', + 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))', + 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))', + 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', + 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', + 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', + }, + backgroundOpacity: ({ theme }) => theme('opacity'), + backgroundPosition: { + bottom: 'bottom', + center: 'center', + left: 'left', + 'left-bottom': 'left bottom', + 'left-top': 'left top', + right: 'right', + 'right-bottom': 'right bottom', + 'right-top': 'right top', + top: 'top', + }, + backgroundSize: { + auto: 'auto', + cover: 'cover', + contain: 'contain', + }, + blur: { + 0: '0', + none: '', + sm: '4px', + DEFAULT: '8px', + md: '12px', + lg: '16px', + xl: '24px', + '2xl': '40px', + '3xl': '64px', + }, + borderColor: ({ theme }) => ({ + ...theme('colors'), + DEFAULT: theme('colors.gray.200', 'currentColor'), + }), + borderOpacity: ({ theme }) => theme('opacity'), + borderRadius: { + none: '0px', + sm: '0.125rem', + DEFAULT: '0.25rem', + md: '0.375rem', + lg: '0.5rem', + xl: '0.75rem', + '2xl': '1rem', + '3xl': '1.5rem', + full: '9999px', + }, + borderSpacing: ({ theme }) => ({ + ...theme('spacing'), + }), + borderWidth: { + DEFAULT: '1px', + 0: '0px', + 2: '2px', + 4: '4px', + 8: '8px', + }, + boxShadow: { + sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', + DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', + md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', + lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', + xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', + '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)', + inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', + none: 'none', + }, + boxShadowColor: ({ theme }) => theme('colors'), + brightness: { + 0: '0', + 50: '.5', + 75: '.75', + 90: '.9', + 95: '.95', + 100: '1', + 105: '1.05', + 110: '1.1', + 125: '1.25', + 150: '1.5', + 200: '2', + }, + caretColor: ({ theme }) => theme('colors'), + colors: ({ colors }) => ({ + inherit: colors.inherit, + current: colors.current, + transparent: colors.transparent, + black: colors.black, + white: colors.white, + slate: colors.slate, + gray: colors.gray, + zinc: colors.zinc, + neutral: colors.neutral, + stone: colors.stone, + red: colors.red, + orange: colors.orange, + amber: colors.amber, + yellow: colors.yellow, + lime: colors.lime, + green: colors.green, + emerald: colors.emerald, + teal: colors.teal, + cyan: colors.cyan, + sky: colors.sky, + blue: colors.blue, + indigo: colors.indigo, + violet: colors.violet, + purple: colors.purple, + fuchsia: colors.fuchsia, + pink: colors.pink, + rose: colors.rose, + }), + columns: { + auto: 'auto', + 1: '1', + 2: '2', + 3: '3', + 4: '4', + 5: '5', + 6: '6', + 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + '3xs': '16rem', + '2xs': '18rem', + xs: '20rem', + sm: '24rem', + md: '28rem', + lg: '32rem', + xl: '36rem', + '2xl': '42rem', + '3xl': '48rem', + '4xl': '56rem', + '5xl': '64rem', + '6xl': '72rem', + '7xl': '80rem', + }, + container: {}, + content: { + none: 'none', + }, + contrast: { + 0: '0', + 50: '.5', + 75: '.75', + 100: '1', + 125: '1.25', + 150: '1.5', + 200: '2', + }, + cursor: { + auto: 'auto', + default: 'default', + pointer: 'pointer', + wait: 'wait', + text: 'text', + move: 'move', + help: 'help', + 'not-allowed': 'not-allowed', + none: 'none', + 'context-menu': 'context-menu', + progress: 'progress', + cell: 'cell', + crosshair: 'crosshair', + 'vertical-text': 'vertical-text', + alias: 'alias', + copy: 'copy', + 'no-drop': 'no-drop', + grab: 'grab', + grabbing: 'grabbing', + 'all-scroll': 'all-scroll', + 'col-resize': 'col-resize', + 'row-resize': 'row-resize', + 'n-resize': 'n-resize', + 'e-resize': 'e-resize', + 's-resize': 's-resize', + 'w-resize': 'w-resize', + 'ne-resize': 'ne-resize', + 'nw-resize': 'nw-resize', + 'se-resize': 'se-resize', + 'sw-resize': 'sw-resize', + 'ew-resize': 'ew-resize', + 'ns-resize': 'ns-resize', + 'nesw-resize': 'nesw-resize', + 'nwse-resize': 'nwse-resize', + 'zoom-in': 'zoom-in', + 'zoom-out': 'zoom-out', + }, + divideColor: ({ theme }) => theme('borderColor'), + divideOpacity: ({ theme }) => theme('borderOpacity'), + divideWidth: ({ theme }) => theme('borderWidth'), + dropShadow: { + sm: '0 1px 1px rgb(0 0 0 / 0.05)', + DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'], + md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'], + lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'], + xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'], + '2xl': '0 25px 25px rgb(0 0 0 / 0.15)', + none: '0 0 #0000', + }, + fill: ({ theme }) => ({ + none: 'none', + ...theme('colors'), + }), + flex: { + 1: '1 1 0%', + auto: '1 1 auto', + initial: '0 1 auto', + none: 'none', + }, + flexBasis: ({ theme }) => ({ + auto: 'auto', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + }), + flexGrow: { + 0: '0', + DEFAULT: '1', + }, + flexShrink: { + 0: '0', + DEFAULT: '1', + }, + fontFamily: { + sans: [ + 'ui-sans-serif', + 'system-ui', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + '"Noto Color Emoji"', + ], + serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], + mono: [ + 'ui-monospace', + 'SFMono-Regular', + 'Menlo', + 'Monaco', + 'Consolas', + '"Liberation Mono"', + '"Courier New"', + 'monospace', + ], + }, + fontSize: { + xs: ['0.75rem', { lineHeight: '1rem' }], + sm: ['0.875rem', { lineHeight: '1.25rem' }], + base: ['1rem', { lineHeight: '1.5rem' }], + lg: ['1.125rem', { lineHeight: '1.75rem' }], + xl: ['1.25rem', { lineHeight: '1.75rem' }], + '2xl': ['1.5rem', { lineHeight: '2rem' }], + '3xl': ['1.875rem', { lineHeight: '2.25rem' }], + '4xl': ['2.25rem', { lineHeight: '2.5rem' }], + '5xl': ['3rem', { lineHeight: '1' }], + '6xl': ['3.75rem', { lineHeight: '1' }], + '7xl': ['4.5rem', { lineHeight: '1' }], + '8xl': ['6rem', { lineHeight: '1' }], + '9xl': ['8rem', { lineHeight: '1' }], + }, + fontWeight: { + thin: '100', + extralight: '200', + light: '300', + normal: '400', + medium: '500', + semibold: '600', + bold: '700', + extrabold: '800', + black: '900', + }, + gap: ({ theme }) => theme('spacing'), + gradientColorStops: ({ theme }) => theme('colors'), + gradientColorStopPositions: { + '0%': '0%', + '5%': '5%', + '10%': '10%', + '15%': '15%', + '20%': '20%', + '25%': '25%', + '30%': '30%', + '35%': '35%', + '40%': '40%', + '45%': '45%', + '50%': '50%', + '55%': '55%', + '60%': '60%', + '65%': '65%', + '70%': '70%', + '75%': '75%', + '80%': '80%', + '85%': '85%', + '90%': '90%', + '95%': '95%', + '100%': '100%', + }, + grayscale: { + 0: '0', + DEFAULT: '100%', + }, + gridAutoColumns: { + auto: 'auto', + min: 'min-content', + max: 'max-content', + fr: 'minmax(0, 1fr)', + }, + gridAutoRows: { + auto: 'auto', + min: 'min-content', + max: 'max-content', + fr: 'minmax(0, 1fr)', + }, + gridColumn: { + auto: 'auto', + 'span-1': 'span 1 / span 1', + 'span-2': 'span 2 / span 2', + 'span-3': 'span 3 / span 3', + 'span-4': 'span 4 / span 4', + 'span-5': 'span 5 / span 5', + 'span-6': 'span 6 / span 6', + 'span-7': 'span 7 / span 7', + 'span-8': 'span 8 / span 8', + 'span-9': 'span 9 / span 9', + 'span-10': 'span 10 / span 10', + 'span-11': 'span 11 / span 11', + 'span-12': 'span 12 / span 12', + 'span-full': '1 / -1', + }, + gridColumnEnd: { + auto: 'auto', + 1: '1', + 2: '2', + 3: '3', + 4: '4', + 5: '5', + 6: '6', + 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + 13: '13', + }, + gridColumnStart: { + auto: 'auto', + 1: '1', + 2: '2', + 3: '3', + 4: '4', + 5: '5', + 6: '6', + 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + 13: '13', + }, + gridRow: { + auto: 'auto', + 'span-1': 'span 1 / span 1', + 'span-2': 'span 2 / span 2', + 'span-3': 'span 3 / span 3', + 'span-4': 'span 4 / span 4', + 'span-5': 'span 5 / span 5', + 'span-6': 'span 6 / span 6', + 'span-7': 'span 7 / span 7', + 'span-8': 'span 8 / span 8', + 'span-9': 'span 9 / span 9', + 'span-10': 'span 10 / span 10', + 'span-11': 'span 11 / span 11', + 'span-12': 'span 12 / span 12', + 'span-full': '1 / -1', + }, + gridRowEnd: { + auto: 'auto', + 1: '1', + 2: '2', + 3: '3', + 4: '4', + 5: '5', + 6: '6', + 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + 13: '13', + }, + gridRowStart: { + auto: 'auto', + 1: '1', + 2: '2', + 3: '3', + 4: '4', + 5: '5', + 6: '6', + 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + 13: '13', + }, + gridTemplateColumns: { + none: 'none', + subgrid: 'subgrid', + 1: 'repeat(1, minmax(0, 1fr))', + 2: 'repeat(2, minmax(0, 1fr))', + 3: 'repeat(3, minmax(0, 1fr))', + 4: 'repeat(4, minmax(0, 1fr))', + 5: 'repeat(5, minmax(0, 1fr))', + 6: 'repeat(6, minmax(0, 1fr))', + 7: 'repeat(7, minmax(0, 1fr))', + 8: 'repeat(8, minmax(0, 1fr))', + 9: 'repeat(9, minmax(0, 1fr))', + 10: 'repeat(10, minmax(0, 1fr))', + 11: 'repeat(11, minmax(0, 1fr))', + 12: 'repeat(12, minmax(0, 1fr))', + }, + gridTemplateRows: { + none: 'none', + subgrid: 'subgrid', + 1: 'repeat(1, minmax(0, 1fr))', + 2: 'repeat(2, minmax(0, 1fr))', + 3: 'repeat(3, minmax(0, 1fr))', + 4: 'repeat(4, minmax(0, 1fr))', + 5: 'repeat(5, minmax(0, 1fr))', + 6: 'repeat(6, minmax(0, 1fr))', + 7: 'repeat(7, minmax(0, 1fr))', + 8: 'repeat(8, minmax(0, 1fr))', + 9: 'repeat(9, minmax(0, 1fr))', + 10: 'repeat(10, minmax(0, 1fr))', + 11: 'repeat(11, minmax(0, 1fr))', + 12: 'repeat(12, minmax(0, 1fr))', + }, + height: ({ theme }) => ({ + auto: 'auto', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + full: '100%', + screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + }), + hueRotate: { + 0: '0deg', + 15: '15deg', + 30: '30deg', + 60: '60deg', + 90: '90deg', + 180: '180deg', + }, + inset: ({ theme }) => ({ + auto: 'auto', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + full: '100%', + }), + invert: { + 0: '0', + DEFAULT: '100%', + }, + keyframes: { + spin: { + to: { + transform: 'rotate(360deg)', + }, + }, + ping: { + '75%, 100%': { + transform: 'scale(2)', + opacity: '0', + }, + }, + pulse: { + '50%': { + opacity: '.5', + }, + }, + bounce: { + '0%, 100%': { + transform: 'translateY(-25%)', + animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', + }, + '50%': { + transform: 'none', + animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', + }, + }, + }, + letterSpacing: { + tighter: '-0.05em', + tight: '-0.025em', + normal: '0em', + wide: '0.025em', + wider: '0.05em', + widest: '0.1em', + }, + lineHeight: { + none: '1', + tight: '1.25', + snug: '1.375', + normal: '1.5', + relaxed: '1.625', + loose: '2', + 3: '.75rem', + 4: '1rem', + 5: '1.25rem', + 6: '1.5rem', + 7: '1.75rem', + 8: '2rem', + 9: '2.25rem', + 10: '2.5rem', + }, + listStyleType: { + none: 'none', + disc: 'disc', + decimal: 'decimal', + }, + listStyleImage: { + none: 'none', + }, + margin: ({ theme }) => ({ + auto: 'auto', + ...theme('spacing'), + }), + lineClamp: { + 1: '1', + 2: '2', + 3: '3', + 4: '4', + 5: '5', + 6: '6', + }, + maxHeight: ({ theme }) => ({ + ...theme('spacing'), + none: 'none', + full: '100%', + screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + }), + maxWidth: ({ theme, breakpoints }) => ({ + ...theme('spacing'), + none: 'none', + xs: '20rem', + sm: '24rem', + md: '28rem', + lg: '32rem', + xl: '36rem', + '2xl': '42rem', + '3xl': '48rem', + '4xl': '56rem', + '5xl': '64rem', + '6xl': '72rem', + '7xl': '80rem', + full: '100%', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + prose: '65ch', + ...breakpoints(theme('screens')), + }), + minHeight: ({ theme }) => ({ + ...theme('spacing'), + full: '100%', + screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + }), + minWidth: ({ theme }) => ({ + ...theme('spacing'), + full: '100%', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + }), + objectPosition: { + bottom: 'bottom', + center: 'center', + left: 'left', + 'left-bottom': 'left bottom', + 'left-top': 'left top', + right: 'right', + 'right-bottom': 'right bottom', + 'right-top': 'right top', + top: 'top', + }, + opacity: { + 0: '0', + 5: '0.05', + 10: '0.1', + 15: '0.15', + 20: '0.2', + 25: '0.25', + 30: '0.3', + 35: '0.35', + 40: '0.4', + 45: '0.45', + 50: '0.5', + 55: '0.55', + 60: '0.6', + 65: '0.65', + 70: '0.7', + 75: '0.75', + 80: '0.8', + 85: '0.85', + 90: '0.9', + 95: '0.95', + 100: '1', + }, + order: { + first: '-9999', + last: '9999', + none: '0', + 1: '1', + 2: '2', + 3: '3', + 4: '4', + 5: '5', + 6: '6', + 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + }, + outlineColor: ({ theme }) => theme('colors'), + outlineOffset: { + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + }, + outlineWidth: { + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + }, + padding: ({ theme }) => theme('spacing'), + placeholderColor: ({ theme }) => theme('colors'), + placeholderOpacity: ({ theme }) => theme('opacity'), + ringColor: ({ theme }) => ({ + DEFAULT: theme('colors.blue.500', '#3b82f6'), + ...theme('colors'), + }), + ringOffsetColor: ({ theme }) => theme('colors'), + ringOffsetWidth: { + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + }, + ringOpacity: ({ theme }) => ({ + DEFAULT: '0.5', + ...theme('opacity'), + }), + ringWidth: { + DEFAULT: '3px', + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + }, + rotate: { + 0: '0deg', + 1: '1deg', + 2: '2deg', + 3: '3deg', + 6: '6deg', + 12: '12deg', + 45: '45deg', + 90: '90deg', + 180: '180deg', + }, + saturate: { + 0: '0', + 50: '.5', + 100: '1', + 150: '1.5', + 200: '2', + }, + scale: { + 0: '0', + 50: '.5', + 75: '.75', + 90: '.9', + 95: '.95', + 100: '1', + 105: '1.05', + 110: '1.1', + 125: '1.25', + 150: '1.5', + }, + screens: { + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', + '2xl': '1536px', + }, + scrollMargin: ({ theme }) => ({ + ...theme('spacing'), + }), + scrollPadding: ({ theme }) => theme('spacing'), + sepia: { + 0: '0', + DEFAULT: '100%', + }, + skew: { + 0: '0deg', + 1: '1deg', + 2: '2deg', + 3: '3deg', + 6: '6deg', + 12: '12deg', + }, + space: ({ theme }) => ({ + ...theme('spacing'), + }), + spacing: { + px: '1px', + 0: '0px', + 0.5: '0.125rem', + 1: '0.25rem', + 1.5: '0.375rem', + 2: '0.5rem', + 2.5: '0.625rem', + 3: '0.75rem', + 3.5: '0.875rem', + 4: '1rem', + 5: '1.25rem', + 6: '1.5rem', + 7: '1.75rem', + 8: '2rem', + 9: '2.25rem', + 10: '2.5rem', + 11: '2.75rem', + 12: '3rem', + 14: '3.5rem', + 16: '4rem', + 20: '5rem', + 24: '6rem', + 28: '7rem', + 32: '8rem', + 36: '9rem', + 40: '10rem', + 44: '11rem', + 48: '12rem', + 52: '13rem', + 56: '14rem', + 60: '15rem', + 64: '16rem', + 72: '18rem', + 80: '20rem', + 96: '24rem', + }, + stroke: ({ theme }) => ({ + none: 'none', + ...theme('colors'), + }), + strokeWidth: { + 0: '0', + 1: '1', + 2: '2', + }, + supports: {}, + data: {}, + textColor: ({ theme }) => theme('colors'), + textDecorationColor: ({ theme }) => theme('colors'), + textDecorationThickness: { + auto: 'auto', + 'from-font': 'from-font', + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + }, + textIndent: ({ theme }) => ({ + ...theme('spacing'), + }), + textOpacity: ({ theme }) => theme('opacity'), + textUnderlineOffset: { + auto: 'auto', + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + }, + transformOrigin: { + center: 'center', + top: 'top', + 'top-right': 'top right', + right: 'right', + 'bottom-right': 'bottom right', + bottom: 'bottom', + 'bottom-left': 'bottom left', + left: 'left', + 'top-left': 'top left', + }, + transitionDelay: { + 0: '0s', + 75: '75ms', + 100: '100ms', + 150: '150ms', + 200: '200ms', + 300: '300ms', + 500: '500ms', + 700: '700ms', + 1000: '1000ms', + }, + transitionDuration: { + DEFAULT: '150ms', + 0: '0s', + 75: '75ms', + 100: '100ms', + 150: '150ms', + 200: '200ms', + 300: '300ms', + 500: '500ms', + 700: '700ms', + 1000: '1000ms', + }, + transitionProperty: { + none: 'none', + all: 'all', + DEFAULT: + 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter', + colors: 'color, background-color, border-color, text-decoration-color, fill, stroke', + opacity: 'opacity', + shadow: 'box-shadow', + transform: 'transform', + }, + transitionTimingFunction: { + DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)', + linear: 'linear', + in: 'cubic-bezier(0.4, 0, 1, 1)', + out: 'cubic-bezier(0, 0, 0.2, 1)', + 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', + }, + translate: ({ theme }) => ({ + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + full: '100%', + }), + size: ({ theme }) => ({ + auto: 'auto', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + }), + width: ({ theme }) => ({ + auto: 'auto', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + screen: '100vw', + svw: '100svw', + lvw: '100lvw', + dvw: '100dvw', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + }), + willChange: { + auto: 'auto', + scroll: 'scroll-position', + contents: 'contents', + transform: 'transform', + }, + zIndex: { + auto: 'auto', + 0: '0', + 10: '10', + 20: '20', + 30: '30', + 40: '40', + 50: '50', + }, + }, + plugins: [], +} satisfies Config + From 69527f391f1d9afc18fb95bb42f9fc0aef3ba061 Mon Sep 17 00:00:00 2001 From: Bloodiko Date: Sat, 19 Jul 2025 19:05:26 +0200 Subject: [PATCH 2/4] styles to real tailwind - reset --- main.ts | 8 - static/styles.css | 66 +-- tailwind.config.ts | 1070 +------------------------------------------- 3 files changed, 9 insertions(+), 1135 deletions(-) diff --git a/main.ts b/main.ts index d75aeaf..404bfb0 100644 --- a/main.ts +++ b/main.ts @@ -9,13 +9,5 @@ import "@std/dotenv/load"; import { start } from "$fresh/server.ts"; import manifest from "./fresh.gen.ts"; import config from "./fresh.config.ts"; -import { computeTailwindStyles } from "./src/utils/cssCache.ts"; - -// custom things to do before starting the server -try { - await computeTailwindStyles(); -} catch (e) { - console.error(`ON STARTUP: Error while computing tailwind styles: `, e); -} await start(manifest, config); diff --git a/static/styles.css b/static/styles.css index 368fdd8..10f6064 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,63 +1,9 @@ - -*, -*::before, -*::after { - box-sizing: border-box; -} - -button, [role="button"] { - cursor: pointer; -} - -button { - background-color: transparent; - padding: 0.5rem; - border: 1px solid black; - border-radius: 4px; - font-size: 1em; -} - -textarea { - resize: both; -} - -button:disabled { - cursor: not-allowed; - opacity: 0.5; -} - -code { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New", monospace; - font-size: 1em; -} -img, -svg { - display: block; -} -img, -video { - max-width: 100%; - height: auto; -} - -html { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} -.transition-colors { - transition-property: background-color, border-color, color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.tabular-nums { - font-variant-numeric: tabular-nums; -} - @tailwind base; @tailwind components; @tailwind utilities; + +@theme { + --color-primary: oklch(0.7751 0.127965 240.0314); + --color-primary-dark: oklch(0.5327 0.1152 242.02); + + } \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 66be226..995bc39 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,1071 +1,7 @@ -import type { Config } from 'tailwindcss' +import { type Config } from "tailwindcss"; export default { content: [ - "./routes/**/*.{ts,tsx}", - "./islands/**/*.{ts,tsx}", - "./components/**/*.{ts,tsx}", - "./utils/**/*.{ts,tsx}", - "./static/**/*.{html,js}", + "{routes,islands,components}/**/*.{ts,tsx,js,jsx}", ], - presets: [], - darkMode: 'media', // or 'class' - theme: { - accentColor: ({ theme }) => ({ - ...theme('colors'), - auto: 'auto', - }), - animation: { - none: 'none', - spin: 'spin 1s linear infinite', - ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', - pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', - bounce: 'bounce 1s infinite', - }, - aria: { - busy: 'busy="true"', - checked: 'checked="true"', - disabled: 'disabled="true"', - expanded: 'expanded="true"', - hidden: 'hidden="true"', - pressed: 'pressed="true"', - readonly: 'readonly="true"', - required: 'required="true"', - selected: 'selected="true"', - }, - aspectRatio: { - auto: 'auto', - square: '1 / 1', - video: '16 / 9', - }, - backdropBlur: ({ theme }) => theme('blur'), - backdropBrightness: ({ theme }) => theme('brightness'), - backdropContrast: ({ theme }) => theme('contrast'), - backdropGrayscale: ({ theme }) => theme('grayscale'), - backdropHueRotate: ({ theme }) => theme('hueRotate'), - backdropInvert: ({ theme }) => theme('invert'), - backdropOpacity: ({ theme }) => theme('opacity'), - backdropSaturate: ({ theme }) => theme('saturate'), - backdropSepia: ({ theme }) => theme('sepia'), - backgroundColor: ({ theme }) => theme('colors'), - backgroundImage: { - none: 'none', - 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))', - 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))', - 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))', - 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))', - 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))', - 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', - 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', - 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', - }, - backgroundOpacity: ({ theme }) => theme('opacity'), - backgroundPosition: { - bottom: 'bottom', - center: 'center', - left: 'left', - 'left-bottom': 'left bottom', - 'left-top': 'left top', - right: 'right', - 'right-bottom': 'right bottom', - 'right-top': 'right top', - top: 'top', - }, - backgroundSize: { - auto: 'auto', - cover: 'cover', - contain: 'contain', - }, - blur: { - 0: '0', - none: '', - sm: '4px', - DEFAULT: '8px', - md: '12px', - lg: '16px', - xl: '24px', - '2xl': '40px', - '3xl': '64px', - }, - borderColor: ({ theme }) => ({ - ...theme('colors'), - DEFAULT: theme('colors.gray.200', 'currentColor'), - }), - borderOpacity: ({ theme }) => theme('opacity'), - borderRadius: { - none: '0px', - sm: '0.125rem', - DEFAULT: '0.25rem', - md: '0.375rem', - lg: '0.5rem', - xl: '0.75rem', - '2xl': '1rem', - '3xl': '1.5rem', - full: '9999px', - }, - borderSpacing: ({ theme }) => ({ - ...theme('spacing'), - }), - borderWidth: { - DEFAULT: '1px', - 0: '0px', - 2: '2px', - 4: '4px', - 8: '8px', - }, - boxShadow: { - sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', - DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', - md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', - lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', - xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', - '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)', - inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', - none: 'none', - }, - boxShadowColor: ({ theme }) => theme('colors'), - brightness: { - 0: '0', - 50: '.5', - 75: '.75', - 90: '.9', - 95: '.95', - 100: '1', - 105: '1.05', - 110: '1.1', - 125: '1.25', - 150: '1.5', - 200: '2', - }, - caretColor: ({ theme }) => theme('colors'), - colors: ({ colors }) => ({ - inherit: colors.inherit, - current: colors.current, - transparent: colors.transparent, - black: colors.black, - white: colors.white, - slate: colors.slate, - gray: colors.gray, - zinc: colors.zinc, - neutral: colors.neutral, - stone: colors.stone, - red: colors.red, - orange: colors.orange, - amber: colors.amber, - yellow: colors.yellow, - lime: colors.lime, - green: colors.green, - emerald: colors.emerald, - teal: colors.teal, - cyan: colors.cyan, - sky: colors.sky, - blue: colors.blue, - indigo: colors.indigo, - violet: colors.violet, - purple: colors.purple, - fuchsia: colors.fuchsia, - pink: colors.pink, - rose: colors.rose, - }), - columns: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - '3xs': '16rem', - '2xs': '18rem', - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', - '7xl': '80rem', - }, - container: {}, - content: { - none: 'none', - }, - contrast: { - 0: '0', - 50: '.5', - 75: '.75', - 100: '1', - 125: '1.25', - 150: '1.5', - 200: '2', - }, - cursor: { - auto: 'auto', - default: 'default', - pointer: 'pointer', - wait: 'wait', - text: 'text', - move: 'move', - help: 'help', - 'not-allowed': 'not-allowed', - none: 'none', - 'context-menu': 'context-menu', - progress: 'progress', - cell: 'cell', - crosshair: 'crosshair', - 'vertical-text': 'vertical-text', - alias: 'alias', - copy: 'copy', - 'no-drop': 'no-drop', - grab: 'grab', - grabbing: 'grabbing', - 'all-scroll': 'all-scroll', - 'col-resize': 'col-resize', - 'row-resize': 'row-resize', - 'n-resize': 'n-resize', - 'e-resize': 'e-resize', - 's-resize': 's-resize', - 'w-resize': 'w-resize', - 'ne-resize': 'ne-resize', - 'nw-resize': 'nw-resize', - 'se-resize': 'se-resize', - 'sw-resize': 'sw-resize', - 'ew-resize': 'ew-resize', - 'ns-resize': 'ns-resize', - 'nesw-resize': 'nesw-resize', - 'nwse-resize': 'nwse-resize', - 'zoom-in': 'zoom-in', - 'zoom-out': 'zoom-out', - }, - divideColor: ({ theme }) => theme('borderColor'), - divideOpacity: ({ theme }) => theme('borderOpacity'), - divideWidth: ({ theme }) => theme('borderWidth'), - dropShadow: { - sm: '0 1px 1px rgb(0 0 0 / 0.05)', - DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'], - md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'], - lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'], - xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'], - '2xl': '0 25px 25px rgb(0 0 0 / 0.15)', - none: '0 0 #0000', - }, - fill: ({ theme }) => ({ - none: 'none', - ...theme('colors'), - }), - flex: { - 1: '1 1 0%', - auto: '1 1 auto', - initial: '0 1 auto', - none: 'none', - }, - flexBasis: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - }), - flexGrow: { - 0: '0', - DEFAULT: '1', - }, - flexShrink: { - 0: '0', - DEFAULT: '1', - }, - fontFamily: { - sans: [ - 'ui-sans-serif', - 'system-ui', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', - ], - serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], - mono: [ - 'ui-monospace', - 'SFMono-Regular', - 'Menlo', - 'Monaco', - 'Consolas', - '"Liberation Mono"', - '"Courier New"', - 'monospace', - ], - }, - fontSize: { - xs: ['0.75rem', { lineHeight: '1rem' }], - sm: ['0.875rem', { lineHeight: '1.25rem' }], - base: ['1rem', { lineHeight: '1.5rem' }], - lg: ['1.125rem', { lineHeight: '1.75rem' }], - xl: ['1.25rem', { lineHeight: '1.75rem' }], - '2xl': ['1.5rem', { lineHeight: '2rem' }], - '3xl': ['1.875rem', { lineHeight: '2.25rem' }], - '4xl': ['2.25rem', { lineHeight: '2.5rem' }], - '5xl': ['3rem', { lineHeight: '1' }], - '6xl': ['3.75rem', { lineHeight: '1' }], - '7xl': ['4.5rem', { lineHeight: '1' }], - '8xl': ['6rem', { lineHeight: '1' }], - '9xl': ['8rem', { lineHeight: '1' }], - }, - fontWeight: { - thin: '100', - extralight: '200', - light: '300', - normal: '400', - medium: '500', - semibold: '600', - bold: '700', - extrabold: '800', - black: '900', - }, - gap: ({ theme }) => theme('spacing'), - gradientColorStops: ({ theme }) => theme('colors'), - gradientColorStopPositions: { - '0%': '0%', - '5%': '5%', - '10%': '10%', - '15%': '15%', - '20%': '20%', - '25%': '25%', - '30%': '30%', - '35%': '35%', - '40%': '40%', - '45%': '45%', - '50%': '50%', - '55%': '55%', - '60%': '60%', - '65%': '65%', - '70%': '70%', - '75%': '75%', - '80%': '80%', - '85%': '85%', - '90%': '90%', - '95%': '95%', - '100%': '100%', - }, - grayscale: { - 0: '0', - DEFAULT: '100%', - }, - gridAutoColumns: { - auto: 'auto', - min: 'min-content', - max: 'max-content', - fr: 'minmax(0, 1fr)', - }, - gridAutoRows: { - auto: 'auto', - min: 'min-content', - max: 'max-content', - fr: 'minmax(0, 1fr)', - }, - gridColumn: { - auto: 'auto', - 'span-1': 'span 1 / span 1', - 'span-2': 'span 2 / span 2', - 'span-3': 'span 3 / span 3', - 'span-4': 'span 4 / span 4', - 'span-5': 'span 5 / span 5', - 'span-6': 'span 6 / span 6', - 'span-7': 'span 7 / span 7', - 'span-8': 'span 8 / span 8', - 'span-9': 'span 9 / span 9', - 'span-10': 'span 10 / span 10', - 'span-11': 'span 11 / span 11', - 'span-12': 'span 12 / span 12', - 'span-full': '1 / -1', - }, - gridColumnEnd: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', - }, - gridColumnStart: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', - }, - gridRow: { - auto: 'auto', - 'span-1': 'span 1 / span 1', - 'span-2': 'span 2 / span 2', - 'span-3': 'span 3 / span 3', - 'span-4': 'span 4 / span 4', - 'span-5': 'span 5 / span 5', - 'span-6': 'span 6 / span 6', - 'span-7': 'span 7 / span 7', - 'span-8': 'span 8 / span 8', - 'span-9': 'span 9 / span 9', - 'span-10': 'span 10 / span 10', - 'span-11': 'span 11 / span 11', - 'span-12': 'span 12 / span 12', - 'span-full': '1 / -1', - }, - gridRowEnd: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', - }, - gridRowStart: { - auto: 'auto', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - 13: '13', - }, - gridTemplateColumns: { - none: 'none', - subgrid: 'subgrid', - 1: 'repeat(1, minmax(0, 1fr))', - 2: 'repeat(2, minmax(0, 1fr))', - 3: 'repeat(3, minmax(0, 1fr))', - 4: 'repeat(4, minmax(0, 1fr))', - 5: 'repeat(5, minmax(0, 1fr))', - 6: 'repeat(6, minmax(0, 1fr))', - 7: 'repeat(7, minmax(0, 1fr))', - 8: 'repeat(8, minmax(0, 1fr))', - 9: 'repeat(9, minmax(0, 1fr))', - 10: 'repeat(10, minmax(0, 1fr))', - 11: 'repeat(11, minmax(0, 1fr))', - 12: 'repeat(12, minmax(0, 1fr))', - }, - gridTemplateRows: { - none: 'none', - subgrid: 'subgrid', - 1: 'repeat(1, minmax(0, 1fr))', - 2: 'repeat(2, minmax(0, 1fr))', - 3: 'repeat(3, minmax(0, 1fr))', - 4: 'repeat(4, minmax(0, 1fr))', - 5: 'repeat(5, minmax(0, 1fr))', - 6: 'repeat(6, minmax(0, 1fr))', - 7: 'repeat(7, minmax(0, 1fr))', - 8: 'repeat(8, minmax(0, 1fr))', - 9: 'repeat(9, minmax(0, 1fr))', - 10: 'repeat(10, minmax(0, 1fr))', - 11: 'repeat(11, minmax(0, 1fr))', - 12: 'repeat(12, minmax(0, 1fr))', - }, - height: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - full: '100%', - screen: '100vh', - svh: '100svh', - lvh: '100lvh', - dvh: '100dvh', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', - }), - hueRotate: { - 0: '0deg', - 15: '15deg', - 30: '30deg', - 60: '60deg', - 90: '90deg', - 180: '180deg', - }, - inset: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - full: '100%', - }), - invert: { - 0: '0', - DEFAULT: '100%', - }, - keyframes: { - spin: { - to: { - transform: 'rotate(360deg)', - }, - }, - ping: { - '75%, 100%': { - transform: 'scale(2)', - opacity: '0', - }, - }, - pulse: { - '50%': { - opacity: '.5', - }, - }, - bounce: { - '0%, 100%': { - transform: 'translateY(-25%)', - animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', - }, - '50%': { - transform: 'none', - animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', - }, - }, - }, - letterSpacing: { - tighter: '-0.05em', - tight: '-0.025em', - normal: '0em', - wide: '0.025em', - wider: '0.05em', - widest: '0.1em', - }, - lineHeight: { - none: '1', - tight: '1.25', - snug: '1.375', - normal: '1.5', - relaxed: '1.625', - loose: '2', - 3: '.75rem', - 4: '1rem', - 5: '1.25rem', - 6: '1.5rem', - 7: '1.75rem', - 8: '2rem', - 9: '2.25rem', - 10: '2.5rem', - }, - listStyleType: { - none: 'none', - disc: 'disc', - decimal: 'decimal', - }, - listStyleImage: { - none: 'none', - }, - margin: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - }), - lineClamp: { - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - }, - maxHeight: ({ theme }) => ({ - ...theme('spacing'), - none: 'none', - full: '100%', - screen: '100vh', - svh: '100svh', - lvh: '100lvh', - dvh: '100dvh', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', - }), - maxWidth: ({ theme, breakpoints }) => ({ - ...theme('spacing'), - none: 'none', - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', - '7xl': '80rem', - full: '100%', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', - prose: '65ch', - ...breakpoints(theme('screens')), - }), - minHeight: ({ theme }) => ({ - ...theme('spacing'), - full: '100%', - screen: '100vh', - svh: '100svh', - lvh: '100lvh', - dvh: '100dvh', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', - }), - minWidth: ({ theme }) => ({ - ...theme('spacing'), - full: '100%', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', - }), - objectPosition: { - bottom: 'bottom', - center: 'center', - left: 'left', - 'left-bottom': 'left bottom', - 'left-top': 'left top', - right: 'right', - 'right-bottom': 'right bottom', - 'right-top': 'right top', - top: 'top', - }, - opacity: { - 0: '0', - 5: '0.05', - 10: '0.1', - 15: '0.15', - 20: '0.2', - 25: '0.25', - 30: '0.3', - 35: '0.35', - 40: '0.4', - 45: '0.45', - 50: '0.5', - 55: '0.55', - 60: '0.6', - 65: '0.65', - 70: '0.7', - 75: '0.75', - 80: '0.8', - 85: '0.85', - 90: '0.9', - 95: '0.95', - 100: '1', - }, - order: { - first: '-9999', - last: '9999', - none: '0', - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - 6: '6', - 7: '7', - 8: '8', - 9: '9', - 10: '10', - 11: '11', - 12: '12', - }, - outlineColor: ({ theme }) => theme('colors'), - outlineOffset: { - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', - }, - outlineWidth: { - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', - }, - padding: ({ theme }) => theme('spacing'), - placeholderColor: ({ theme }) => theme('colors'), - placeholderOpacity: ({ theme }) => theme('opacity'), - ringColor: ({ theme }) => ({ - DEFAULT: theme('colors.blue.500', '#3b82f6'), - ...theme('colors'), - }), - ringOffsetColor: ({ theme }) => theme('colors'), - ringOffsetWidth: { - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', - }, - ringOpacity: ({ theme }) => ({ - DEFAULT: '0.5', - ...theme('opacity'), - }), - ringWidth: { - DEFAULT: '3px', - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', - }, - rotate: { - 0: '0deg', - 1: '1deg', - 2: '2deg', - 3: '3deg', - 6: '6deg', - 12: '12deg', - 45: '45deg', - 90: '90deg', - 180: '180deg', - }, - saturate: { - 0: '0', - 50: '.5', - 100: '1', - 150: '1.5', - 200: '2', - }, - scale: { - 0: '0', - 50: '.5', - 75: '.75', - 90: '.9', - 95: '.95', - 100: '1', - 105: '1.05', - 110: '1.1', - 125: '1.25', - 150: '1.5', - }, - screens: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', - }, - scrollMargin: ({ theme }) => ({ - ...theme('spacing'), - }), - scrollPadding: ({ theme }) => theme('spacing'), - sepia: { - 0: '0', - DEFAULT: '100%', - }, - skew: { - 0: '0deg', - 1: '1deg', - 2: '2deg', - 3: '3deg', - 6: '6deg', - 12: '12deg', - }, - space: ({ theme }) => ({ - ...theme('spacing'), - }), - spacing: { - px: '1px', - 0: '0px', - 0.5: '0.125rem', - 1: '0.25rem', - 1.5: '0.375rem', - 2: '0.5rem', - 2.5: '0.625rem', - 3: '0.75rem', - 3.5: '0.875rem', - 4: '1rem', - 5: '1.25rem', - 6: '1.5rem', - 7: '1.75rem', - 8: '2rem', - 9: '2.25rem', - 10: '2.5rem', - 11: '2.75rem', - 12: '3rem', - 14: '3.5rem', - 16: '4rem', - 20: '5rem', - 24: '6rem', - 28: '7rem', - 32: '8rem', - 36: '9rem', - 40: '10rem', - 44: '11rem', - 48: '12rem', - 52: '13rem', - 56: '14rem', - 60: '15rem', - 64: '16rem', - 72: '18rem', - 80: '20rem', - 96: '24rem', - }, - stroke: ({ theme }) => ({ - none: 'none', - ...theme('colors'), - }), - strokeWidth: { - 0: '0', - 1: '1', - 2: '2', - }, - supports: {}, - data: {}, - textColor: ({ theme }) => theme('colors'), - textDecorationColor: ({ theme }) => theme('colors'), - textDecorationThickness: { - auto: 'auto', - 'from-font': 'from-font', - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', - }, - textIndent: ({ theme }) => ({ - ...theme('spacing'), - }), - textOpacity: ({ theme }) => theme('opacity'), - textUnderlineOffset: { - auto: 'auto', - 0: '0px', - 1: '1px', - 2: '2px', - 4: '4px', - 8: '8px', - }, - transformOrigin: { - center: 'center', - top: 'top', - 'top-right': 'top right', - right: 'right', - 'bottom-right': 'bottom right', - bottom: 'bottom', - 'bottom-left': 'bottom left', - left: 'left', - 'top-left': 'top left', - }, - transitionDelay: { - 0: '0s', - 75: '75ms', - 100: '100ms', - 150: '150ms', - 200: '200ms', - 300: '300ms', - 500: '500ms', - 700: '700ms', - 1000: '1000ms', - }, - transitionDuration: { - DEFAULT: '150ms', - 0: '0s', - 75: '75ms', - 100: '100ms', - 150: '150ms', - 200: '200ms', - 300: '300ms', - 500: '500ms', - 700: '700ms', - 1000: '1000ms', - }, - transitionProperty: { - none: 'none', - all: 'all', - DEFAULT: - 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter', - colors: 'color, background-color, border-color, text-decoration-color, fill, stroke', - opacity: 'opacity', - shadow: 'box-shadow', - transform: 'transform', - }, - transitionTimingFunction: { - DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)', - linear: 'linear', - in: 'cubic-bezier(0.4, 0, 1, 1)', - out: 'cubic-bezier(0, 0, 0.2, 1)', - 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', - }, - translate: ({ theme }) => ({ - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - full: '100%', - }), - size: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', - }), - width: ({ theme }) => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - screen: '100vw', - svw: '100svw', - lvw: '100lvw', - dvw: '100dvw', - min: 'min-content', - max: 'max-content', - fit: 'fit-content', - }), - willChange: { - auto: 'auto', - scroll: 'scroll-position', - contents: 'contents', - transform: 'transform', - }, - zIndex: { - auto: 'auto', - 0: '0', - 10: '10', - 20: '20', - 30: '30', - 40: '40', - 50: '50', - }, - }, - plugins: [], -} satisfies Config - +} satisfies Config; From 3756a83e76a1c25eafcc651003d0f6d2ab4f1d74 Mon Sep 17 00:00:00 2001 From: Bloodiko Date: Sat, 19 Jul 2025 19:20:12 +0200 Subject: [PATCH 3/4] test bg-primary still not working --- static/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/styles.css b/static/styles.css index 10f6064..886e9e2 100644 --- a/static/styles.css +++ b/static/styles.css @@ -2,8 +2,9 @@ @tailwind components; @tailwind utilities; +@import "tailwindcss"; + @theme { --color-primary: oklch(0.7751 0.127965 240.0314); --color-primary-dark: oklch(0.5327 0.1152 242.02); - } \ No newline at end of file From 95243c09bd6b2755d633c8eac0bfd0180f9d4672 Mon Sep 17 00:00:00 2001 From: Bloodiko Date: Sat, 19 Jul 2025 20:16:30 +0200 Subject: [PATCH 4/4] fix tailwind to real tailwind --- fresh.gen.ts | 2 -- islands/CreateSecret.tsx | 6 ++-- islands/FetchSecret.tsx | 2 +- islands/Log.tsx | 2 +- routes/api/res/tailwind.css.ts | 32 ----------------- src/utils/cssCache.ts | 64 ---------------------------------- static/styles.css | 7 ---- tailwind.config.ts | 8 +++++ 8 files changed, 13 insertions(+), 110 deletions(-) delete mode 100644 routes/api/res/tailwind.css.ts delete mode 100644 src/utils/cssCache.ts diff --git a/fresh.gen.ts b/fresh.gen.ts index 146be9f..18db09b 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -6,7 +6,6 @@ import * as $_404 from "./routes/_404.tsx"; import * as $_app from "./routes/_app.tsx"; import * as $_layout from "./routes/_layout.tsx"; import * as $api_create from "./routes/api/create.ts"; -import * as $api_res_tailwind_css from "./routes/api/res/tailwind.css.ts"; import * as $api_secret_uuid_ from "./routes/api/secret/[uuid].ts"; import * as $create from "./routes/create.tsx"; import * as $index from "./routes/index.tsx"; @@ -25,7 +24,6 @@ const manifest = { "./routes/_app.tsx": $_app, "./routes/_layout.tsx": $_layout, "./routes/api/create.ts": $api_create, - "./routes/api/res/tailwind.css.ts": $api_res_tailwind_css, "./routes/api/secret/[uuid].ts": $api_secret_uuid_, "./routes/create.tsx": $create, "./routes/index.tsx": $index, diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx index 8383ae2..d130fa2 100644 --- a/islands/CreateSecret.tsx +++ b/islands/CreateSecret.tsx @@ -1,7 +1,7 @@ import onSubmit from "@/src/formHandler/create.ts"; -import CustomExpireInForm from "../components/CreateSecret/CustomExpireInForm.tsx"; +import CustomExpireInForm from "@/components/CreateSecret/CustomExpireInForm.tsx"; import PassphraseInput from "@/components/CreateSecret/PassphraseInput.tsx"; -import ViewCountLimitInput from "../components/CreateSecret/ViewCountLimitInput.tsx"; +import ViewCountLimitInput from "@/components/CreateSecret/ViewCountLimitInput.tsx"; export default function CreateSecret() { return ( @@ -34,7 +34,7 @@ export default function CreateSecret() { - diff --git a/islands/FetchSecret.tsx b/islands/FetchSecret.tsx index d3608d1..2e243a7 100644 --- a/islands/FetchSecret.tsx +++ b/islands/FetchSecret.tsx @@ -39,7 +39,7 @@ export default function FetchSecret( name="fetchSecretButton" type="submit" disabled={fetched.value} - class="p-2" + class={"p-2 rounded-lg" + (fetched.value ? " bg-slate-400 cursor-not-allowed" : " bg-primary")} > Abrufen diff --git a/islands/Log.tsx b/islands/Log.tsx index 32d2513..954fbca 100644 --- a/islands/Log.tsx +++ b/islands/Log.tsx @@ -24,7 +24,7 @@ function renderMessage(message: RichMessage | undefined) { case "secretFetch": return ( - 
+          
             {message.secret}
           

         
diff --git a/routes/api/res/tailwind.css.ts b/routes/api/res/tailwind.css.ts
deleted file mode 100644
index f2c7b0b..0000000
--- a/routes/api/res/tailwind.css.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FreshContext } from "$fresh/server.ts";
-import { computeTailwindStyles, cssCache } from "@/src/utils/cssCache.ts";
-
-export const handler = async (
-  _req: Request,
-  _ctx: FreshContext,
-) => {
-  if (cssCache.has("tailwind.css")) {
-    return new Response(cssCache.get("tailwind.css"), {
-      headers: {
-        "Content-Type": "text/css",
-      },
-    });
-  }
-
-  try {
-    const resultCss = await computeTailwindStyles();
-    return new Response(resultCss, {
-      headers: {
-        "Content-Type": "text/css",
-      },
-    });
-  } catch (e) {
-    console.error(`ON REQUEST: Error while computing tailwind styles: `, e);
-    return new Response("Error while computing tailwind styles", {
-      status: 500,
-      headers: {
-        "Content-Type": "text/plain",
-      },
-    });
-  }
-};
diff --git a/src/utils/cssCache.ts b/src/utils/cssCache.ts
deleted file mode 100644
index afc87e5..0000000
--- a/src/utils/cssCache.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { generateTailwindCSS } from "@bjesuiter/deno-tailwindcss-iso";
-import { expandGlob, WalkEntry } from "@std/fs";
-
-/**
- * A in-memory key-value storage for deno to cache postcss-transformed css files
- * Needed, bc. these files can't be written to /static, bc. deno deploy does not support writing files to it's file system
- * (it's read-only from the github repo)
- */
-
-export const cssCache = new Map();
-
-/**
- * Intended to be used at server startup to compute the tailwind css "on the fly" instead of computed at build time
- * This removes the need for a build step for this app in github actions
- */
-export async function computeTailwindStyles() {
-  console.time("computeTailwindStyles");
-  const css = `
-  @import "tailwindcss";
-
-  @theme {
-    --color-primary: oklch(0.7751 0.127965 240.0314);
-    --color-primary-dark: oklch(0.5327 0.1152 242.02);
-
-  }
-  
-  `;
-  const content = await collectTailwindContent();
-
-  const resultCss = await generateTailwindCSS({
-    content: content,
-    css: css,
-  });
-
-  cssCache.set("tailwind.css", resultCss);
-
-  console.timeEnd("computeTailwindStyles");
-  return resultCss;
-}
-
-async function collectTailwindContent() {
-  console.time("collectTailwindContent");
-  const globs = [
-    "islands/**/*.tsx",
-    "components/**/*.tsx",
-    "routes/**/*.tsx",
-    "routes/**/*.ts",
-    "src/**/*.ts",
-  ];
-
-  const content = [];
-
-  for (const glob of globs) {
-    const files = expandGlob(glob, { root: Deno.cwd() });
-    for await (const file of files) {
-      if (file.isFile) {
-        content.push(await Deno.readTextFile(file.path));
-      }
-    }
-  }
-
-  console.timeEnd("collectTailwindContent");
-  return content.join("\n\n");
-}
diff --git a/static/styles.css b/static/styles.css
index 886e9e2..b5c61c9 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,10 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@import "tailwindcss";
-
-@theme {
-    --color-primary: oklch(0.7751 0.127965 240.0314);
-    --color-primary-dark: oklch(0.5327 0.1152 242.02);
-  }
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 995bc39..d0164db 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,4 +4,12 @@ export default {
   content: [
     "{routes,islands,components}/**/*.{ts,tsx,js,jsx}",
   ],
+  theme: {
+    extend: {
+      colors: {
+        "primary": "oklch(0.7751 0.127965 240.0314)",
+        "primary-dark": "oklch(0.5327 0.1152 242.02)",
+      },
+    },
+  },
 } satisfies Config;