0
# Lite Mode
1

2
Tailwind Variants Lite Mode provides a lightweight version of the library with reduced bundle size by excluding tailwind-merge integration. This mode is ideal for applications that prefer minimal dependencies or implement their own conflict resolution.
3

4
## Import
5

6
```typescript
7
import { tv, createTV, cn, cnBase, defaultConfig } from "tailwind-variants/lite";
8
```
9

10
For CommonJS:
11

12
```javascript
13
const { tv, createTV, cn } = require("tailwind-variants/lite");
14
```
15

16
## Core Functions
17

18
### tv (Lite)
19

20
Lightweight version of the main tv function without tailwind-merge integration.
21

22
```typescript { .api }
23
const tv: TVLite;
24
```
25

26
The lite tv function provides the same variant API as the full version but without automatic conflict resolution. All class names are concatenated without merging conflicting Tailwind classes.
27

28
### createTV (Lite)
29

30
Creates a lite tv instance (no configuration needed since tailwind-merge is not available).
31

32
```typescript { .api }
33
function createTV(): TVLite;
34
```
35

36
**Returns:** A lite tv function instance
37

38
### cn (Lite)
39

40
Basic class name utility without tailwind-merge integration.
41

42
```typescript { .api }
43
const cn: <T extends CnOptions>(...classes: T) => CnReturn;
44
```
45

46
**Parameters:**
47
- `...classes` - Variable number of class values
48

49
**Returns:** Concatenated class string or undefined
50

51
### cnBase
52

53
Base class name utility (same as full version).
54

55
```typescript { .api }
56
const cnBase: <T extends CnOptions>(...classes: T) => CnReturn;
57
```
58

59
### cnAdapter
60

61
Internal adapter function used by lite mode for class name processing.
62

63
```typescript { .api }
64
const cnAdapter: (...classnames: CnOptions) => (config?: any) => CnReturn;
65
```
66

67
**Parameters:**
68
- `...classnames` - Variable number of class values
69

70
**Returns:** Function that accepts optional config and returns processed class string
71

72
**Note:** This is primarily an internal function but available as a public export.
73

74
## Usage Examples
75

76
### Basic Component
77

78
```typescript
79
import { tv } from "tailwind-variants/lite";
80

81
const button = tv({
82
  base: "font-medium rounded-lg px-4 py-2",
83
  variants: {
84
    color: {
85
      primary: "bg-blue-500 text-white hover:bg-blue-600",
86
      secondary: "bg-gray-500 text-white hover:bg-gray-600",
87
    },
88
    size: {
89
      sm: "px-3 py-1.5 text-sm",
90
      lg: "px-6 py-3 text-lg",
91
    },
92
  },
93
  defaultVariants: {
94
    color: "primary",
95
    size: "sm",
96
  },
97
});
98

99
// Usage
100
const primaryButton = button({ color: "primary", size: "lg" });
101
// Returns: "font-medium rounded-lg px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 px-6 py-3 text-lg"
102
```
103

104
### Slots Example
105

106
```typescript
107
import { tv } from "tailwind-variants/lite";
108

109
const card = tv({
110
  slots: {
111
    base: "rounded-lg border shadow-sm bg-white",
112
    header: "px-6 py-4 border-b border-gray-200",
113
    body: "px-6 py-4",
114
    footer: "px-6 py-4 border-t border-gray-100 bg-gray-50",
115
  },
116
  variants: {
117
    padding: {
118
      none: {
119
        header: "px-0 py-0",
120
        body: "px-0 py-0",
121
        footer: "px-0 py-0",
122
      },
123
      sm: {
124
        header: "px-4 py-3",
125
        body: "px-4 py-3",
126
        footer: "px-4 py-3",
127
      },
128
    },
129
  },
130
});
131

132
const { base, header, body, footer } = card({ padding: "sm" });
133
```
134

135
### Class Name Utility
136

137
```typescript
138
import { cn } from "tailwind-variants/lite";
139

140
// Basic usage
141
const classes = cn(
142
  "px-4 py-2 rounded",
143
  isActive && "bg-blue-500 text-white",
144
  { "opacity-50": isDisabled }
145
);
146
// Returns concatenated classes without conflict resolution
147
```
148

