@regardio/tailwind 0.1.1

package/LICENSE

@@ -0,0 +1,9 @@
+# The MIT License (MIT)
+
+Copyright © 2026 Regardio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,150 @@
+# @regardio/tailwind
+
+> Regardio Tailwind CSS utilities and configuration
+
+A unified Tailwind CSS toolchain for Regardio projects, providing:
+
+- **tailwind-variants** - Type-safe component variants
+- **fluid-tailwindcss** - Fluid typography and spacing
+- **tailwind-merge** - Intelligent class merging
+- **Shared CSS styles** - Reset, base styles, grid utilities, animations
+
+## Installation
+
+```bash
+pnpm add @regardio/tailwind
+```
+
+### Peer Dependencies
+
+- `tailwindcss` >= 4.0.0
+
+## JavaScript Utilities
+
+```ts
+import { tv, cn, twMerge, type VariantProps } from '@regardio/tailwind/utils';
+
+// Create component variants with tv()
+const button = tv({
+  base: 'px-4 py-2 rounded font-medium',
+  variants: {
+    color: {
+      primary: 'bg-blue-500 text-white',
+      secondary: 'bg-gray-200 text-gray-800',
+    },
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+    size: 'md',
+  },
+});
+
+// Use cn() for simple class merging
+const className = cn('base-class', condition && 'conditional-class', 'override-class');
+
+// Type-safe variant props
+type ButtonProps = VariantProps<typeof button>;
+```
+
+## CSS Styles
+
+Import all shared styles at once:
+
+```css
+@import "@regardio/tailwind/styles";
+```
+
+Or import individual files as needed:
+
+```css
+/* Tailwind CSS + standard plugins (tailwindcss, tw-animate-css, fluid-tailwindcss) */
+@import "@regardio/tailwind/styles/plugins.css";
+
+/* Modern CSS reset with accessibility features */
+@import "@regardio/tailwind/styles/reset.css";
+
+/* Common base styles (typography, borders) */
+@import "@regardio/tailwind/styles/base.css";
+
+/* Grid utilities (.u-container, .u-grid) */
+@import "@regardio/tailwind/styles/grid.css";
+
+/* Animation keyframes and duration classes */
+@import "@regardio/tailwind/styles/animations.css";
+```
+
+### Included Styles
+
+#### Plugins (`plugins.css`)
+
+Tailwind CSS v4 with Regardio's standard plugins:
+
+- **tailwindcss** - Core Tailwind CSS
+- **tw-animate-css** - Animation utilities
+- **fluid-tailwindcss** - Fluid typography and spacing plugin
+
+#### Reset (`reset.css`)
+
+A modern CSS reset based on Josh Comeau's reset with Regardio enhancements:
+
+- Box-sizing reset
+- Theme color scheme support (`data-theme="light|dark"`)
+- Typography wrapping (`text-wrap: pretty/balance`)
+- Form element normalization
+- Media element defaults
+- Reduced motion accessibility
+
+#### Base (`base.css`)
+
+Common base styles that build on the reset:
+
+- Font feature settings (ligatures)
+- Border/outline defaults
+- Typography base styles
+
+#### Grid Utilities (`grid.css`)
+
+Reusable layout classes:
+
+- `.u-container` - Max-width container with horizontal padding
+- `.u-grid` - 12-column CSS grid with container queries
+- `.u-grid-full` - Full-width grid item (12 columns)
+- `.u-grid-half` - Half-width grid item (6 columns)
+- `.u-grid-third` - Third-width grid item (4 columns)
+- `.u-grid-quarter` - Quarter-width grid item (3 columns)
+
+Configure via CSS custom properties:
+
+```css
+:root {
+  --spacing-grid-max: 1200px;
+  --spacing-grid-gutter: 1rem;
+}
+```
+
+#### Animations (`animations.css`)
+
+Common animation keyframes and utilities:
+
+- **Duration classes**: `.duration-2000` through `.duration-6000`
+- **Fade**: `animate-fade-in`, `animate-fade-out`, `animate-fade-in-slow`, `animate-fade-out-slow`
+- **Slide**: `animate-slide-in-up`, `animate-slide-in-down`, `animate-slide-in-left`, `animate-slide-in-right`
+- **Scale**: `animate-scale-in`, `animate-scale-out`
+- **Image**: `animate-image-fade-in`, `animate-image-fade-out` (6s duration for slideshows)
+
+## Why This Package?
+
+- **Unified toolchain** - All Tailwind utilities in one place
+- **Fluid design** - Built-in support for fluid typography and spacing
+- **Type safety** - Full TypeScript support with VariantProps
+- **Tree-shakeable** - Import only what you need
+- **Consistent styles** - Shared reset, base, and utilities across projects
+
+## License
+
+**MIT License** — Free to use in commercial and open source projects.

