@nuvia/tailwind-config 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -10
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @nuvia/tailwind-config
|
|
2
2
|
|
|
3
|
-
Tailwind CSS preset for the Nuvia Design System.
|
|
3
|
+
Tailwind CSS v4 preset for the Nuvia Design System.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -8,7 +8,44 @@ Tailwind CSS preset for the Nuvia Design System.
|
|
|
8
8
|
pnpm add @nuvia/tailwind-config tailwindcss
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Setup by Framework
|
|
12
|
+
|
|
13
|
+
### Vite (React, Vue, Svelte, etc.)
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add -D @tailwindcss/vite
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```typescript
|
|
20
|
+
// vite.config.ts
|
|
21
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
22
|
+
import react from "@vitejs/plugin-react";
|
|
23
|
+
import { defineConfig } from "vite";
|
|
24
|
+
|
|
25
|
+
export default defineConfig({
|
|
26
|
+
plugins: [react(), tailwindcss()],
|
|
27
|
+
});
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Next.js / Webpack / Other
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
pnpm add -D @tailwindcss/postcss
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
```javascript
|
|
37
|
+
// postcss.config.mjs
|
|
38
|
+
/** @type {import('postcss-load-config').Config} */
|
|
39
|
+
const config = {
|
|
40
|
+
plugins: {
|
|
41
|
+
"@tailwindcss/postcss": {},
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export default config;
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Tailwind Config
|
|
12
49
|
|
|
13
50
|
### Basic Setup
|
|
14
51
|
|
|
@@ -28,23 +65,59 @@ export default {
|
|
|
28
65
|
...config,
|
|
29
66
|
content: [
|
|
30
67
|
...config.content,
|
|
31
|
-
"./
|
|
32
|
-
"./components/**/*.{ts,tsx}",
|
|
68
|
+
"./src/**/*.{ts,tsx}",
|
|
69
|
+
"./node_modules/@nuvia/components/**/*.{js,ts,jsx,tsx}",
|
|
33
70
|
],
|
|
34
71
|
theme: {
|
|
35
72
|
extend: {
|
|
36
73
|
...config.theme?.extend,
|
|
37
74
|
// Your custom extensions
|
|
75
|
+
colors: {
|
|
76
|
+
...config.theme?.extend?.colors,
|
|
77
|
+
custom: "#ff0000",
|
|
78
|
+
},
|
|
38
79
|
},
|
|
39
80
|
},
|
|
40
81
|
} satisfies Config;
|
|
41
82
|
```
|
|
42
83
|
|
|
84
|
+
## CSS File
|
|
85
|
+
|
|
86
|
+
```css
|
|
87
|
+
/* globals.css */
|
|
88
|
+
@import "tailwindcss";
|
|
89
|
+
@import "@nuvia/components/styles/globals.css";
|
|
90
|
+
|
|
91
|
+
@config "./tailwind.config.ts";
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
> **Note:** In Tailwind v4, `@import` must come before `@config`.
|
|
95
|
+
|
|
43
96
|
## Included Features
|
|
44
97
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
98
|
+
### Colors
|
|
99
|
+
|
|
100
|
+
| Type | Colors |
|
|
101
|
+
|------|--------|
|
|
102
|
+
| **Brand** | zafiro, madrugada, nimbus, indigo, lumen, lilas, magenta, magma |
|
|
103
|
+
| **Semantic** | background, foreground, card, popover, primary, secondary, muted, accent, destructive |
|
|
104
|
+
| **Feedback** | success, warning, danger |
|
|
105
|
+
| **UI** | border, input, ring, sidebar, chart-1 to chart-5 |
|
|
106
|
+
|
|
107
|
+
### Plugins
|
|
108
|
+
|
|
109
|
+
- `tailwindcss-animate` — Animation utilities
|
|
110
|
+
- `@tailwindcss/typography` — Prose styling
|
|
111
|
+
|
|
112
|
+
### Animations
|
|
113
|
+
|
|
114
|
+
- `accordion-down` / `accordion-up`
|
|
115
|
+
- `fade-in` / `fade-out`
|
|
116
|
+
|
|
117
|
+
### Dark Mode
|
|
118
|
+
|
|
119
|
+
Configured with `darkMode: "class"` strategy. Add `dark` class to enable.
|
|
120
|
+
|
|
121
|
+
## Usage with @nuvia/components
|
|
122
|
+
|
|
123
|
+
This package is designed to work with `@nuvia/components`. See the [@nuvia/components README](../components/README.md) for complete setup instructions.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuvia/tailwind-config",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@tailwindcss/typography": "^0.5.15",
|
|
26
26
|
"tailwindcss-animate": "^1.0.7",
|
|
27
|
-
"@nuvia/tokens": "1.
|
|
27
|
+
"@nuvia/tokens": "1.1.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"tailwindcss": "^4.1.18",
|