@regardio/tailwind 0.3.12 → 0.4.1

package/README.md

@@ -1,13 +1,16 @@
 # @regardio/tailwind
 
-> Regardio Tailwind CSS utilities and configuration
+> Tailwind CSS utilities and tools for Regardio projects
 
-A unified Tailwind CSS toolchain for Regardio projects, providing:
+Reusable utilities and tools for Tailwind CSS projects. **Does NOT include design decisions** (colors, fonts, breakpoints) - import those from `@regardio/brand` instead.
 
-- **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
+## What This Package Provides
+
+- **JavaScript utilities** - Type-safe component variants (`tv`), class merging (`cn`, `twMerge`)
+- **CSS utilities** - Reset, custom animations
+- **Plugin re-exports** - `fluid-tailwindcss`, `tw-animate-css` (integrated via `plugins.css`)
+
+> **📖 See [@regardio/brand styling architecture](../brand/docs/styling-architecture.md)** for the complete architecture.
 
 ## Installation
 
@@ -15,127 +18,37 @@ A unified Tailwind CSS toolchain for Regardio projects, providing:
 pnpm add @regardio/tailwind
 ```
 
-### Peer Dependencies
+**Peer Dependencies**: `tailwindcss` >= 4.0.0
 
-- `tailwindcss` >= 4.0.0
+## Quick Start
 
-## JavaScript Utilities
+### JavaScript
 
 ```ts
-import { tv, cn, twMerge, type VariantProps } from '@regardio/tailwind/utils';
+import { tv, cn, type VariantProps } from '@regardio/tailwind/utils';
 
-// Create component variants with tv()
 const button = tv({
-  base: 'px-4 py-2 rounded font-medium',
+  base: 'px-4 py-2 rounded',
   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
 
 ```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:
+## Documentation
 
-- **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)
+- **[Setup Guide](./docs/setup-guide.md)** - Integration and configuration
+- **[JavaScript Utilities](./docs/javascript-utilities.md)** - `tv()`, `cn()`, `twMerge()` usage
+- **[CSS Utilities](./docs/css-utilities.md)** - Reset, animations, plugins
 
 ## Why This Package?
 

package/dist/styles/index.css

@@ -1,19 +1,19 @@
 /**
- * @regardio/tailwind - Shared Styles
+ * @regardio/tailwind - Utility Styles
  *
- * Import this file to include all shared styles:
+ * Reusable utilities and tools for Tailwind CSS projects.
+ * Does NOT include design decisions (colors, fonts, breakpoints, layouts).
+ * Import design system from @regardio/brand instead.
+ *
+ * Import all utilities:
  * @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/plugins.css

@@ -9,5 +9,12 @@
 /* Animation utilities */
 @import "tw-animate-css";
 
-/* Fluid typography and spacing */
-@plugin "fluid-tailwindcss";
+/* Tailwind plugins */
+@plugin "@tailwindcss/typography";
+@plugin "fluid-tailwindcss" {
+  minViewport: 320;
+  maxViewport: 2560;
+  useRem: true;
+  rootFontSize: 16;
+  checkAccessibility: true;
+}

package/package.json

@@ -1,10 +1,15 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/tailwind",
-  "version": "0.3.12",
+  "version": "0.4.1",
   "private": false,
   "description": "Regardio Tailwind CSS utilities and configuration",
-  "keywords": ["tailwind", "tailwindcss", "utilities", "regardio"],
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "utilities",
+    "regardio"
+  ],
   "homepage": "https://github.com/regardio/tailwind#readme",
   "bugs": {
     "url": "https://github.com/regardio/tailwind/issues"
@@ -24,7 +29,9 @@
       "types": "./dist/index.d.mts"
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
@@ -47,6 +54,7 @@
     "typecheck": "exec-tsc --noEmit"
   },
   "dependencies": {
+    "@tailwindcss/typography": "0.5.19",
     "clsx": "2.1.1",
     "fluid-tailwindcss": "1.0.9",
     "tailwind-merge": "3.5.0",
@@ -54,12 +62,12 @@
     "tw-animate-css": "1.4.0"
   },
   "devDependencies": {
-    "@regardio/dev": "1.17.1",
+    "@regardio/dev": "^1.18.0",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/node": "25.5.0",
     "@vitest/coverage-v8": "4.1.0",
     "@vitest/ui": "4.1.0",
-    "tailwindcss": "4.2.1",
+    "tailwindcss": "4.2.2",
     "tsdown": "0.21.4",
     "vitest": "4.1.0"
   },
@@ -69,4 +77,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

package/dist/styles/base.css

@@ -1,75 +0,0 @@
-/**
- * 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/grid.css

@@ -1,61 +0,0 @@
-/**
- * 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 {
-    display: grid;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    grid-auto-flow: dense;
-    gap: var(--spacing-grid-gutter);
-    width: 100%;
-    container-name: grid;
-    container-type: inline-size;
-  }
-
-  /**
-   * 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;
-  }
-}