@blockbite/tailwind 3.4.15 → 3.4.16

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.
@@ -1,4 +1 @@
1
- export default function ({ addComponents, theme }: {
2
- addComponents: any;
3
- theme: any;
4
- }): void;
1
+ export {};
@@ -1,29 +1 @@
1
- /*
2
- --b_container-fluid-xs: 98vw;
3
- --b_container-fluid-xl: 95vw;
4
- --b_padding: 1rem;
5
- */
6
- export default function ({ addComponents, theme }) {
7
- // Base style
8
- addComponents({
9
- [`.container-fluid`]: {
10
- marginLeft: 'auto',
11
- marginRight: 'auto',
12
- paddingLeft: 'var(--b_padding, 4vw)',
13
- paddingRight: 'var(--b_padding, 4vw)',
14
- },
15
- });
16
- // Responsive style for 2xl (users must use 2xl:container-fluid)
17
- const maxWidth2xl = theme('screens.2xl');
18
- if (maxWidth2xl) {
19
- addComponents({
20
- [`.container-fluid-2xl`]: {
21
- maxWidth: maxWidth2xl,
22
- marginLeft: 'auto',
23
- marginRight: 'auto',
24
- paddingLeft: 'var(--b_padding, 1rem)',
25
- paddingRight: 'var(--b_padding, 1rem)',
26
- },
27
- });
28
- }
29
- }
1
+ export {};
@@ -0,0 +1,11 @@
1
+ export default function ({ addComponents }) {
2
+ const b_mask_text = {
3
+ '.b_mask-text': {
4
+ color: 'transparent',
5
+ '-webkit-text-fill-color': 'transparent',
6
+ 'background-clip': 'text',
7
+ '-webkit-background-clip': 'text',
8
+ },
9
+ };
10
+ addComponents(b_mask_text);
11
+ }
@@ -0,0 +1,3 @@
1
+ export default function ({ addComponents }: {
2
+ addComponents: any;
3
+ }): void;
@@ -0,0 +1,11 @@
1
+ export default function ({ addComponents }) {
2
+ const b_text_mask = {
3
+ '.b_text-mask': {
4
+ color: 'transparent',
5
+ '-webkit-text-fill-color': 'transparent',
6
+ 'background-clip': 'text',
7
+ '-webkit-background-clip': 'text',
8
+ },
9
+ };
10
+ addComponents(b_text_mask);
11
+ }
package/dist/index.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { getColorObject, getColors } from './colors.js';
2
2
  import { getContainer } from './container.js';
3
- import { getScreens } from './screens.js';
4
- import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing } from './spacing.js';
3
+ import { percentSpacing, spanSpacing } from './spacing.js';
5
4
  declare const blockbiteTailwindPlugin: any;
6
5
  export default blockbiteTailwindPlugin;
7
- export { fluidSpacing, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, };
6
+ export { getColorObject, getColors, getContainer, percentSpacing, spanSpacing };
package/dist/index.js CHANGED
@@ -2,31 +2,25 @@ import plugin from 'tailwindcss/plugin';
2
2
  // Utilities and helpers
3
3
  import { getColorObject, getColors } from './colors.js';
4
4
  import { getContainer } from './container.js';
5
- import { getScreens } from './screens.js';
6
- import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, } from './spacing.js';
5
+ import { percentSpacing, spanSpacing } from './spacing.js';
7
6
  // Components
8
- import anchorPosition from './components/anchor-position.js';
9
- import fluidContainer from './components/fluid-container.js';
10
- import gridContainer from './components/grid-container.js';
11
- import interaction from './components/interaction.js';
12
- import swiper from './components/swiper.js';
7
+ // import anchorPosition from './components/anchor-position.js';
8
+ // import gridContainer from './components/grid-container.js';
9
+ // import swiper from './components/swiper.js';
13
10
  // Plugins
14
- import grid16x from './plugins/grid-16x.js';
15
- import viewportDimensions from './plugins/viewport-dimensions.js';
16
- // Gridarea utilities
17
- import gridAreaPlugin from './gridarea/index.js';
11
+ import fluidContainer from './plugins/fluid-container.js';
12
+ import gridArea from './plugins/grid-area.js';
13
+ import mask from './plugins/mask.js';
18
14
  const blockbiteTailwindPlugin = plugin(function (api) {
19
15
  // Register all components
20
- gridContainer(api);
21
- fluidContainer(api);
22
- anchorPosition(api);
23
- interaction(api);
24
- swiper(api);
16
+ // gridContainer(api);
17
+ // anchorPosition(api);
18
+ // swiper(api);
25
19
  // Register all plugins/utilities
26
- viewportDimensions.handler(api);
27
- gridAreaPlugin.handler(api);
28
- grid16x.handler(api);
20
+ gridArea.handler(api);
21
+ fluidContainer.handler(api);
22
+ mask.handler(api);
29
23
  });
