@vobs/tailwind 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vobs contributors
+
+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,39 @@
+# @vobs/tailwind
+
+Tailwind CSS v4 integration for Vobs, with theme tokens exposed through Tailwind's namespaces.
+
+## Install
+
+```bash
+npm install @vobs/tailwind
+```
+
+## Quick start
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { vobsTailwind } from '@vobs/tailwind'
+
+export default defineConfig({
+  plugins: [vobsTailwind()]
+})
+```
+
+```css
+/* app.css */
+@import "@vobs/tailwind/styles.css";
+```
+
+## API
+
+| Signature | Description |
+| --- | --- |
+| `vobsTailwind(options?)` | Thin wrapper around the Tailwind v4 Vite plugin (`@tailwindcss/vite`); returns the plugin array and passes options through unchanged. |
+| `@vobs/tailwind/styles.css` | Tailwind theme and utilities layers plus Vobs theme tokens. |
+| `@vobs/tailwind/styles-prefixed.css` | Same stylesheet with utilities under the `vobs` prefix, for class name collisions. |
+| `@vobs/tailwind/theme.css` | Vobs semantic tokens mapped to Tailwind's color, spacing and radius namespaces. |
+
+## Types
+
+VobsTailwindOptions

package/package.json

@@ -0,0 +1,29 @@
+{
+  "license": "MIT",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "name": "@vobs/tailwind",
+  "version": "1.0.0",
+  "description": "Tailwind CSS integration for Vobs theme conventions.",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./vite": "./src/vite.ts",
+    "./theme.css": "./src/theme.css",
+    "./styles.css": "./src/styles.css",
+    "./styles-prefixed.css": "./src/styles-prefixed.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./src/*.css"
+  ],
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "tailwindcss": "^4.3.3"
+  }
+}

package/src/index.test.ts

@@ -0,0 +1,20 @@
+// @vitest-environment node
+
+import { describe, expect, it } from 'vitest'
+import { vobsTailwind } from './index'
+
+describe('@vobs/tailwind', () => {
+  it('暴露 Tailwind Vite 插件数组', () => {
+    const plugins = vobsTailwind()
+
+    expect(Array.isArray(plugins)).toBe(true)
+    expect(plugins.length).toBeGreaterThan(0)
+    expect(plugins.every(plugin => typeof plugin.name === 'string')).toBe(true)
+  })
+
+  it('透传 Tailwind Vite 优化选项', () => {
+    const plugins = vobsTailwind({ optimize: false })
+
+    expect(plugins.length).toBeGreaterThan(0)
+  })
+})

package/src/index.ts

@@ -0,0 +1,2 @@
+export { vobsTailwind } from './vite.ts'
+export type { VobsTailwindOptions } from './vite.ts'

package/src/styles-prefixed.css

@@ -0,0 +1,4 @@
+/* Use this entry when a third-party library has utility class name collisions. */
+@import "tailwindcss/theme.css" layer(theme);
+@import "./theme.css";
+@import "tailwindcss/utilities.css" prefix(vobs);

package/src/styles.css

@@ -0,0 +1,4 @@
+/* Vobs owns the reset; this entry intentionally exposes utilities only. */
+@import "tailwindcss/theme.css" layer(theme);
+@import "./theme.css";
+@import "tailwindcss/utilities.css" layer(utilities);

package/src/styles.test.ts

@@ -0,0 +1,27 @@
+// @vitest-environment node
+
+import { readFile } from 'node:fs/promises'
+import { describe, expect, it } from 'vitest'
+
+async function readEntry(name: string): Promise<string> {
+  return readFile(new URL(`./${name}`, import.meta.url), 'utf8')
+}
+
+describe('@vobs/tailwind CSS entries', () => {
+  it('provides utilities without Tailwind Preflight', async () => {
+    const source = await readEntry('styles.css')
+
+    expect(source).toContain('tailwindcss/theme.css')
+    expect(source).toContain('tailwindcss/utilities.css')
+    expect(source).toContain('./theme.css')
+    expect(source).not.toContain('tailwindcss/preflight.css')
+  })
+
+  it('provides an isolated prefixed utilities entry', async () => {
+    const source = await readEntry('styles-prefixed.css')
+
+    expect(source).toContain('tailwindcss/utilities.css" prefix(vobs)')
+    expect(source).toContain('./theme.css')
+    expect(source).not.toContain('tailwindcss/preflight.css')
+  })
+})

package/src/theme.css

@@ -0,0 +1,28 @@
+/* Vobs semantic tokens exposed through Tailwind's color, spacing, and radius namespaces. */
+@theme inline {
+  --color-brand: var(--vobs-brand-primary, #2563eb);
+  --color-brand-secondary: var(--vobs-brand-secondary, #0f766e);
+  --color-brand-accent: var(--vobs-brand-accent, #d97706);
+
+  --color-background: var(--vobs-neutral-background, #ffffff);
+  --color-surface: var(--vobs-neutral-surface, var(--vobs-neutral-background, #f8fafc));
+  --color-foreground: var(--vobs-neutral-foreground, #172033);
+  --color-muted: var(--vobs-neutral-muted, #64748b);
+  --color-border: var(--vobs-neutral-border, #cbd5e1);
+
+  --color-success: var(--vobs-semantic-success, #15803d);
+  --color-warning: var(--vobs-semantic-warning, #b45309);
+  --color-danger: var(--vobs-semantic-danger, #b91c1c);
+  --color-info: var(--vobs-semantic-info, #0369a1);
+
+  --spacing-vobs-sm: var(--vobs-spacing-sm, 4px);
+  --spacing-vobs-md: var(--vobs-spacing-md, 8px);
+  --spacing-vobs-lg: var(--vobs-spacing-lg, 16px);
+
+  --radius-vobs-sm: var(--vobs-radius-sm, 2px);
+  --radius-vobs-md: var(--vobs-radius-md, 4px);
+  --radius-vobs-lg: var(--vobs-radius-lg, 6px);
+}
+
+/* Follow the Vobs theme boundary instead of maintaining a second class-based dark state. */
+@custom-variant dark (&:where([data-vobs-mode="dark"], [data-vobs-mode="dark"] *));

package/src/theme.test.ts

@@ -0,0 +1,23 @@
+// @vitest-environment node
+
+import { readFile } from 'node:fs/promises'
+import { describe, expect, it } from 'vitest'
+
+describe('@vobs/tailwind theme bridge', () => {
+  it('does not depend on @vobs/ui token names', async () => {
+    const source = await readFile(new URL('./theme.css', import.meta.url), 'utf8')
+
+    expect(source).not.toMatch(/var\(--(?:bg|text|border|status|radius)-/u)
+    expect(source).toContain('--color-brand: var(--vobs-brand-primary')
+    expect(source).toContain('--color-foreground: var(--vobs-neutral-foreground')
+    expect(source).toContain('--color-surface: var(--vobs-neutral-surface, var(--vobs-neutral-background')
+    expect(source).toContain('--spacing-vobs-md: var(--vobs-spacing-md')
+  })
+
+  it('uses the Vobs theme boundary for dark variants', async () => {
+    const source = await readFile(new URL('./theme.css', import.meta.url), 'utf8')
+
+    expect(source).toContain('@custom-variant dark')
+    expect(source).toContain('[data-vobs-mode="dark"]')
+  })
+})

package/src/vite.ts

@@ -0,0 +1,9 @@
+import tailwindcss, { type PluginOptions } from '@tailwindcss/vite'
+import type { Plugin } from 'vite'
+
+export type VobsTailwindOptions = PluginOptions
+
+/** Vite integration for Tailwind CSS with Vobs theme conventions. */
+export function vobsTailwind(options: VobsTailwindOptions = {}): Plugin[] {
+  return tailwindcss(options)
+}