From 242559acc99badd81c9033d49fc60ac6fa06fa0b Mon Sep 17 00:00:00 2001 From: "Gustavo \"Guz\" L de Mello" Date: Thu, 6 Mar 2025 10:02:35 -0300 Subject: [PATCH] feat: add tailwindcss --- flake.nix | 3 + makefile | 9 +- router/router.go | 3 +- static/css/.gitkeep | 0 static/static.go | 24 + tailwind.config.js | 1077 ++++++++++++++++++++++++++++++++++++++++++ templates/index.html | 4 +- 7 files changed, 1116 insertions(+), 4 deletions(-) create mode 100644 static/css/.gitkeep create mode 100644 static/static.go create mode 100644 tailwind.config.js diff --git a/flake.nix b/flake.nix index 2a039d8..f618f2a 100644 --- a/flake.nix +++ b/flake.nix @@ -29,6 +29,9 @@ gotools delve + # TailwindCSS + tailwindcss + # Sqlite tools sqlite lazysql diff --git a/makefile b/makefile index 73e9ff8..e309fe2 100644 --- a/makefile +++ b/makefile @@ -7,7 +7,7 @@ fmt: go fmt . golangci-lint run --fix . -dev: +dev/server: go run github.com/joho/godotenv/cmd/godotenv@v1.5.1 \ go run github.com/air-verse/air@v1.52.2 \ --build.cmd "go build -o .tmp/bin/main ." \ @@ -21,8 +21,15 @@ dev: --misc.clean_on_exit true \ -- -dev -port $$(($(PORT) + 1)) +dev/assets: + tailwindcss -o ./static/css/wind.css -w + +dev: + $(MAKE) -j2 dev/server dev/assets + build: + go generate go build -o ./.dist/app . run: build diff --git a/router/router.go b/router/router.go index 59df498..3511410 100644 --- a/router/router.go +++ b/router/router.go @@ -30,11 +30,12 @@ func New(assertions tinyssert.Assertions, log *slog.Logger, dev bool) http.Handl r.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { w.WriteHeader(http.StatusOK) - err := templates.Templates().ExecuteTemplate(w, "test.html", nil) + err := templates.Templates().ExecuteTemplate(w, "index.html", nil) if err != nil { exception.InternalServerError(err).ServeHTTP(w, r) } }) + r.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("./static")))) r.HandleFunc("/test", func(w http.ResponseWriter, r *http.Request) { exception.InternalServerError(errors.New("TEST ERROR"), exception.WithData("test-data", "test-value"), diff --git a/static/css/.gitkeep b/static/css/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/static/static.go b/static/static.go new file mode 100644 index 0000000..d3f6a34 --- /dev/null +++ b/static/static.go @@ -0,0 +1,24 @@ +package static + +import ( + "embed" + "io/fs" +) + +//go:generate tailwindcss -o static/css/wind.css + +//go:embed css/*.css +var staticFiles embed.FS + +func Files(local ...bool) fs.FS { + var l bool + if len(local) > 0 { + l = local[0] + } + + if !l { + return staticFiles + } + + return staticFiles +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..b918361 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,1077 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./templates/**/*.html", + ], + 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: [], +}; diff --git a/templates/index.html b/templates/index.html index ec165bd..bf89db6 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,10 +2,10 @@ - + - +

Hello, world