30
24
  export default blockbiteTailwindPlugin;
31
25
  // Export functions and constants
32
- export { fluidSpacing, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, };
26
+ export { getColorObject, getColors, getContainer, percentSpacing, spanSpacing };
@@ -1,2 +1,2 @@
1
- declare const _default: import("node_modules/tailwindcss/dist/types-B254mqw1.mjs").b;
1
+ declare const _default: import("node_modules/tailwindcss/dist/types-WlZgYgM8.mjs").b;
2
2
  export default _default;
@@ -0,0 +1,24 @@
1
+ import plugin from 'tailwindcss/plugin';
2
+ export default plugin(function ({ addBase, theme, addComponents }) {
3
+ const maxWidth2xl = theme('screens.2xl', '1536px');
4
+ addBase({
5
+ ':root': {
6
+ '--b_padding': '4vw',
7
+ '--b_maxWidth': '100%',
8
+ [`@media (min-width: ${maxWidth2xl})`]: {
9
+ '--b_padding': '1rem',
10
+ '--b_maxWidth': maxWidth2xl,
11
+ },
12
+ },
13
+ });
14
+ const components = {
15
+ '.container-fluid': {
16
+ marginLeft: 'auto',
17
+ marginRight: 'auto',
18
+ paddingLeft: 'var(--b_padding, 4vw)',
19
+ paddingRight: 'var(--b_padding, 4vw)',
20
+ maxWidth: 'var(--b_maxWidth, 100%)',
21
+ },
22
+ };
23
+ addComponents(components, { variants: ['responsive'] });
24
+ });
@@ -1,2 +1,2 @@
1
- declare const _default: import("node_modules/tailwindcss/dist/types-B254mqw1.mjs").b;
1
+ declare const _default: import("node_modules/tailwindcss/dist/types-WlZgYgM8.mjs").b;
2
2
  export default _default;
@@ -0,0 +1,44 @@
1
+ import plugin from 'tailwindcss/plugin';
2
+ export default plugin(function ({ matchUtilities }) {
3
+ // Arbitrary value utility that only sets --area
4
+ matchUtilities({
5
+ area: (value) => {
6
+ const parts = value.split(/[\/-]/).map((p) => p.trim());
7
+ if (parts.length === 4 && parts.every(Boolean)) {
8
+ return {
9
+ '--area': `${parts[0]} / ${parts[1]} / ${parts[2]} / ${parts[3]}`,
10
+ };
11
+ }
12
+ return {}; // ignore invalid values
13
+ },
14
+ }, { values: {} });
15
+ // Arbitrary grid container: grid-area-[cols/rows]
16
+ // - Sets grid templates with given track counts
17
+ // - Provides default 25% area via --b_area (half cols x half rows)
18
+ matchUtilities({
19
+ 'grid-area': (value) => {
20
+ const str = String(value).trim();
21
+ const m = str.match(/^(\d+)\s*[\/ -]\s*(\d+)$/);
22
+ if (!m)
23
+ return {};
24
+ const cols = parseInt(m[1], 10);
25
+ const rows = parseInt(m[2], 10);
26
+ if (!Number.isFinite(cols) ||
27
+ !Number.isFinite(rows) ||
28
+ cols <= 0 ||
29
+ rows <= 0)
30
+ return {};
31
+ const halfCols = Math.ceil(cols / 2);
32
+ const halfRows = Math.ceil(rows / 2);
33
+ return {
34
+ display: 'grid',
35
+ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
36
+ gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
37
+ '--b_area': `1 / 1 / ${halfRows} / ${halfCols}`,
38
+ '& > *': {
39
+ gridArea: 'var(--area, var(--b_area))',
40
+ },
41
+ };
42
+ },
43
+ }, { values: {} });
44
+ });
@@ -1,2 +1,2 @@
1
- declare const _default: import("node_modules/tailwindcss/dist/types-B254mqw1.mjs").b;
1
+ declare const _default: import("node_modules/tailwindcss/dist/types-WlZgYgM8.mjs").b;
2
2
  export default _default;
