Files
yaak/src-web/tailwind.config.cjs
Gregory Schier b4a1c418bb Run oxfmt across repo, add format script and docs
Add .oxfmtignore to skip generated bindings and wasm-pack output.
Add npm format script, update DEVELOPMENT.md for Vite+ toolchain,
and format all non-generated files with oxfmt.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 10:15:49 -07:00

148 lines
3.6 KiB
JavaScript

const plugin = require("tailwindcss/plugin");
const sizes = {
"2xs": "1.4rem",
xs: "1.8rem",
sm: "2.0rem",
md: "2.3rem",
lg: "2.6rem",
};
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class", '[data-resolved-appearance="dark"]'],
content: [
"./*.{html,ts,tsx}",
"./commands/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./hooks/**/*.{ts,tsx}",
"./init/**/*.{ts,tsx}",
"./lib/**/*.{ts,tsx}",
"./routes/**/*.{ts,tsx}",
],
theme: {
extend: {
keyframes: {
blinkRing: {
"0%, 49%": { "--tw-ring-color": "var(--primary)" },
"50%, 99%": { "--tw-ring-color": "transparent" },
"100%": { "--tw-ring-color": "var(--primary)" },
},
},
animation: {
blinkRing: "blinkRing 150ms step-start 400ms infinite",
},
opacity: {
disabled: "0.3",
},
fontSize: {
xs: "0.8rem",
},
height: sizes,
width: sizes,
minHeight: sizes,
minWidth: sizes,
lineHeight: {
// HACK: Minus 2 to account for borders inside inputs
xs: "calc(1.75rem - 2px)",
sm: "calc(2.0rem - 2px)",
md: "calc(2.5rem - 2px)",
},
transitionProperty: {
grid: "grid",
},
},
fontFamily: {
mono: [
"var(--font-family-editor)",
"JetBrains Mono",
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Fira Code",
"Ubuntu Mono",
"Consolas",
"Liberation Mono",
"Courier New",
"DejaVu Sans Mono",
"Hack",
"monospace",
],
sans: [
"var(--font-family-interface)",
"Inter UI",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Oxygen-Sans",
"Ubuntu",
"Cantarell",
"Helvetica Neue",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
],
},
fontSize: {
"4xs": "0.6rem",
"3xs": "0.675rem",
"2xs": "0.75rem",
xs: "0.8rem",
sm: "0.9rem",
base: "1rem",
lg: "1.12rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "2rem",
"4xl": "2.5rem",
"5xl": "3rem",
editor: "var(--editor-font-size)",
shrink: "0.8em",
},
boxShadow: {
DEFAULT: "0 1px 3px 0 var(--shadow)",
lg: "0 10px 15px -3px var(--shadow)",
},
colors: {
transparent: "transparent",
placeholder: "var(--textSubtlest)",
shadow: "var(--shadow)",
backdrop: "var(--backdrop)",
selection: "var(--selection)",
// New theme values
surface: "var(--surface)",
"surface-highlight": "var(--surfaceHighlight)",
"surface-active": "var(--surfaceActive)",
text: "var(--text)",
"text-subtle": "var(--textSubtle)",
"text-subtlest": "var(--textSubtlest)",
border: "var(--border)",
"border-subtle": "var(--borderSubtle)",
"border-focus": "var(--borderFocus)",
primary: "var(--primary)",
danger: "var(--danger)",
secondary: "var(--secondary)",
success: "var(--success)",
info: "var(--info)",
notice: "var(--notice)",
warning: "var(--warning)",
},
},
plugins: [
require("@tailwindcss/container-queries"),
// oxlint-disable-next-line unbound-method
plugin(function ({ addVariant }) {
addVariant("hocus", ["&:hover", "&:focus-visible", "&.focus:focus"]);
addVariant("focus-visible-or-class", ["&:focus-visible", "&.focus:focus"]);
}),
],
};