clases-tailwind 1.0.0 → 1.0.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/dist/index.cjs +3 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +22 -2
- package/dist/index.d.ts +22 -2
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/index.ts +25 -2
- package/src/test/tailwind.test.ts +3 -3
package/dist/index.cjs
CHANGED
|
@@ -81,9 +81,10 @@ var tailwindPlugin = {
|
|
|
81
81
|
rtl: "rtl",
|
|
82
82
|
ltr: "ltr"
|
|
83
83
|
};
|
|
84
|
-
var
|
|
84
|
+
var twcl = clases.createCl(tailwindPlugin);
|
|
85
85
|
|
|
86
|
-
exports.cl = cl;
|
|
87
86
|
exports.tailwindPlugin = tailwindPlugin;
|
|
87
|
+
exports.tw = twcl;
|
|
88
|
+
exports.twcl = twcl;
|
|
88
89
|
//# sourceMappingURL=index.cjs.map
|
|
89
90
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":["createCl"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":["createCl"],"mappings":";;;;;AAWO,IAAM,cAAA,GAAiB;AAAA;AAAA,EAE1B,IAAA,EAAM,MAAA;AAAA,EACN,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,KAAA,EAAO,KAAA;AAAA;AAAA,EAGP,KAAA,EAAO,OAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EACP,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,cAAA,EAAgB,cAAA;AAAA,EAChB,eAAA,EAAiB,eAAA;AAAA;AAAA,EAGjB,QAAA,EAAU,UAAA;AAAA,EACV,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,aAAA,EAAe,eAAA;AAAA,EACf,OAAA,EAAS,SAAA;AAAA,EACT,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS,SAAA;AAAA,EACT,UAAA,EAAY,UAAA;AAAA,EACZ,cAAA,EAAgB,cAAA;AAAA,EAChB,mBAAA,EAAqB,mBAAA;AAAA,EACrB,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa,WAAA;AAAA;AAAA,EAGb,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,eAAA,EAAiB,eAAA;AAAA,EACjB,cAAA,EAAgB,cAAA;AAAA,EAChB,cAAA,EAAgB,cAAA;AAAA,EAChB,KAAA,EAAO,OAAA;AAAA;AAAA,EAGP,KAAA,EAAO,aAAA;AAAA;AAAA,EACP,aAAA,EAAe,aAAA;AAAA,EACf,aAAA,EAAe,aAAA;AAAA,EACf,cAAA,EAAgB,cAAA;AAAA,EAChB,eAAA,EAAiB,eAAA;AAAA,EACjB,eAAA,EAAiB,eAAA;AAAA,EACjB,IAAA,EAAM,YAAA;AAAA;AAAA,EACN,YAAA,EAAc,YAAA;AAAA,EACd,YAAA,EAAc,YAAA;AAAA,EACd,aAAA,EAAe,aAAA;AAAA,EACf,cAAA,EAAgB,cAAA;AAAA;AAAA,EAGhB,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,OAAA;AAAA,EACP,eAAA,EAAiB,eAAA;AAAA,EACjB,aAAA,EAAe,aAAA;AAAA,EACf,eAAA,EAAiB,eAAA;AAAA,EACjB,eAAA,EAAiB,eAAA;AAAA,EACjB,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,WAAA;AAAA;AAAA,EAGX,MAAA,EAAQ,QAAA;AAAA,EACR,SAAA,EAAW,WAAA;AAAA,EACX,YAAA,EAAc,YAAA;AAAA,EACd,cAAA,EAAgB,cAAA;AAAA,EAChB,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa,aAAA;AAAA,EACb,MAAA,EAAQ,QAAA;AAAA,EACR,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA;AAAA,EAGN,KAAA,EAAO,OAAA;AAAA,EACP,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK;AACT;AAaA,IAAM,IAAA,GAAOA,gBAAS,cAAc","file":"index.cjs","sourcesContent":["import { createCl } from 'clases';\r\n\r\n\r\n/**\r\n * Configuration object containing default prefixes for Tailwind CSS.\r\n * * Use this to maintain consistency between your class utility and \r\n * Tailwind's variant system.\r\n * * @example\r\n * // Accessing a specific prefix\r\n * const basePrefix = tailwindPlugin.prefix;\r\n */\r\nexport const tailwindPlugin = {\r\n // --- Estructura y Pantallas ---\r\n base: 'base',\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg',\r\n xl: 'xl',\r\n '2xl': '2xl',\r\n\r\n // --- Estados de Usuario (Interacción) ---\r\n hover: 'hover',\r\n focus: 'focus',\r\n active: 'active',\r\n visited: 'visited',\r\n target: 'target',\r\n 'focus-within': 'focus-within',\r\n 'focus-visible': 'focus-visible',\r\n\r\n // --- Estados de Formulario ---\r\n disabled: 'disabled',\r\n enabled: 'enabled',\r\n checked: 'checked',\r\n indeterminate: 'indeterminate',\r\n default: 'default',\r\n required: 'required',\r\n valid: 'valid',\r\n invalid: 'invalid',\r\n 'in-range': 'in-range',\r\n 'out-of-range': 'out-of-range',\r\n 'placeholder-shown': 'placeholder-shown',\r\n autofill: 'autofill',\r\n 'read-only': 'read-only',\r\n\r\n // --- Posicionamiento y Árbol (Pseudo-clases) ---\r\n first: 'first',\r\n last: 'last',\r\n only: 'only',\r\n odd: 'odd',\r\n even: 'even',\r\n 'first-of-type': 'first-of-type',\r\n 'last-of-type': 'last-of-type',\r\n 'only-of-type': 'only-of-type',\r\n empty: 'empty',\r\n\r\n // --- Relaciones de Elementos (Group & Peer) ---\r\n group: 'group-hover', // Alias amigable\r\n 'group-hover': 'group-hover',\r\n 'group-focus': 'group-focus',\r\n 'group-active': 'group-active',\r\n 'group-visited': 'group-visited',\r\n 'group-invalid': 'group-invalid',\r\n peer: 'peer-hover', // Alias amigable\r\n 'peer-hover': 'peer-hover',\r\n 'peer-focus': 'peer-focus',\r\n 'peer-active': 'peer-active',\r\n 'peer-invalid': 'peer-invalid',\r\n\r\n // --- Media Queries (Preferencias de Sistema) ---\r\n dark: 'dark',\r\n light: 'light',\r\n 'motion-reduce': 'motion-reduce',\r\n 'motion-safe': 'motion-safe',\r\n 'contrast-more': 'contrast-more',\r\n 'contrast-less': 'contrast-less',\r\n portrait: 'portrait',\r\n landscape: 'landscape',\r\n\r\n // --- Pseudo-elementos ---\r\n marker: 'marker',\r\n selection: 'selection',\r\n 'first-line': 'first-line',\r\n 'first-letter': 'first-letter',\r\n backdrop: 'backdrop',\r\n placeholder: 'placeholder',\r\n before: 'before',\r\n after: 'after',\r\n file: 'file',\r\n\r\n // --- Varios y Print ---\r\n print: 'print',\r\n rtl: 'rtl',\r\n ltr: 'ltr'\r\n};\r\n\r\n/**\r\n * Generates an optimized Tailwind CSS class string.\r\n * Combines conditional arguments and resolves Tailwind utility conflicts (using tailwind-merge).\r\n * * @param args - CSS classes, objects { 'class-name': boolean }, arrays, or nullish values.\r\n * @returns A clean string of resulting classes without duplicates or conflicts.\r\n * * @example\r\n * // Basic usage\r\n * tw('p-4 bg-red-500', isLarge && 'p-8') // If isLarge is true -> 'bg-red-500 p-8'\r\n * * // Using objects\r\n * tw({ 'bg-blue-500': true, 'hidden': false }) // 'bg-blue-500'\r\n */\r\nconst twcl = createCl(tailwindPlugin);\r\n\r\nexport {twcl,twcl as tw};\r\n\r\n\r\n// Export the type so users can use it in their component props\r\nexport type TailwindKey = keyof typeof tailwindPlugin;\r\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import * as clsx from 'clsx';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Configuration object containing default prefixes for Tailwind CSS.
|
|
5
|
+
* * Use this to maintain consistency between your class utility and
|
|
6
|
+
* Tailwind's variant system.
|
|
7
|
+
* * @example
|
|
8
|
+
* // Accessing a specific prefix
|
|
9
|
+
* const basePrefix = tailwindPlugin.prefix;
|
|
10
|
+
*/
|
|
3
11
|
declare const tailwindPlugin: {
|
|
4
12
|
base: string;
|
|
5
13
|
sm: string;
|
|
@@ -68,7 +76,18 @@ declare const tailwindPlugin: {
|
|
|
68
76
|
rtl: string;
|
|
69
77
|
ltr: string;
|
|
70
78
|
};
|
|
71
|
-
|
|
79
|
+
/**
|
|
80
|
+
* Generates an optimized Tailwind CSS class string.
|
|
81
|
+
* Combines conditional arguments and resolves Tailwind utility conflicts (using tailwind-merge).
|
|
82
|
+
* * @param args - CSS classes, objects { 'class-name': boolean }, arrays, or nullish values.
|
|
83
|
+
* @returns A clean string of resulting classes without duplicates or conflicts.
|
|
84
|
+
* * @example
|
|
85
|
+
* // Basic usage
|
|
86
|
+
* tw('p-4 bg-red-500', isLarge && 'p-8') // If isLarge is true -> 'bg-red-500 p-8'
|
|
87
|
+
* * // Using objects
|
|
88
|
+
* tw({ 'bg-blue-500': true, 'hidden': false }) // 'bg-blue-500'
|
|
89
|
+
*/
|
|
90
|
+
declare const twcl: (...inputs: (clsx.ClassValue | {
|
|
72
91
|
[x: string & {}]: any;
|
|
73
92
|
base?: any;
|
|
74
93
|
sm?: any;
|
|
@@ -137,6 +156,7 @@ declare const cl: (...inputs: (clsx.ClassValue | {
|
|
|
137
156
|
group?: any;
|
|
138
157
|
peer?: any;
|
|
139
158
|
})[]) => string;
|
|
159
|
+
|
|
140
160
|
type TailwindKey = keyof typeof tailwindPlugin;
|
|
141
161
|
|
|
142
|
-
export { type TailwindKey,
|
|
162
|
+
export { type TailwindKey, tailwindPlugin, twcl as tw, twcl };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import * as clsx from 'clsx';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Configuration object containing default prefixes for Tailwind CSS.
|
|
5
|
+
* * Use this to maintain consistency between your class utility and
|
|
6
|
+
* Tailwind's variant system.
|
|
7
|
+
* * @example
|
|
8
|
+
* // Accessing a specific prefix
|
|
9
|
+
* const basePrefix = tailwindPlugin.prefix;
|
|
10
|
+
*/
|
|
3
11
|
declare const tailwindPlugin: {
|
|
4
12
|
base: string;
|
|
5
13
|
sm: string;
|
|
@@ -68,7 +76,18 @@ declare const tailwindPlugin: {
|
|
|
68
76
|
rtl: string;
|
|
69
77
|
ltr: string;
|
|
70
78
|
};
|
|
71
|
-
|
|
79
|
+
/**
|
|
80
|
+
* Generates an optimized Tailwind CSS class string.
|
|
81
|
+
* Combines conditional arguments and resolves Tailwind utility conflicts (using tailwind-merge).
|
|
82
|
+
* * @param args - CSS classes, objects { 'class-name': boolean }, arrays, or nullish values.
|
|
83
|
+
* @returns A clean string of resulting classes without duplicates or conflicts.
|
|
84
|
+
* * @example
|
|
85
|
+
* // Basic usage
|
|
86
|
+
* tw('p-4 bg-red-500', isLarge && 'p-8') // If isLarge is true -> 'bg-red-500 p-8'
|
|
87
|
+
* * // Using objects
|
|
88
|
+
* tw({ 'bg-blue-500': true, 'hidden': false }) // 'bg-blue-500'
|
|
89
|
+
*/
|
|
90
|
+
declare const twcl: (...inputs: (clsx.ClassValue | {
|
|
72
91
|
[x: string & {}]: any;
|
|
73
92
|
base?: any;
|
|
74
93
|
sm?: any;
|
|
@@ -137,6 +156,7 @@ declare const cl: (...inputs: (clsx.ClassValue | {
|
|
|
137
156
|
group?: any;
|
|
138
157
|
peer?: any;
|
|
139
158
|
})[]) => string;
|
|
159
|
+
|
|
140
160
|
type TailwindKey = keyof typeof tailwindPlugin;
|
|
141
161
|
|
|
142
|
-
export { type TailwindKey,
|
|
162
|
+
export { type TailwindKey, tailwindPlugin, twcl as tw, twcl };
|
package/dist/index.js
CHANGED
|
@@ -79,8 +79,8 @@ var tailwindPlugin = {
|
|
|
79
79
|
rtl: "rtl",
|
|
80
80
|
ltr: "ltr"
|
|
81
81
|
};
|
|
82
|
-
var
|
|
82
|
+
var twcl = createCl(tailwindPlugin);
|
|
83
83
|
|
|
84
|
-
export {
|
|
84
|
+
export { tailwindPlugin, twcl as tw, twcl };
|
|
85
85
|
//# sourceMappingURL=index.js.map
|
|
86
86
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAWO,IAAM,cAAA,GAAiB;AAAA;AAAA,EAE1B,IAAA,EAAM,MAAA;AAAA,EACN,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,KAAA,EAAO,KAAA;AAAA;AAAA,EAGP,KAAA,EAAO,OAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EACP,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,cAAA,EAAgB,cAAA;AAAA,EAChB,eAAA,EAAiB,eAAA;AAAA;AAAA,EAGjB,QAAA,EAAU,UAAA;AAAA,EACV,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,aAAA,EAAe,eAAA;AAAA,EACf,OAAA,EAAS,SAAA;AAAA,EACT,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS,SAAA;AAAA,EACT,UAAA,EAAY,UAAA;AAAA,EACZ,cAAA,EAAgB,cAAA;AAAA,EAChB,mBAAA,EAAqB,mBAAA;AAAA,EACrB,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa,WAAA;AAAA;AAAA,EAGb,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,eAAA,EAAiB,eAAA;AAAA,EACjB,cAAA,EAAgB,cAAA;AAAA,EAChB,cAAA,EAAgB,cAAA;AAAA,EAChB,KAAA,EAAO,OAAA;AAAA;AAAA,EAGP,KAAA,EAAO,aAAA;AAAA;AAAA,EACP,aAAA,EAAe,aAAA;AAAA,EACf,aAAA,EAAe,aAAA;AAAA,EACf,cAAA,EAAgB,cAAA;AAAA,EAChB,eAAA,EAAiB,eAAA;AAAA,EACjB,eAAA,EAAiB,eAAA;AAAA,EACjB,IAAA,EAAM,YAAA;AAAA;AAAA,EACN,YAAA,EAAc,YAAA;AAAA,EACd,YAAA,EAAc,YAAA;AAAA,EACd,aAAA,EAAe,aAAA;AAAA,EACf,cAAA,EAAgB,cAAA;AAAA;AAAA,EAGhB,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,OAAA;AAAA,EACP,eAAA,EAAiB,eAAA;AAAA,EACjB,aAAA,EAAe,aAAA;AAAA,EACf,eAAA,EAAiB,eAAA;AAAA,EACjB,eAAA,EAAiB,eAAA;AAAA,EACjB,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,WAAA;AAAA;AAAA,EAGX,MAAA,EAAQ,QAAA;AAAA,EACR,SAAA,EAAW,WAAA;AAAA,EACX,YAAA,EAAc,YAAA;AAAA,EACd,cAAA,EAAgB,cAAA;AAAA,EAChB,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa,aAAA;AAAA,EACb,MAAA,EAAQ,QAAA;AAAA,EACR,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA;AAAA,EAGN,KAAA,EAAO,OAAA;AAAA,EACP,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK;AACT;AAaA,IAAM,IAAA,GAAO,SAAS,cAAc","file":"index.js","sourcesContent":["import { createCl } from 'clases';\r\n\r\n\r\n/**\r\n * Configuration object containing default prefixes for Tailwind CSS.\r\n * * Use this to maintain consistency between your class utility and \r\n * Tailwind's variant system.\r\n * * @example\r\n * // Accessing a specific prefix\r\n * const basePrefix = tailwindPlugin.prefix;\r\n */\r\nexport const tailwindPlugin = {\r\n // --- Estructura y Pantallas ---\r\n base: 'base',\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg',\r\n xl: 'xl',\r\n '2xl': '2xl',\r\n\r\n // --- Estados de Usuario (Interacción) ---\r\n hover: 'hover',\r\n focus: 'focus',\r\n active: 'active',\r\n visited: 'visited',\r\n target: 'target',\r\n 'focus-within': 'focus-within',\r\n 'focus-visible': 'focus-visible',\r\n\r\n // --- Estados de Formulario ---\r\n disabled: 'disabled',\r\n enabled: 'enabled',\r\n checked: 'checked',\r\n indeterminate: 'indeterminate',\r\n default: 'default',\r\n required: 'required',\r\n valid: 'valid',\r\n invalid: 'invalid',\r\n 'in-range': 'in-range',\r\n 'out-of-range': 'out-of-range',\r\n 'placeholder-shown': 'placeholder-shown',\r\n autofill: 'autofill',\r\n 'read-only': 'read-only',\r\n\r\n // --- Posicionamiento y Árbol (Pseudo-clases) ---\r\n first: 'first',\r\n last: 'last',\r\n only: 'only',\r\n odd: 'odd',\r\n even: 'even',\r\n 'first-of-type': 'first-of-type',\r\n 'last-of-type': 'last-of-type',\r\n 'only-of-type': 'only-of-type',\r\n empty: 'empty',\r\n\r\n // --- Relaciones de Elementos (Group & Peer) ---\r\n group: 'group-hover', // Alias amigable\r\n 'group-hover': 'group-hover',\r\n 'group-focus': 'group-focus',\r\n 'group-active': 'group-active',\r\n 'group-visited': 'group-visited',\r\n 'group-invalid': 'group-invalid',\r\n peer: 'peer-hover', // Alias amigable\r\n 'peer-hover': 'peer-hover',\r\n 'peer-focus': 'peer-focus',\r\n 'peer-active': 'peer-active',\r\n 'peer-invalid': 'peer-invalid',\r\n\r\n // --- Media Queries (Preferencias de Sistema) ---\r\n dark: 'dark',\r\n light: 'light',\r\n 'motion-reduce': 'motion-reduce',\r\n 'motion-safe': 'motion-safe',\r\n 'contrast-more': 'contrast-more',\r\n 'contrast-less': 'contrast-less',\r\n portrait: 'portrait',\r\n landscape: 'landscape',\r\n\r\n // --- Pseudo-elementos ---\r\n marker: 'marker',\r\n selection: 'selection',\r\n 'first-line': 'first-line',\r\n 'first-letter': 'first-letter',\r\n backdrop: 'backdrop',\r\n placeholder: 'placeholder',\r\n before: 'before',\r\n after: 'after',\r\n file: 'file',\r\n\r\n // --- Varios y Print ---\r\n print: 'print',\r\n rtl: 'rtl',\r\n ltr: 'ltr'\r\n};\r\n\r\n/**\r\n * Generates an optimized Tailwind CSS class string.\r\n * Combines conditional arguments and resolves Tailwind utility conflicts (using tailwind-merge).\r\n * * @param args - CSS classes, objects { 'class-name': boolean }, arrays, or nullish values.\r\n * @returns A clean string of resulting classes without duplicates or conflicts.\r\n * * @example\r\n * // Basic usage\r\n * tw('p-4 bg-red-500', isLarge && 'p-8') // If isLarge is true -> 'bg-red-500 p-8'\r\n * * // Using objects\r\n * tw({ 'bg-blue-500': true, 'hidden': false }) // 'bg-blue-500'\r\n */\r\nconst twcl = createCl(tailwindPlugin);\r\n\r\nexport {twcl,twcl as tw};\r\n\r\n\r\n// Export the type so users can use it in their component props\r\nexport type TailwindKey = keyof typeof tailwindPlugin;\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "clases-tailwind",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
}
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"clases": "1.0.
|
|
14
|
+
"clases": "1.0.2"
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build": "tsup src/index.ts --format cjs,esm --dts --clean",
|
package/src/index.ts
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
|
-
import { createCl } from
|
|
1
|
+
import { createCl } from 'clases';
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Configuration object containing default prefixes for Tailwind CSS.
|
|
6
|
+
* * Use this to maintain consistency between your class utility and
|
|
7
|
+
* Tailwind's variant system.
|
|
8
|
+
* * @example
|
|
9
|
+
* // Accessing a specific prefix
|
|
10
|
+
* const basePrefix = tailwindPlugin.prefix;
|
|
11
|
+
*/
|
|
3
12
|
export const tailwindPlugin = {
|
|
4
13
|
// --- Estructura y Pantallas ---
|
|
5
14
|
base: 'base',
|
|
@@ -84,7 +93,21 @@ export const tailwindPlugin = {
|
|
|
84
93
|
ltr: 'ltr'
|
|
85
94
|
};
|
|
86
95
|
|
|
87
|
-
|
|
96
|
+
/**
|
|
97
|
+
* Generates an optimized Tailwind CSS class string.
|
|
98
|
+
* Combines conditional arguments and resolves Tailwind utility conflicts (using tailwind-merge).
|
|
99
|
+
* * @param args - CSS classes, objects { 'class-name': boolean }, arrays, or nullish values.
|
|
100
|
+
* @returns A clean string of resulting classes without duplicates or conflicts.
|
|
101
|
+
* * @example
|
|
102
|
+
* // Basic usage
|
|
103
|
+
* tw('p-4 bg-red-500', isLarge && 'p-8') // If isLarge is true -> 'bg-red-500 p-8'
|
|
104
|
+
* * // Using objects
|
|
105
|
+
* tw({ 'bg-blue-500': true, 'hidden': false }) // 'bg-blue-500'
|
|
106
|
+
*/
|
|
107
|
+
const twcl = createCl(tailwindPlugin);
|
|
108
|
+
|
|
109
|
+
export {twcl,twcl as tw};
|
|
110
|
+
|
|
88
111
|
|
|
89
112
|
// Export the type so users can use it in their component props
|
|
90
113
|
export type TailwindKey = keyof typeof tailwindPlugin;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
// packages/tailwind/src/test/tailwind.test.ts
|
|
2
2
|
import { describe, it, expect } from 'vitest';
|
|
3
|
-
import {
|
|
3
|
+
import { twcl, tailwindPlugin } from '../index';
|
|
4
4
|
|
|
5
5
|
describe('Tailwind Plugin Integration', () => {
|
|
6
6
|
it('should work out of the box with tailwind presets', () => {
|
|
7
|
-
const result =
|
|
7
|
+
const result = twcl({
|
|
8
8
|
hover: 'opacity-50',
|
|
9
9
|
'2xl': 'container'
|
|
10
10
|
});
|
|
@@ -13,7 +13,7 @@ describe('Tailwind Plugin Integration', () => {
|
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
it('should support the base key for standard classes', () => {
|
|
16
|
-
const result =
|
|
16
|
+
const result = twcl({
|
|
17
17
|
base: 'flex flex-col',
|
|
18
18
|
md: 'flex-row'
|
|
19
19
|
});
|