@@ -0,0 +1,13 @@
1
+ import plugin from 'tailwindcss/plugin';
2
+ // Utilities-based mask plugin so we can add variants and more masks later
3
+ export default plugin(function ({ addUtilities }) {
4
+ addUtilities({
5
+ // Text mask: make text transparent and clip background to text
6
+ '.b_mask-text': {
7
+ color: 'transparent',
8
+ '-webkit-text-fill-color': 'transparent',
9
+ 'background-clip': 'text',
10
+ '-webkit-background-clip': 'text',
11
+ },
12
+ });
13
+ });
package/dist/spacing.d.ts CHANGED
@@ -1,6 +1,2 @@
1
- export declare const gridSpacing: (prefix?: string) => {};
2
- export declare const fluidSpacing: (prefix?: string) => {};
3
1
  export declare const percentSpacing: () => string[];
4
- export declare const screenSpacing: () => {};
5
- export declare const nativeSpacing: () => (string | number)[];
6
2
  export declare const spanSpacing: () => number[];
package/dist/spacing.js CHANGED
@@ -1,70 +1,3 @@
1
- function createFluidSpacing(prefix) {
2
- const fluid = [
3
- {
4
- size: '0px',
5
- slug: '0',
6
- name: '0',
7
- },
8
- {
9
- size: 'clamp(16px, 1vw, 32px)',
10
- slug: '1',
11
- name: '1',
12
- },
13
- {
14
- size: 'clamp(32px, 1vw, 48px)',
15
- slug: '2',
16
- name: '2',
17
- },
18
- {
19
- size: 'clamp(40px, 1vw, 50px)',
20
- slug: '3',
21
- name: '3',
22
- },
23
- {
24
- size: 'clamp(64px, 1vw, 80px)',
25
- slug: '4',
26
- name: '4',
27
- },
28
- {
29
- size: 'clamp(128px, 1vw, 144px)',
30
- slug: '5',
31
- name: '5',
32
- },
33
- {
34
- size: 'clamp(144px, 1vw, 164px)',
35
- slug: '6',
36
- name: '6',
37
- },
38
- {
39
- slug: '8',
40
- size: 'clamp(16px, 1vw, 32px)',
41
- name: '8',
42
- },
43
- {
44
- slug: '9',
45
- size: 'clamp(16px, 1vw, 32px)',
46
- name: '9',
47
- },
48
- {
49
- slug: '10',
50
- size: 'clamp(16px, 1vw, 32px)',
51
- name: '10',
52
- },
53
- // can be used to push contain inside grid-container
54
- {
55
- slug: '1fr',
56
- size: 'var(--b_fr-size, 1rem)',
57
- name: '1FR',
58
- },
59
- ];
60
- const FluidSizes = {};
61
- // add clamp spacing for gaps
62
- fluid.forEach((size) => {
63
- // add to spacing
64
- FluidSizes[prefix + 'fluid-' + size.slug] = size.size;
65
- });
66
- return FluidSizes;
67
- }
68
1
  function createPercentSpacing() {
69
2
  const percentUnits = [
70
3
  '1/2',
@@ -97,104 +30,14 @@ function createPercentSpacing() {
97
30
  ];
98
31
  return percentUnits;
99
32
  }
100
- function createScreenSpacing() {
101
- const screenSpacing = [
102
- 'b_screen-10',
103
- 'b_screen-20',
104
- 'b_screen-30',
105
- 'b_screen-40',
106
- 'b_screen-50',
107
- 'b_screen-60',
108
- 'b_screen-70',
109
- 'b_screen-80',
110
- 'b_screen-90',
111
- 'b_screen-100',
112
- ];
113
- const screenSpacingValues = {};
114
- screenSpacing.forEach((size) => {
115
- screenSpacingValues[size] = size;
116
- });
117
- return screenSpacingValues;
118
- }
119
- function createGridSpacing(prefix) {
120
- // create grid based on 16px
121
- const gridSpacing = {};
122
- const minimalValues = [0, 1, 2, 4, 6, 8, 10, 12, 14, 18, 20, 22, 24, 32];
123
- for (let i = 0; i < minimalValues.length; i++) {
124
- const minimalValue = minimalValues[i];
125
- gridSpacing[`${prefix}${minimalValue}`] = minimalValue / 16 + 'rem';
126
- }
127
- for (let i = 1; i < 1280 / 16; i++) {
128
- const gridsize = i * 16;
129
- gridSpacing[`${prefix}${gridsize}`] = i + 'rem';
130
- }
131
- return gridSpacing;
132
- }
133
- function createNativeSpacing() {
134
- const nativeSpacing = [
135
- 0,
136
- 'px',
137
- 0.5,
138
- 1,
139
- 1.5,
140
- 2,
141
- 2.5,
142
- 3,
143
- 3.5,
144
- 4,
145
- 5,
146
- 6,
147
- 7,
148
- 8,
149
- 9,
150
- 10,
151
- 11,
152
- 12,
153
- 14,
154
- 16,
155
- 20,
156
- 24,
157
- 28,
158
- 32,
159
- 36,
160
- 40,
161
- 44,
162
- 48,
163
- 52,
164
- 56,
165
- 60,
166
- 64,
167
- 72,
168
- 80,
169
- 96,
170
- ];
171
- return nativeSpacing;
172
- }
173
33
  function createSpanSpacing() {
174
34
  const colSpanValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
175
35
  return colSpanValues;
176
36
  }
177
- export const gridSpacing = (prefix = '') => {
178
- // create grid based on 16px
179
- const spacingGrid = createGridSpacing(prefix);
180
- return spacingGrid;
181
- };
182
- export const fluidSpacing = (prefix = '') => {
183
- const spacingFluid = createFluidSpacing(prefix);
184
- return spacingFluid;
185
- };
186
37
  export const percentSpacing = () => {
187
38
  const spacingPercent = createPercentSpacing();
188
39
  return spacingPercent;
189
40
  };
190
- export const screenSpacing = () => {
191
- const spacingScreen = createScreenSpacing();
192
- return spacingScreen;
193
- };
194
- export const nativeSpacing = () => {
195
- const spacingNative = createNativeSpacing();
196
- return spacingNative;
197
- };
198
41
  export const spanSpacing = () => {
199
42
  const spacingSpan = createSpanSpacing();
200
43
  return spacingSpan;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockbite/tailwind",
3
- "version": "3.4.15",
3
+ "version": "3.4.16",
4
4
  "description": "helper for blockbite plugin and blockbite theme",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -25,7 +25,8 @@
25
25
  "i": "^0.3.7",
26
26
  "npm": "^11.3.0",
27
27
  "tailwind-scrollbar": "^4.0.2",
28
- "user": "^0.0.0"
28
+ "user": "^0.0.0",
29
+ "@blockbite/libraries": "0.11.7"
29
30
  },
30
31
  "publishConfig": {
31
32
  "access": "public"
@@ -42,6 +43,6 @@
42
43
  "test": "echo \"Error: no test specified\" && exit 1",
43
44
  "dev": "vite",
44
45
  "build": "tsc --declaration --outDir dist",
45
- "type-check": "tsc --noEmit"
46
+ "lint:ts": "tsc --noEmit"
46
47
  }
47
48
  }