149
## Differences from Full Mode
150

151
### No Conflict Resolution
152

153
The lite mode does not include tailwind-merge, so conflicting classes are not automatically resolved:
154

155
```typescript
156
// Full mode with tailwind-merge
157
import { tv } from "tailwind-variants";
158
const fullButton = tv({ base: "px-4 px-6" }); // Resolves to "px-6"
159

160
// Lite mode
161
import { tv } from "tailwind-variants/lite";
162
const liteButton = tv({ base: "px-4 px-6" }); // Returns "px-4 px-6"
163
```
164

165
### Smaller Bundle Size
166

167
By excluding tailwind-merge dependency, the lite mode significantly reduces bundle size:
168

169
- Full mode: ~XX KB (with tailwind-merge)
170
- Lite mode: ~XX KB (without tailwind-merge)
171

172
### No Configuration
173

174
Since tailwind-merge is not available, configuration options related to it are ignored:
175

176
```typescript
177
// This has no effect in lite mode
178
const button = tv({
179
  base: "px-4 py-2",
180
}, { twMerge: true, twMergeConfig: { /* config */ } });
181
```
182

183
### Manual Conflict Resolution
184

185
When using lite mode, you need to handle class conflicts manually:
186

187
```typescript
188
import { tv } from "tailwind-variants/lite";
189

190
// Manually avoid conflicts
191
const button = tv({
192
  base: "font-medium rounded-lg",
193
  variants: {
194
    size: {
195
      sm: "px-3 py-1.5 text-sm",      // Don't repeat px/py in base
196
      md: "px-4 py-2 text-base",      // Ensure no conflicts
197
      lg: "px-6 py-3 text-lg",
198
    },
199
  },
200
});
201
```
202

203
## Type Definitions
204

205
```typescript { .api }
206
interface TVLite {
207
  <V extends TVVariants<S, B>, CV extends TVCompoundVariants<V, S, B>, DV extends TVDefaultVariants<V, S>, B extends ClassValue = undefined, S extends TVSlots = undefined>(options: {
208
    base?: B;
209
    slots?: S;
210
    variants?: V;
211
    compoundVariants?: CV[];
212
    compoundSlots?: TVCompoundSlots<V, S, B>[];
213
    defaultVariants?: DV;
214
  }): TVReturnType<V, S, B>;
215
}
216
```
217

218
## Best Practices
219

220
### Avoid Class Conflicts
221

222
When using lite mode, structure your variants to avoid class conflicts:
223

224
```typescript
225
// Good: No conflicting classes
226
const button = tv({
227
  base: "font-medium rounded-lg transition-colors",
228
  variants: {
229
    color: {
230
      primary: "bg-blue-500 text-white hover:bg-blue-600",
231
      secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
232
    },
233
    size: {
234
      sm: "px-3 py-1.5 text-sm",
235
      md: "px-4 py-2 text-base",
236
    },
237
  },
238
});
239

240
// Avoid: Conflicting padding classes
241
const badButton = tv({
242
  base: "px-4 py-2 font-medium",
243
  variants: {
244
    size: {
245
      sm: "px-2 py-1 text-sm",  // Conflicts with base px-4 py-2
246
      lg: "px-6 py-3 text-lg",  // Conflicts with base px-4 py-2
247
    },
248
  },
249
});
250
```
251

252
### Use Compound Variants for Complex Logic
253

254
```typescript
255
const button = tv({
256
  base: "font-medium rounded-lg",
257
  variants: {
258
    color: {
259
      primary: "bg-blue-500 text-white",
260
      danger: "bg-red-500 text-white",
261
    },
262
    outline: {
263
      true: "bg-transparent border-2",
264
      false: "",
265
    },
266
  },
267
  compoundVariants: [
268
    {
269
      color: "primary",
270
      outline: true,
271
      class: "border-blue-500 text-blue-500 hover:bg-blue-50",
272
    },
273
    {
274
      color: "danger",
275
      outline: true,
276
      class: "border-red-500 text-red-500 hover:bg-red-50",
277
    },
278
  ],
279
});
280
```