package/dist/styles/styles/animations.css

@@ -0,0 +1,153 @@
+/**
+ * Animation Utilities
+ * Common keyframes and animation classes
+ */
+
+/* Extended duration classes beyond Tailwind defaults */
+.duration-2000 {
+  transition-duration: 2000ms;
+}
+
+.duration-2500 {
+  transition-duration: 2500ms;
+}
+
+.duration-3000 {
+  transition-duration: 3000ms;
+}
+
+.duration-4000 {
+  transition-duration: 4000ms;
+}
+
+.duration-5000 {
+  transition-duration: 5000ms;
+}
+
+.duration-6000 {
+  transition-duration: 6000ms;
+}
+
+@theme {
+  /* Fade animations */
+  --animate-fade-in: fade-in 0.3s ease-out forwards;
+  --animate-fade-out: fade-out 0.3s ease-out forwards;
+  --animate-fade-in-slow: fade-in 0.6s ease-out forwards;
+  --animate-fade-out-slow: fade-out 0.6s ease-out forwards;
+
+  /* Slide animations */
+  --animate-slide-in-up: slide-in-up 0.3s ease-out forwards;
+  --animate-slide-in-down: slide-in-down 0.3s ease-out forwards;
+  --animate-slide-in-left: slide-in-left 0.3s ease-out forwards;
+  --animate-slide-in-right: slide-in-right 0.3s ease-out forwards;
+
+  /* Scale animations */
+  --animate-scale-in: scale-in 0.2s ease-out forwards;
+  --animate-scale-out: scale-out 0.2s ease-out forwards;
+
+  /* Image slideshow animations */
+  --animate-image-fade-in: image-fade-in 6s ease-out forwards;
+  --animate-image-fade-out: image-fade-out 6s ease-out forwards;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-in-down {
+    from {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-in-left {
+    from {
+      opacity: 0;
+      transform: translateX(-1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes scale-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes image-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes image-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+}

package/dist/styles/styles/base.css

@@ -0,0 +1,75 @@
+/**
+ * Base Styles
+ * Foundational design defaults that may vary per project
+ */
+@layer base {
+  /* Design tokens applied to all elements */
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  /* Body typography defaults */
+  body {
+    font-feature-settings:
+      "liga" 1,
+      "dlig" 1,
+      "calt" 1,
+      "hlig" 1;
+    font-variant-ligatures: common-ligatures discretionary-ligatures contextual historical-ligatures;
+    line-height: 1.5;
+  }
+
+  /* Text wrapping improvements */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.2;
+    text-wrap: balance;
+  }
+
+  /* Focus ring styling */
+  :focus-visible {
+    @apply outline-2 outline-offset-2;
+  }
+
+  /* Selection styling */
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
+
+  /* Links without class */
+  a:not([class]) {
+    text-underline-offset: 0.2em;
+  }
+
+  /* Prevent tiny textareas */
+  textarea:not([rows]) {
+    min-height: 10em;
+  }
+
+  /* Auto-sizing textareas (progressive enhancement) */
+  @supports (field-sizing: content) {
+    textarea {
+      field-sizing: content;
+      min-height: 3lh;
+      max-height: 50vh;
+    }
+  }
+}

package/dist/styles/styles/grid.css

@@ -0,0 +1,61 @@
+/**
+ * Grid Utilities
+ * Reusable container and grid layout classes
+ */
+@layer components {
+  /**
+   * Container with max-width and horizontal padding
+   * Uses CSS custom properties for configurability:
+   * - --spacing-grid-max: Maximum container width
+   * - --spacing-grid-gutter: Horizontal padding/gap
+   */
+  .u-container {
+    position: relative;
+    max-width: var(--spacing-grid-max);
+    padding-inline: var(--spacing-grid-gutter);
+    margin-inline: auto;
+  }
+
+  /**
+   * 12-column CSS Grid with container queries
+   * Uses CSS custom properties for configurability:
+   * - --spacing-grid-gutter: Gap between grid items
+   */
+  .u-grid {
+    container-name: grid;
+    container-type: inline-size;
+    display: grid;
+    gap: var(--spacing-grid-gutter);
+    grid-auto-flow: dense;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    width: 100%;
+  }
+
+  /**
+   * Full-width grid item spanning all 12 columns
+   */
+  .u-grid-full {
+    grid-column: 1 / -1;
+  }
+
+  /**
+   * Half-width grid item spanning 6 columns
+   */
+  .u-grid-half {
+    grid-column: span 6;
+  }
+
+  /**
+   * Third-width grid item spanning 4 columns
+   */
+  .u-grid-third {
+    grid-column: span 4;
+  }
+
+  /**
+   * Quarter-width grid item spanning 3 columns
+   */
+  .u-grid-quarter {
+    grid-column: span 3;
+  }
+}

package/dist/styles/styles/index.css

@@ -0,0 +1,19 @@
+/**
+ * @regardio/tailwind - Shared Styles
+ *
+ * Import this file to include all shared styles:
+ * @import "@regardio/tailwind/styles";
+ *
+ * Or import individual files:
+ * @import "@regardio/tailwind/styles/plugins.css";
+ * @import "@regardio/tailwind/styles/reset.css";
+ * @import "@regardio/tailwind/styles/base.css";
+ * @import "@regardio/tailwind/styles/grid.css";
+ * @import "@regardio/tailwind/styles/animations.css";
+ */
+
+@import "./plugins.css";
+@import "./reset.css";
+@import "./base.css";
+@import "./grid.css";
+@import "./animations.css";

package/dist/styles/styles/plugins.css

@@ -0,0 +1,13 @@
+/**
+ * Tailwind CSS Core & Plugins
+ * Import this to get Tailwind CSS with Regardio's standard plugins
+ */
+
+/* Tailwind CSS v4 */
+@import "tailwindcss";
+
+/* Animation utilities */
+@import "tw-animate-css";
+
+/* Fluid typography and spacing */
+@plugin "fluid-tailwindcss";

package/dist/styles/styles/reset.css

@@ -0,0 +1,277 @@
+/**
+ * CSS Reset
+ * Browser normalization and cross-browser fixes only.
+ * Design defaults belong in base.css
+ *
+ * @see https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+@layer base {
+  /* ============================================
+   * BOX MODEL
+   * ============================================ */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* Reset margin on all elements except dialog (uses margin: auto for centering) */
+  *:not(dialog) {
+    margin: 0;
+  }
+
+  /* Tailwind-compatible border reset */
+  *,
+  *::before,
+  *::after {
+    border-style: solid;
+    border-width: 0;
+  }
+
+  /* Fix flex item overflow bug */
+  * {
+    min-width: 0;
+  }
+
+  /* ============================================
+   * HTML ROOT
+   * ============================================ */
+  html {
+    /* Prevent iOS text size inflation */
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+
+    /* System color scheme support */
+    color-scheme: light dark;
+
+    /* Enable height-based layouts */
+    height: 100%;
+
+    /* Consistent tab size */
+    tab-size: 2;
+
+    /* Better scroll anchoring */
+    overflow-anchor: auto;
+
+    /* Touch scroll momentum (iOS) */
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Enable keyword animations + smooth scroll only for users without motion sensitivity */
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      interpolate-size: allow-keywords;
+      scroll-behavior: smooth;
+    }
+  }
+
+  html[data-theme="light"] {
+    color-scheme: light;
+  }
+
+  html[data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  /* ============================================
+   * BODY
+   * ============================================ */
+  body {
+    position: relative;
+    min-height: 100%;
+    margin: 0;
+
+    /* Antialiased rendering (macOS browsers default to subpixel) */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* ============================================
+   * FORM ELEMENTS
+   * Inherit instead of browser defaults
+   * ============================================ */
+  input,
+  button,
+  textarea,
+  select,
+  optgroup {
+    font: inherit;
+    color: inherit;
+    background-color: transparent;
+  }
+
+  /* Explicit input types for edge cases */
+  [type="date"],
+  [type="datetime-local"],
+  [type="email"],
+  [type="month"],
+  [type="number"],
+  [type="password"],
+  [type="search"],
+  [type="tel"],
+  [type="text"],
+  [type="time"],
+  [type="url"],
+  [type="week"],
+  [multiple] {
+    font: inherit;
+    background-color: transparent;
+  }
+
+  /* Remove webkit search styling */
+  [type="search"]::-webkit-search-decoration,
+  [type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  /* Cursor normalization */
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  button:disabled,
+  [role="button"]:disabled,
+  input:disabled,
+  select:disabled,
+  textarea:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ============================================
+   * MEDIA ELEMENTS
+   * ============================================ */
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    flex-shrink: 0;
+    max-width: 100%;
+  }
+
+  img,
+  video {
+    height: auto;
+  }
+
+  /* Icons inherit text color unless explicitly set */
+  svg:not([fill]) {
+    fill: currentColor;
+  }
+
+  iframe,
+  embed,
+  object {
+    display: block;
+    max-width: 100%;
+  }
+
+  /* ============================================
+   * INTERACTIVE ELEMENTS
+   * ============================================ */
+
+  /* Focus only visible on keyboard navigation */
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* Dialog normalization */
+  dialog {
+    padding: 0;
+    border: none;
+  }
+
+  /* Summary/details normalization */
+  summary {
+    display: list-item;
+    cursor: pointer;
+  }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  /* Enforce hidden attribute */
+  [hidden] {
+    /* biome-ignore lint/complexity/noImportantStyles: Must always work */
+    display: none !important;
+  }
+
+  /* Inert elements */
+  [inert],
+  [inert] * {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  /* ============================================
+   * TABLES
+   * ============================================ */
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  /* ============================================
+   * LINKS
+   * ============================================ */
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  /* ============================================
+   * LISTS (Safari VoiceOver fix)
+   * ============================================ */
+  ul[role="list"],
+  ol[role="list"] {
+    padding: 0;
+    list-style: none;
+  }
+
+  /* ============================================
+   * STACKING CONTEXTS
+   * ============================================ */
+  #root,
+  #__next,
+  #app {
+    isolation: isolate;
+  }
+
+  /* ============================================
+   * MOBILE
+   * ============================================ */
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  @media (pointer: coarse) {
+    html {
+      touch-action: manipulation;
+    }
+  }
+
+  /* ============================================
+   * ACCESSIBILITY - REDUCED MOTION
+   * ============================================ */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      /* biome-ignore lint/complexity/noImportantStyles: Accessibility override */
+      animation-duration: 0.01ms !important;
+      /* biome-ignore lint/complexity/noImportantStyles: Accessibility override */
+      animation-iteration-count: 1 !important;
+      /* biome-ignore lint/complexity/noImportantStyles: Accessibility override */
+      transition-duration: 0.01ms !important;
+      /* biome-ignore lint/complexity/noImportantStyles: Accessibility override */
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,9 @@
+export { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+export { VariantProps, tv } from 'tailwind-variants';
+
+/**
+ * Merge Tailwind CSS classes with conflict resolution
+ */
+declare const cn: (...inputs: (string | undefined | null | false)[]) => string;
+
+export { cn };

package/dist/utils/index.js

@@ -0,0 +1,10 @@
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+export { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+export { tv } from 'tailwind-variants';
+
+// src/utils/index.ts
+var cn = (...inputs) => {
+  return twMerge(inputs.filter(Boolean).join(" "));
+};
+
+export { cn };

package/package.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://www.schemastore.org/package.json",
+  "author": "Bernd Matzner <bernd.matzner@regard.io>",
+  "bugs": {
+    "url": "https://github.com/regardio/tailwind/issues"
+  },
+  "dependencies": {
+    "fluid-tailwindcss": "1.0.5",
+    "tailwind-merge": "3.4.0",
+    "tailwind-variants": "3.2.2",
+    "tw-animate-css": "1.4.0"
+  },
+  "description": "Regardio Tailwind CSS utilities and configuration",
+  "devDependencies": {
+    "@regardio/dev": "1.10.2",
+    "@total-typescript/ts-reset": "0.6.1",
+    "@types/node": "25.0.3",
+    "tailwindcss": "4.1.18",
+    "tsup": "8.5.1",
+    "vitest": "4.0.16"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "exports": {
+    "./styles": "./dist/styles/index.css",
+    "./styles/*": "./dist/styles/*",
+    "./utils": {
+      "import": "./dist/utils/index.js",
+      "types": "./dist/utils/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "homepage": "https://github.com/regardio/tailwind#readme",
+  "keywords": ["tailwind", "tailwindcss", "utilities", "regardio"],
+  "license": "MIT",
+  "name": "@regardio/tailwind",
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/regardio/tailwind.git"
+  },
+  "scripts": {
+    "build": "tsup && pnpm fix",
+    "dev": "tsup --watch",
+    "fix": "exec-p fix:*",
+    "fix:biome": "lint-biome check --write --unsafe .",
+    "fix:md": "lint-md --fix",
+    "lint": "exec-p lint:*",
+    "lint:biome": "lint-biome check .",
+    "lint:md": "lint-md",
+    "release": "flow-release",
+    "test": "exec-s test:*",
+    "test:unit": "vitest run",
+    "typecheck": "exec-tsc --noEmit",
+    "version": "flow-changeset version"
+  },
+  "type": "module",
+  "version": "0.1.1"
+}