@@ -1,7 +0,0 @@
1
- import { getAspectRatio } from './aspect-ratio.js';
2
- import { getColorObject, getColors } from './colors.js';
3
- import { getContainer } from './container.js';
4
- import { getScreens } from './screens.js';
5
- import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing } from './spacing.js';
6
- import { themeParser } from './theme-parser.js';
7
- export { fluidSpacing, getAspectRatio, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, themeParser, };
@@ -1,9 +0,0 @@
1
- // Import functions and constants
2
- import { getAspectRatio } from './aspect-ratio.js';
3
- import { getColorObject, getColors } from './colors.js';
4
- import { getContainer } from './container.js';
5
- import { getScreens } from './screens.js';
6
- import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, } from './spacing.js';
7
- import { themeParser } from './theme-parser.js';
8
- // Export functions and constants
9
- export { fluidSpacing, getAspectRatio, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, themeParser, };
@@ -1,35 +0,0 @@
1
- export default function ({ addComponents }) {
2
- const b_tileslide_in = {
3
- '.tile-in-left': {
4
- position: 'absolute!important',
5
- top: 0,
6
- left: 0,
7
- right: 0,
8
- bottom: 0,
9
- zIndex: 10,
10
- overflow: 'hidden',
11
- transition: 'transform 0.5s',
12
- transform: 'translateX(-100%)',
13
- },
14
- '.active .tile-in-left': {
15
- transform: 'translateX(0%)',
16
- },
17
- };
18
- const b_tilefade_in = {
19
- '.tile-in-fade': {
20
- opacity: 0,
21
- transition: 'opacity 0.5s',
22
- position: 'absolute!important',
23
- top: 0,
24
- left: 0,
25
- right: 0,
26
- bottom: 0,
27
- zIndex: 10,
28
- overflow: 'hidden',
29
- },
30
- '.active .tile-in-fade': {
31
- opacity: 1,
32
- },
33
- };
34
- addComponents([b_tileslide_in, b_tilefade_in]);
35
- }
@@ -1,7 +0,0 @@
1
- import plugin from 'tailwindcss/plugin';
2
- import areaDimensions from './utilities/area-dimensions.js';
3
- import gridArea from './utilities/grid-area.js';
4
- export default plugin((api) => {
5
- areaDimensions(api);
6
- gridArea(api);
7
- });
@@ -1,3 +0,0 @@
1
- export default function ({ addUtilities }: {
2
- addUtilities: any;
3
- }): void;
@@ -1,22 +0,0 @@
1
- function escapeClassName(className) {
2
- return className.replace(/([^a-zA-Z0-9-])/g, '\\$1');
3
- }
4
- export default function ({ addUtilities }) {
5
- const newUtilities = {};
6
- // 96 is max resolution
7
- for (let i = 0; i <= 97; i++) {
8
- newUtilities[`.${escapeClassName(`area-x-${i}`)}`] = {
9
- '--b_area-x': `${i}`,
10
- };
11
- newUtilities[`.${escapeClassName(`area-y-${i}`)}`] = {
12
- '--b_area-y': `${i}`,
13
- };
14
- newUtilities[`.${escapeClassName(`area-w-${i}`)}`] = {
15
- '--b_area-w': `${i}`,
16
- };
17
- newUtilities[`.${escapeClassName(`area-h-${i}`)}`] = {
18
- '--b_area-h': `${i}`,
19
- };
20
- }
21
- addUtilities(newUtilities, ['responsive']);
22
- }
@@ -1,5 +0,0 @@
1
- export default function ({ addComponents, matchUtilities, config }: {
2
- addComponents: any;
3
- matchUtilities: any;
4
- config: any;
5
- }): void;
@@ -1,46 +0,0 @@
1
- export default function ({ addComponents, matchUtilities, config }) {
2
- const important = config('important');
3
- const prefix = typeof important === 'string' ? important : '';
4
- // Predefined grid-area utilities
5
- addComponents({
6
- [`${prefix} .area`]: {
7
- gridArea: 'var(--b_area-y) / var(--b_area-x) / calc(var(--b_area-y) + var(--b_area-h)) / calc(var(--b_area-x) + var(--b_area-w))',
8
- },
9
- [`${prefix} .b_grid-area-16`]: {
10
- display: 'grid',
11
- gridTemplateColumns: 'repeat(16, 1fr)',
12
- gridTemplateRows: 'repeat(16, 1fr)',
13
- '--init-area': '1 / 1 / 4 / 4',
14
- },
15
- [`${prefix} .b_grid-area-32`]: {
16
- display: 'grid',
17
- gridTemplateColumns: 'repeat(32, 1fr)',
18
- gridTemplateRows: 'repeat(32, 1fr)',
19
- '--init-area': '1 / 1 / 8 / 8',
20
- },
21
- [`${prefix} .b_grid-area-64`]: {
22
- display: 'grid',
23
- gridTemplateColumns: 'repeat(64, 1fr)',
24
- gridTemplateRows: 'repeat(64, 1fr)',
25
- '--init-area': '1 / 1 / 16 / 16',
26
- },
27
- [`${prefix} .b_grid-area-96`]: {
28
- display: 'grid',
29
- gridTemplateColumns: 'repeat(96, 1fr)',
30
- gridTemplateRows: 'repeat(96, 1fr)',
31
- '--init-area': '1 / 1 / 24 / 24',
32
- },
33
- });
34
- matchUtilities({
35
- area: (value) => {
36
- // Remove the square brackets and split the value by "/"
37
- const parts = value.split('-'); // slice to remove the square brackets
38
- if (parts.length === 4) {
39
- return {
40
- 'grid-area': `${parts[0]} / ${parts[1]} / ${parts[2]} / ${parts[3]}`,
41
- };
42
- }
43
- },
44
- }, { values: {} } // Allow arbitrary values like b_area[1/4/4/3]
45
- );
46
- }
@@ -1,60 +0,0 @@
1
- import plugin from 'tailwindcss/plugin';
2
- export default plugin(function ({ addBase, addUtilities }) {
3
- const baseVar = '--b_grid-spacing';
4
- const baseValue = '1rem'; // 16px grid
5
- // Set the root spacing variable
6
- addBase({
7
- ':root': {
8
- [baseVar]: baseValue,
9
- },
10
- });
11
- // Define spacing values
12
- const minimalValues = [0, 1, 2, 4, 6, 8, 10, 12, 14, 18, 20, 22, 24, 32];
13
- const largeSteps = [];
14
- for (let i = 1; i <= 1280 / 16; i++) {
15
- largeSteps.push(i * 16); // 16, 32, 48, ..., 1280
16
- }
17
- const allValues = Array.from(new Set([...minimalValues, ...largeSteps])).sort((a, b) => a - b);
18
- const utilities = {};
19
- const properties = {
20
- w: 'width',
21
- h: 'height',
22
- 'min-w-b': 'minWidth',
23
- 'max-w-b': 'maxWidth',
24
- 'min-h-b': 'minHeight',
25
- 'max-h-b': 'maxHeight',
26
- 'p-b': 'padding',
27
- 'pt-b': 'paddingTop',
28
- 'pr-b': 'paddingRight',
29
- 'pb-b': 'paddingBottom',
30
- 'pl-b': 'paddingLeft',
31
- 'px-b': ['paddingLeft', 'paddingRight'],
32
- 'py-b': ['paddingTop', 'paddingBottom'],
33
- 'm-b': 'margin',
34
- 'mt-b': 'marginTop',
35
- 'mr-b': 'marginRight',
36
- 'mb-b': 'marginBottom',
37
- 'ml-b': 'marginLeft',
38
- 'mx-b': ['marginLeft', 'marginRight'],
39
- 'my-b': ['marginTop', 'marginBottom'],
40
- };
41
- for (const [prefix, cssProp] of Object.entries(properties)) {
42
- for (const pxValue of allValues) {
43
- const multiplier = pxValue / 16;
44
- const className = `.${prefix}-b_${pxValue}`;
45
- const cssValue = `calc(var(${baseVar}) * ${multiplier})`;
46
- if (Array.isArray(cssProp)) {
47
- utilities[className] = cssProp.reduce((acc, prop) => {
48
- acc[prop] = cssValue;
49
- return acc;
50
- }, {});
51
- }
52
- else {
53
- utilities[className] = {
54
- [cssProp]: cssValue,
55
- };
56
- }
57
- }
58
- }
59
- addUtilities(utilities, { variants: ['responsive'] });
60
- });
@@ -1,25 +0,0 @@
1
- import plugin from 'tailwindcss/plugin';
2
- export default plugin(function ({ addUtilities }) {
3
- const utilities = {};
4
- for (let i = 10; i <= 100; i += 10) {
5
- utilities[`.w-b_screen-${i}`] = {
6
- width: `${i}vw`,
7
- };
8
- utilities[`.h-b_screen-${i}`] = {
9
- height: `${i}vh`,
10
- };
11
- utilities[`.min-h-b_screen-${i}`] = {
12
- minHeight: `${i}vh`,
13
- };
14
- utilities[`.max-h-b_screen-${i}`] = {
15
- maxHeight: `${i}vh`,
16
- };
17
- utilities[`.min-w-b_screen-${i}`] = {
18
- minWidth: `${i}vw`,
19
- };
20
- utilities[`.max-w-b_screen-${i}`] = {
21
- maxWidth: `${i}vw`,
22
- };
23
- }
24
- addUtilities(utilities);
25
- });
package/dist/screens.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export declare const getScreens: (prefix?: string, minxmax?: {
2
- min: string;
3
- max: string;
4
- max2xl: string;
5
- }) => {};
package/dist/screens.js DELETED
@@ -1,10 +0,0 @@
1
- export const getScreens = (prefix = '', minxmax = { min: '768px', max: '1100px', max2xl: '1440px' }) => {
2
- // max 320px
3
- const screens = {};
4
- screens[prefix + 'xs'] = { max: minxmax.min };
5
- screens[prefix + 'md'] = { min: minxmax.min, max: minxmax.max };
6
- screens[prefix + 'xl'] = { min: minxmax.max };
7
- screens[prefix + 'sm'] = { max: minxmax.max };
8
- screens[prefix + '2xl'] = { min: minxmax.max2xl };
9
- return screens;
10
- };
File without changes