@bug-on/md3-tailwind 0.1.0 → 2.0.0
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/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +17 -0
- package/README.md +63 -0
- package/package.json +4 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @bug-on/md3-tailwind@0.
|
|
2
|
+
> @bug-on/md3-tailwind@2.0.0 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/tailwind
|
|
3
3
|
> tsup
|
|
4
4
|
|
|
5
5
|
[34mCLI[39m Building entry: src/index.ts
|
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
[34mESM[39m Build start
|
|
12
12
|
[34mCJS[39m Build start
|
|
13
13
|
[32mESM[39m [1mdist/index.mjs [22m[32m6.95 KB[39m
|
|
14
|
-
[32mESM[39m ⚡️ Build success in
|
|
14
|
+
[32mESM[39m ⚡️ Build success in 18ms
|
|
15
15
|
[32mCJS[39m [1mdist/index.js [22m[32m8.44 KB[39m
|
|
16
|
-
[32mCJS[39m ⚡️ Build success in
|
|
16
|
+
[32mCJS[39m ⚡️ Build success in 18ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 1028ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m62.00 B[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m62.00 B[39m
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# @bug-on/md3-tailwind
|
|
2
|
+
|
|
3
|
+
## 2.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 039d035: Update docs, readme, optimize lints
|
|
8
|
+
|
|
9
|
+
## 1.0.0
|
|
10
|
+
|
|
11
|
+
### Major Changes
|
|
12
|
+
|
|
13
|
+
- 0845e7b: update READMEs with English instructions for3 packages
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- 4901a01: update READMEs with English instructions.
|
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# @bug-on/md3-tailwind
|
|
2
|
+
|
|
3
|
+
> Tailwind CSS v4 Plugin for Material Design 3 Expressive.
|
|
4
|
+
|
|
5
|
+
This package is a core dependency of the `@bug-on` ecosystem. It acts as a bridge between the MD3 design system and Tailwind CSS by generating standard CSS utility classes conforming strictly to the Google Material Design 3 specifications. This package is fully redesigned to natively support the **Tailwind CSS v4** engine (CSS-first configuration).
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📦 Installation
|
|
10
|
+
|
|
11
|
+
To install this package independently (note: included automatically if you install `@bug-on/md3-react`):
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @bug-on/md3-tailwind
|
|
15
|
+
# or
|
|
16
|
+
pnpm add @bug-on/md3-tailwind
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Required peer dependency:
|
|
20
|
+
```bash
|
|
21
|
+
npm install tailwindcss@^4.0.0
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## 🛠️ Usage (Tailwind v4)
|
|
27
|
+
|
|
28
|
+
Unlike older versions requiring a massive `tailwind.config.ts`, Tailwind v4 allows you to declare plugins directly within the CSS source. Add the following to your global stylesheet (e.g., `globals.css`):
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
/* Import Tailwind core layer */
|
|
32
|
+
@import "tailwindcss";
|
|
33
|
+
|
|
34
|
+
/* 1. Register the @bug-on MD3 plugin */
|
|
35
|
+
@plugin "@bug-on/md3-tailwind";
|
|
36
|
+
|
|
37
|
+
/* 2. Import MD3 Tokens (Required to prevent undefined variable mapping) */
|
|
38
|
+
@import "@bug-on/md3-tokens/index.css";
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Generated Utilities
|
|
42
|
+
By registering this plugin, your Tailwind environment gains access to the following utilities out-of-the-box:
|
|
43
|
+
|
|
44
|
+
- **M3 Colors:** Extensive utility classes mapped to MD3 token system (e.g., `m3-primary`, `m3-secondary`, `m3-surface`).
|
|
45
|
+
*Examples:* `bg-m3-primary`, `text-m3-on-primary`, `border-m3-outline`.
|
|
46
|
+
|
|
47
|
+
- **Elevation (3D Shadows):** Support for 5 levels of true MD3 elevations.
|
|
48
|
+
*Examples:* `shadow-m3-elevation-1`, `shadow-m3-elevation-3`.
|
|
49
|
+
|
|
50
|
+
- **Shape (Radii):** Soft borders matching component standards.
|
|
51
|
+
*Examples:* `rounded-m3-extra-small`, `rounded-m3-large`.
|
|
52
|
+
|
|
53
|
+
- **Typography:** Ready CSS classes mapping to Material Heading, Body, Label variations.
|
|
54
|
+
*Examples:* `text-m3-display-large`, `text-m3-body-medium`, `text-m3-label-small`.
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## 💡 Using alongside MD3 React
|
|
59
|
+
|
|
60
|
+
This package only provides text/class-based UI utilities. To leverage complex and pre-composed components safely along with animations, refer to the installation steps documented in `@bug-on/md3-react`.
|
|
61
|
+
|
|
62
|
+
## ⚖️ License
|
|
63
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bug-on/md3-tailwind",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Tailwind CSS v4 plugin for Material Design 3 Expressive",
|
|
5
5
|
"author": "Bug Ổn",
|
|
6
6
|
"license": "MIT",
|
|
@@ -21,6 +21,9 @@
|
|
|
21
21
|
"main": "./dist/index.js",
|
|
22
22
|
"module": "./dist/index.mjs",
|
|
23
23
|
"types": "./dist/index.d.ts",
|
|
24
|
+
"publishConfig": {
|
|
25
|
+
"access": "public"
|
|
26
|
+
},
|
|
24
27
|
"peerDependencies": {
|
|
25
28
|
"tailwindcss": ">=4.0.0"
|
|
26
29
|
},
|