@blockbite/tailwind 3.4.4 → 3.4.7
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/CHANGELOG.md +19 -0
- package/components/anchor-position.js +51 -51
- package/components/fluid-container.js +11 -11
- package/components/grid-container.js +13 -13
- package/components/interaction.js +12 -12
- package/components/swiper.js +5 -5
- package/dist/assets/index-BUymJr41.js +74 -0
- package/dist/assets/index-iiB8K1As.css +1 -0
- package/dist/index.html +23 -0
- package/gridarea/index.js +3 -3
- package/gridarea/utilities/area-dimensions.js +5 -5
- package/gridarea/utilities/grid-area.js +22 -22
- package/index.js +15 -15
- package/lib/aspect-ratio.js +3 -3
- package/lib/colors.js +19 -20
- package/lib/container.js +3 -3
- package/lib/screens.js +7 -7
- package/lib/spacing.js +78 -78
- package/lib/theme-parser.js +20 -20
- package/motion/index.js +6 -3
- package/motion/theme.js +170 -170
- package/motion/utilities/delay.js +10 -6
- package/motion/utilities/direction.js +7 -6
- package/motion/utilities/duration.js +10 -6
- package/motion/utilities/fillMode.js +7 -6
- package/motion/utilities/iterationCount.js +7 -6
- package/motion/utilities/offset.js +4 -4
- package/motion/utilities/playState.js +7 -6
- package/motion/utilities/timingFunction.js +7 -6
- package/package.json +6 -6
- package/plugins/viewport-dimensions.js +1 -1
- package/postcss.config.js +1 -1
- package/tailwind.config.js +6 -6
- package/themecolors/index.js +25 -26
- package/vite.js +2 -2
- package/.gitattributes +0 -2
- package/.tool-versions +0 -1
- package/blockbite-tailwind.code-workspace +0 -7
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# @blockbite/tailwind
|
|
2
|
+
|
|
3
|
+
## 3.4.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 1101873: Version up
|
|
8
|
+
|
|
9
|
+
## 3.4.6
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 0d56127: Add dist directories
|
|
14
|
+
|
|
15
|
+
## 3.4.5
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- c9871ac: Linting fixes for free plugin and tailwind package
|
|
@@ -1,96 +1,96 @@
|
|
|
1
1
|
module.exports = function ({ addComponents, theme }) {
|
|
2
2
|
const anchorTopCenter = {
|
|
3
|
-
|
|
4
|
-
position:
|
|
5
|
-
top:
|
|
6
|
-
left:
|
|
7
|
-
transform:
|
|
3
|
+
'.b_anchor-top-center': {
|
|
4
|
+
position: 'absolute',
|
|
5
|
+
top: '0',
|
|
6
|
+
left: '50%',
|
|
7
|
+
transform: 'translate(-50%, -50%)',
|
|
8
8
|
},
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
const anchorTopLeft = {
|
|
12
|
-
|
|
13
|
-
position:
|
|
14
|
-
top:
|
|
15
|
-
left:
|
|
12
|
+
'.b_anchor-top-left': {
|
|
13
|
+
position: 'absolute',
|
|
14
|
+
top: '0',
|
|
15
|
+
left: '0',
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
const anchorTopRight = {
|
|
20
|
-
|
|
21
|
-
position:
|
|
22
|
-
top:
|
|
23
|
-
right:
|
|
20
|
+
'.b_anchor-top-right': {
|
|
21
|
+
position: 'absolute',
|
|
22
|
+
top: '0',
|
|
23
|
+
right: '0',
|
|
24
24
|
},
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
const anchorBottomCenter = {
|
|
28
|
-
|
|
29
|
-
position:
|
|
30
|
-
bottom:
|
|
31
|
-
left:
|
|
32
|
-
transform:
|
|
28
|
+
'.b_anchor-bottom-center': {
|
|
29
|
+
position: 'absolute',
|
|
30
|
+
bottom: '0',
|
|
31
|
+
left: '50%',
|
|
32
|
+
transform: 'translate(-50%, 50%)',
|
|
33
33
|
},
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
const anchorBottomLeft = {
|
|
37
|
-
|
|
38
|
-
position:
|
|
39
|
-
bottom:
|
|
40
|
-
left:
|
|
37
|
+
'.b_anchor-bottom-left': {
|
|
38
|
+
position: 'absolute',
|
|
39
|
+
bottom: '0',
|
|
40
|
+
left: '0',
|
|
41
41
|
},
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
const anchorBottomRight = {
|
|
45
|
-
|
|
46
|
-
position:
|
|
47
|
-
bottom:
|
|
48
|
-
right:
|
|
45
|
+
'.b_anchor-bottom-right': {
|
|
46
|
+
position: 'absolute',
|
|
47
|
+
bottom: '0',
|
|
48
|
+
right: '0',
|
|
49
49
|
},
|
|
50
50
|
};
|
|
51
51
|
|
|
52
52
|
const anchorCenterLeft = {
|
|
53
|
-
|
|
54
|
-
position:
|
|
55
|
-
top:
|
|
56
|
-
left:
|
|
57
|
-
transform:
|
|
53
|
+
'.b_anchor-center-left': {
|
|
54
|
+
position: 'absolute',
|
|
55
|
+
top: '50%',
|
|
56
|
+
left: '0',
|
|
57
|
+
transform: 'translate(-50%, -50%)',
|
|
58
58
|
},
|
|
59
59
|
};
|
|
60
60
|
|
|
61
61
|
const anchorCenterRight = {
|
|
62
|
-
|
|
63
|
-
position:
|
|
64
|
-
top:
|
|
65
|
-
right:
|
|
66
|
-
transform:
|
|
62
|
+
'.b_anchor-center-right': {
|
|
63
|
+
position: 'absolute',
|
|
64
|
+
top: '50%',
|
|
65
|
+
right: '0',
|
|
66
|
+
transform: 'translate(50%, -50%)',
|
|
67
67
|
},
|
|
68
68
|
};
|
|
69
69
|
|
|
70
70
|
const anchorCenterCenter = {
|
|
71
|
-
|
|
72
|
-
position:
|
|
73
|
-
top:
|
|
74
|
-
left:
|
|
75
|
-
transform:
|
|
71
|
+
'.b_anchor-center-center': {
|
|
72
|
+
position: 'absolute',
|
|
73
|
+
top: '50%',
|
|
74
|
+
left: '50%',
|
|
75
|
+
transform: 'translate(-50%, -50%)',
|
|
76
76
|
},
|
|
77
77
|
};
|
|
78
78
|
|
|
79
79
|
const anchorCenterTop = {
|
|
80
|
-
|
|
81
|
-
position:
|
|
82
|
-
top:
|
|
83
|
-
left:
|
|
84
|
-
transform:
|
|
80
|
+
'.b_anchor-center-top': {
|
|
81
|
+
position: 'absolute',
|
|
82
|
+
top: '0',
|
|
83
|
+
left: '50%',
|
|
84
|
+
transform: 'translate(-50%, 0%)',
|
|
85
85
|
},
|
|
86
86
|
};
|
|
87
87
|
|
|
88
88
|
const anchorCenterBottom = {
|
|
89
|
-
|
|
90
|
-
position:
|
|
91
|
-
bottom:
|
|
92
|
-
left:
|
|
93
|
-
transform:
|
|
89
|
+
'.b_anchor-center-bottom': {
|
|
90
|
+
position: 'absolute',
|
|
91
|
+
bottom: '0',
|
|
92
|
+
left: '50%',
|
|
93
|
+
transform: 'translate(-50%, 0%)',
|
|
94
94
|
},
|
|
95
95
|
};
|
|
96
96
|
|
|
@@ -4,28 +4,28 @@
|
|
|
4
4
|
--b_padding: 1rem;
|
|
5
5
|
*/
|
|
6
6
|
module.exports = function ({ addComponents, theme, config }) {
|
|
7
|
-
const important = config(
|
|
8
|
-
const prefix = typeof important ===
|
|
7
|
+
const important = config('important');
|
|
8
|
+
const prefix = typeof important === 'string' ? important : '';
|
|
9
9
|
|
|
10
10
|
const container = {
|
|
11
11
|
[`${prefix} .b_container-fluid`]: {
|
|
12
|
-
marginLeft:
|
|
13
|
-
marginRight:
|
|
14
|
-
paddingLeft:
|
|
15
|
-
paddingRight:
|
|
12
|
+
marginLeft: 'auto',
|
|
13
|
+
marginRight: 'auto',
|
|
14
|
+
paddingLeft: 'var(--b_padding, 4vw)',
|
|
15
|
+
paddingRight: 'var(--b_padding, 4vw)',
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
-
const maxWidth2xl = theme(
|
|
19
|
+
const maxWidth2xl = theme('screens.2xl');
|
|
20
20
|
// Add a media query for screens at '2xl' size
|
|
21
21
|
if (maxWidth2xl) {
|
|
22
22
|
container[`@media (min-width: ${maxWidth2xl})`] = {
|
|
23
23
|
[`${prefix} .b_container-fluid`]: {
|
|
24
24
|
maxWidth: maxWidth2xl,
|
|
25
|
-
marginLeft:
|
|
26
|
-
marginRight:
|
|
27
|
-
paddingLeft:
|
|
28
|
-
paddingRight:
|
|
25
|
+
marginLeft: 'auto',
|
|
26
|
+
marginRight: 'auto',
|
|
27
|
+
paddingLeft: 'var(--b_padding, 1rem)',
|
|
28
|
+
paddingRight: 'var(--b_padding, 1rem)',
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
31
|
}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
module.exports = function ({ addComponents, theme, config }) {
|
|
2
|
-
const maxWidthLg = theme(
|
|
3
|
-
const maxWidth2xl = theme(
|
|
2
|
+
const maxWidthLg = theme('screens.lg');
|
|
3
|
+
const maxWidth2xl = theme('screens.2xl');
|
|
4
4
|
|
|
5
|
-
const important = config(
|
|
6
|
-
const cssVars = config(
|
|
7
|
-
const prefix = typeof important ===
|
|
5
|
+
const important = config('important');
|
|
6
|
+
const cssVars = config('cssVars') | false;
|
|
7
|
+
const prefix = typeof important === 'string' ? important : '';
|
|
8
8
|
|
|
9
9
|
const container = {
|
|
10
10
|
[`${prefix} .b_grid-container`]: {
|
|
11
|
-
display:
|
|
12
|
-
gridTemplateColumns:
|
|
11
|
+
display: 'grid',
|
|
12
|
+
gridTemplateColumns: '1fr repeat(12, var(--b_col-width)) 1fr!important',
|
|
13
13
|
},
|
|
14
14
|
};
|
|
15
15
|
// skip adding the breakpoint-specific variables if cssVars is false
|
|
16
16
|
if (cssVars) {
|
|
17
17
|
const breakpoints = {
|
|
18
18
|
[maxWidthLg]: {
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
'--b_col-width': 'calc((100% - ((var(--b_padding, 4vw) ) * 2)) / 12)',
|
|
20
|
+
'--b_fr-size': '4vw',
|
|
21
21
|
},
|
|
22
22
|
[maxWidth2xl]: {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
'--b_col-width': `calc((${maxWidth2xl} - (var(--b_padding, 1rem) * 2)) / 12)`,
|
|
24
|
+
'--b_padding': 'var(--b_padding, 1rem)',
|
|
25
|
+
'--b_fr-size': `calc(100% - ${maxWidth2xl} / 2)`,
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
28
|
|
|
29
29
|
// Add breakpoint-specific variables
|
|
30
30
|
for (const [breakpoint, vars] of Object.entries(breakpoints)) {
|
|
31
31
|
container[`@media (min-width: ${breakpoint})`] = {
|
|
32
|
-
|
|
32
|
+
':root': vars,
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
module.exports = function ({ addComponents }) {
|
|
2
2
|
const b_tileslide_in = {
|
|
3
|
-
|
|
4
|
-
position:
|
|
3
|
+
'.b_tile-in-left': {
|
|
4
|
+
position: 'absolute!important',
|
|
5
5
|
top: 0,
|
|
6
6
|
left: 0,
|
|
7
7
|
right: 0,
|
|
8
8
|
bottom: 0,
|
|
9
9
|
zIndex: 10,
|
|
10
|
-
overflow:
|
|
11
|
-
transition:
|
|
12
|
-
transform:
|
|
10
|
+
overflow: 'hidden',
|
|
11
|
+
transition: 'transform 0.5s',
|
|
12
|
+
transform: 'translateX(-100%)',
|
|
13
13
|
},
|
|
14
|
-
|
|
15
|
-
transform:
|
|
14
|
+
'.b_active .b_tile-in-left': {
|
|
15
|
+
transform: 'translateX(0%)',
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
const b_tilefade_in = {
|
|
20
|
-
|
|
20
|
+
'.b_tile-in-fade': {
|
|
21
21
|
opacity: 0,
|
|
22
|
-
transition:
|
|
23
|
-
position:
|
|
22
|
+
transition: 'opacity 0.5s',
|
|
23
|
+
position: 'absolute!important',
|
|
24
24
|
top: 0,
|
|
25
25
|
left: 0,
|
|
26
26
|
right: 0,
|
|
27
27
|
bottom: 0,
|
|
28
28
|
zIndex: 10,
|
|
29
|
-
overflow:
|
|
29
|
+
overflow: 'hidden',
|
|
30
30
|
},
|
|
31
|
-
|
|
31
|
+
'.b_active .b_tile-in-fade': {
|
|
32
32
|
opacity: 1,
|
|
33
33
|
},
|
|
34
34
|
};
|
package/components/swiper.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
module.exports = function ({ addComponents }) {
|
|
2
2
|
// allows infinite loop for swiper continues
|
|
3
3
|
const b_newsticker = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
'.b_newsticker': {
|
|
5
|
+
'& > .swiper-free-mode > .swiper-wrapper': {
|
|
6
|
+
'-webkit-transition-timing-function': 'linear !important',
|
|
7
|
+
'-o-transition-timing-function': 'linear !important',
|
|
8
|
+
'transition-timing-function': 'linear !important',
|
|
9
9
|
},
|
|
10
10
|
},
|
|
11
11
|
};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import a from"https://esm.sh/tailwindcss-in-browser@0.1.3";(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))s(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const l of r.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&s(l)}).observe(document,{childList:!0,subtree:!0});function d(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function s(e){if(e.ep)return;e.ep=!0;const r=d(e);fetch(e.href,r)}})();const i=`
|
|
2
|
+
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
|
|
3
|
+
<h1 class="text-2xl font-bold">Hello, Tailwind CSS v4!</h1>
|
|
4
|
+
<p class="text-gray-500">This is a sample component styled with Tailwind CSS v4 in the browser.</p>
|
|
5
|
+
</div>
|
|
6
|
+
`,c=`
|
|
7
|
+
@theme {
|
|
8
|
+
--color-primary: #3b82f6;
|
|
9
|
+
--color-secondary: #64748b;
|
|
10
|
+
--font-sans: 'Inter', sans-serif;
|
|
11
|
+
}
|
|
12
|
+
`;a(i,c).then(o=>{const t=document.createElement("style");t.textContent=o,document.head.appendChild(t)});document.querySelector("#app").innerHTML=`
|
|
13
|
+
<div style="--b_full:100%;">
|
|
14
|
+
<div class="w-full h-[500px] grid b_grid-area-64 bg-red-200">
|
|
15
|
+
<h1 class="bg-yellow-200 b_area md:b_area-x-6 md:b_area-y-4 md:b_area-w-14 md:b_area-h-14">Grid area </h1>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<div class="w-full h-[500px] grid b_grid-area-64 bg-red-200">
|
|
20
|
+
<h1 class="bg-yellow-200 b_area-[1-1-20-40]">Grid area !</h1>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div class="container bg-red-yellow-200 my-4 mx-auto">
|
|
24
|
+
<h4 class="border-red-200 text-4xl border border-red-200 h-[300px]">container tailwind</h4>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
<div class="b_container-fluid bg-red-yellow-200 my-4">
|
|
29
|
+
<h4 class="border-red-200 text-4xl border border-red-200 h-[300px]">container fluid</h4>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div class="b_grid-container bg-red-yellow-200 my-4 h-[300px]">
|
|
33
|
+
<h4 class="border border-red-200 text-4xl col-span-12 col-start-2">container grid</h4>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<div class="b_grid-container bg-red-yellow-200 my-4 h-[300px]">
|
|
37
|
+
<h4 class="border border-red-200 text-4xl col-span-7 col-start-1">left</h4>
|
|
38
|
+
<p class="border border-red-200 text-4xl col-span-6">right</p>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<div class="b_grid-container bg-red-yellow-200 my-4 h-[300px]">
|
|
42
|
+
<h4 class="border border-red-200 text-4xl col-span-6 col-start-2">left</h4>
|
|
43
|
+
<p class="border border-red-200 text-4xl col-span-7 col-start-8">right</p>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="b_grid-container bg-yellow-200 my-4 h-[300px]">
|
|
47
|
+
<h4 class="border bg-red-200 text-4xl col-span-7 col-start-1 row-start-1">left image</h4>
|
|
48
|
+
<h4 class="border border-blue-200 bg-blue-200 bg-opacity-40 text-4xl col-span-6 col-start-2 row-start-1">left text with extra layer</h4>
|
|
49
|
+
<p class="border border-red-200 text-4xl col-span-6">right</p>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
<div class="b_grid-container bg-yellow-200 my-4 h-[300px]">
|
|
54
|
+
<h4 class="border bg-red-200 text-4xl col-span-7 col-start-8 row-start-1 text-right">right image</h4>
|
|
55
|
+
<h4 class="border border-blue-200 bg-blue-200 bg-opacity-40 text-4xl col-span-6 col-start-8 row-start-1">left text</h4>
|
|
56
|
+
<p class="border border-red-200 text-4xl col-span-6">left</p>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
<div class="b_grid-container bg-yellow-200 my-4 h-[300px] w-full">
|
|
61
|
+
<div class="border bg-red-200 text-4xl col-span-7 col-start-1 row-start-1">
|
|
62
|
+
<h4 class="border border-blue-200 bg-blue-200 bg-opacity-40 text-4xl" style="padding-left:var(--b_fr-size);">left text with --b_fr-size</h4>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<p class="border border-red-200 text-4xl col-span-6">right</p>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="b_theme-bg-red-500 bg-yellow-300 text-white p-40 text-3xl">
|
|
69
|
+
Works beautifully 🎨
|
|
70
|
+
<div class="bg-b_theme">This should be red from the parent</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
</div>
|
|
74
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--b_padding, 1rem);padding-left:var(--b_padding, 1rem)}@media (min-width: 640px){.container{max-width:640px;padding-right:var(--b_padding, 1rem);padding-left:var(--b_padding, 1rem)}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px;padding-right:var(--b_padding, 1rem);padding-left:var(--b_padding, 1rem)}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.b_area{grid-area: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))}.b_grid-area-64{display:grid;grid-template-columns:repeat(64,1fr);grid-template-rows:repeat(64,1fr);--init-area: 1 / 1 / 16 / 16}.b_container-fluid{margin-left:auto;margin-right:auto;padding-left:var(--b_padding, 4vw);padding-right:var(--b_padding, 4vw)}@media (min-width: 1536px){.b_container-fluid{max-width:1536px;margin-left:auto;margin-right:auto;padding-left:var(--b_padding, 1rem);padding-right:var(--b_padding, 1rem)}}.b_grid-container{display:grid;grid-template-columns:1fr repeat(12,var(--b_col-width)) 1fr!important}.col-span-12{grid-column:span 12 / span 12}.col-span-6{grid-column:span 6 / span 6}.col-span-7{grid-column:span 7 / span 7}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-8{grid-column-start:8}.row-start-1{grid-row-start:1}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.grid{display:grid}.h-\[300px\]{height:300px}.h-\[500px\]{height:500px}.w-full{width:100%}.border{border-width:1px}.border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity))}.border-red-200{--tw-border-opacity: 1;border-color:rgb(254 202 202 / var(--tw-border-opacity))}.bg-blue-200{--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity: 1;background-color:rgb(254 202 202 / var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity: 1;background-color:rgb(254 240 138 / var(--tw-bg-opacity))}.bg-yellow-300{--tw-bg-opacity: 1;background-color:rgb(253 224 71 / var(--tw-bg-opacity))}.bg-opacity-40{--tw-bg-opacity: .4}.p-40{padding:10rem}.text-right{text-align:right}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.b_area-\[1-1-20-40\]{grid-area:1 / 1 / 20 / 40}.b_theme-bg-red-500{--theme-bg: #ef4444}.bg-b_theme{background-color:var(--theme-bg)}h1{font-size:2.25rem;line-height:2.5rem}@media (min-width: 768px){.md\:b_area-y-4{--b_area-y: 4}.md\:b_area-x-6{--b_area-x: 6}.md\:b_area-w-14{--b_area-w: 14}.md\:b_area-h-14{--b_area-h: 14}}
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite App</title>
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
<script type="module" crossorigin src="/assets/index-BUymJr41.js"></script>
|
|
11
|
+
<link rel="stylesheet" crossorigin href="/assets/index-iiB8K1As.css">
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
|
|
17
|
+
<h1 class="text-2xl font-bold">Hello, Tailwind CSS v4!</h1>
|
|
18
|
+
<p class="text-gray-500">This is a sample component styled with Tailwind CSS v4 in the browser.</p>
|
|
19
|
+
</div>
|
|
20
|
+
<div id="app"></div>
|
|
21
|
+
</body>
|
|
22
|
+
|
|
23
|
+
</html>
|
package/gridarea/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
const plugin = require(
|
|
1
|
+
const plugin = require('tailwindcss/plugin');
|
|
2
2
|
|
|
3
3
|
module.exports = plugin((api) => {
|
|
4
|
-
require(
|
|
5
|
-
require(
|
|
4
|
+
require('./utilities/area-dimensions')(api);
|
|
5
|
+
require('./utilities/grid-area')(api);
|
|
6
6
|
});
|
|
@@ -3,11 +3,11 @@ module.exports = function ({ addUtilities, theme, e }) {
|
|
|
3
3
|
|
|
4
4
|
// 96 is max resolution
|
|
5
5
|
for (let i = 0; i <= 97; i++) {
|
|
6
|
-
newUtilities[`.${e(`b_area-x-${i}`)}`] = {
|
|
7
|
-
newUtilities[`.${e(`b_area-y-${i}`)}`] = {
|
|
8
|
-
newUtilities[`.${e(`b_area-w-${i}`)}`] = {
|
|
9
|
-
newUtilities[`.${e(`b_area-h-${i}`)}`] = {
|
|
6
|
+
newUtilities[`.${e(`b_area-x-${i}`)}`] = { '--b_area-x': `${i}` };
|
|
7
|
+
newUtilities[`.${e(`b_area-y-${i}`)}`] = { '--b_area-y': `${i}` };
|
|
8
|
+
newUtilities[`.${e(`b_area-w-${i}`)}`] = { '--b_area-w': `${i}` };
|
|
9
|
+
newUtilities[`.${e(`b_area-h-${i}`)}`] = { '--b_area-h': `${i}` };
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
addUtilities(newUtilities, [
|
|
12
|
+
addUtilities(newUtilities, ['responsive']);
|
|
13
13
|
};
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
const plugin = require(
|
|
1
|
+
const plugin = require('tailwindcss/plugin');
|
|
2
2
|
|
|
3
3
|
module.exports = function ({ addComponents, matchUtilities, theme, config }) {
|
|
4
|
-
const important = config(
|
|
5
|
-
const prefix = typeof important ===
|
|
4
|
+
const important = config('important');
|
|
5
|
+
const prefix = typeof important === 'string' ? important : '';
|
|
6
6
|
// Predefined grid-area utilities
|
|
7
7
|
addComponents({
|
|
8
8
|
[`${prefix} .b_area`]: {
|
|
9
9
|
gridArea:
|
|
10
|
-
|
|
10
|
+
'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))',
|
|
11
11
|
},
|
|
12
12
|
[`${prefix} .b_grid-area-16`]: {
|
|
13
|
-
display:
|
|
14
|
-
gridTemplateColumns:
|
|
15
|
-
gridTemplateRows:
|
|
16
|
-
|
|
13
|
+
display: 'grid',
|
|
14
|
+
gridTemplateColumns: 'repeat(16, 1fr)',
|
|
15
|
+
gridTemplateRows: 'repeat(16, 1fr)',
|
|
16
|
+
'--init-area': '1 / 1 / 4 / 4',
|
|
17
17
|
},
|
|
18
18
|
[`${prefix} .b_grid-area-32`]: {
|
|
19
|
-
display:
|
|
20
|
-
gridTemplateColumns:
|
|
21
|
-
gridTemplateRows:
|
|
22
|
-
|
|
19
|
+
display: 'grid',
|
|
20
|
+
gridTemplateColumns: 'repeat(32, 1fr)',
|
|
21
|
+
gridTemplateRows: 'repeat(32, 1fr)',
|
|
22
|
+
'--init-area': '1 / 1 / 8 / 8',
|
|
23
23
|
},
|
|
24
24
|
[`${prefix} .b_grid-area-64`]: {
|
|
25
|
-
display:
|
|
26
|
-
gridTemplateColumns:
|
|
27
|
-
gridTemplateRows:
|
|
28
|
-
|
|
25
|
+
display: 'grid',
|
|
26
|
+
gridTemplateColumns: 'repeat(64, 1fr)',
|
|
27
|
+
gridTemplateRows: 'repeat(64, 1fr)',
|
|
28
|
+
'--init-area': '1 / 1 / 16 / 16',
|
|
29
29
|
},
|
|
30
30
|
[`${prefix} .b_grid-area-96`]: {
|
|
31
|
-
display:
|
|
32
|
-
gridTemplateColumns:
|
|
33
|
-
gridTemplateRows:
|
|
34
|
-
|
|
31
|
+
display: 'grid',
|
|
32
|
+
gridTemplateColumns: 'repeat(96, 1fr)',
|
|
33
|
+
gridTemplateRows: 'repeat(96, 1fr)',
|
|
34
|
+
'--init-area': '1 / 1 / 24 / 24',
|
|
35
35
|
},
|
|
36
36
|
});
|
|
37
37
|
matchUtilities(
|
|
38
38
|
{
|
|
39
39
|
b_area: (value) => {
|
|
40
40
|
// Remove the square brackets and split the value by "/"
|
|
41
|
-
const parts = value.split(
|
|
41
|
+
const parts = value.split('-'); // slice to remove the square brackets
|
|
42
42
|
if (parts.length === 4) {
|
|
43
43
|
return {
|
|
44
|
-
|
|
44
|
+
'grid-area': `${parts[0]} / ${parts[1]} / ${parts[2]} / ${parts[3]}`,
|
|
45
45
|
};
|
|
46
46
|
}
|
|
47
47
|
},
|
package/index.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
// Import functions and constants
|
|
2
|
-
import { getAspectRatio } from
|
|
3
|
-
import {
|
|
2
|
+
import { getAspectRatio } from './lib/aspect-ratio';
|
|
3
|
+
import { getColorObject, getColors } from './lib/colors';
|
|
4
|
+
import { getContainer } from './lib/container';
|
|
5
|
+
import { getScreens } from './lib/screens';
|
|
4
6
|
import {
|
|
5
|
-
gridSpacing,
|
|
6
7
|
fluidSpacing,
|
|
7
|
-
|
|
8
|
-
percentSpacing,
|
|
8
|
+
gridSpacing,
|
|
9
9
|
nativeSpacing,
|
|
10
|
+
percentSpacing,
|
|
11
|
+
screenSpacing,
|
|
10
12
|
spanSpacing,
|
|
11
|
-
} from
|
|
12
|
-
import {
|
|
13
|
-
import { getColors, getColorObject } from "./lib/colors";
|
|
14
|
-
import { themeParser } from "./lib/theme-parser";
|
|
13
|
+
} from './lib/spacing';
|
|
14
|
+
import { themeParser } from './lib/theme-parser';
|
|
15
15
|
|
|
16
16
|
// Export functions and constants
|
|
17
17
|
export {
|
|
18
|
+
fluidSpacing,
|
|
18
19
|
getAspectRatio,
|
|
20
|
+
getColorObject,
|
|
21
|
+
getColors,
|
|
19
22
|
getContainer,
|
|
23
|
+
getScreens,
|
|
20
24
|
gridSpacing,
|
|
21
|
-
fluidSpacing,
|
|
22
|
-
screenSpacing,
|
|
23
|
-
percentSpacing,
|
|
24
25
|
nativeSpacing,
|
|
26
|
+
percentSpacing,
|
|
27
|
+
screenSpacing,
|
|
25
28
|
spanSpacing,
|
|
26
|
-
getScreens,
|
|
27
|
-
getColors,
|
|
28
|
-
getColorObject,
|
|
29
29
|
themeParser,
|
|
30
30
|
};
|
package/lib/aspect-ratio.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export const getAspectRatio = (prefix =
|
|
1
|
+
export const getAspectRatio = (prefix = 'b_') => {
|
|
2
2
|
const ratios = {};
|
|
3
|
-
ratios[prefix +
|
|
4
|
-
ratios[prefix +
|
|
3
|
+
ratios[prefix + 'portrait'] = '3 / 4';
|
|
4
|
+
ratios[prefix + 'landscape'] = '4 / 3';
|
|
5
5
|
return ratios;
|
|
6
6
|
};
|