@kittler/tailwind-breakpoint-indicator 1.0.2 → 1.0.3

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.
Files changed (3) hide show
  1. package/README.md +49 -39
  2. package/dist/styles.d.ts +2 -0
  3. package/package.json +5 -2
package/README.md CHANGED
@@ -9,14 +9,14 @@ Visual breakpoint indicator tool for Tailwind CSS development. Shows the current
9
9
  - 🎨 Visual indicator with color-coded breakpoints
10
10
  - 🔄 Automatically detects development mode
11
11
  - ⏱️ Hide button with 20-second auto-show timer
12
- - 🎯 Works with any build tool (Vite, Webpack, Rollup, etc.)
12
+ - 🎯 Works with any build tool (Vite, Vue, Webpack, Rollup, etc.)
13
13
  - 📦 Zero dependencies
14
14
  - 🎛️ Configurable options
15
15
 
16
16
  ## Installation
17
17
 
18
18
  ```bash
19
- npm install tailwind-breakpoint-indicator
19
+ npm install @kittler/tailwind-breakpoint-indicator
20
20
  ```
21
21
 
22
22
  ## Usage
@@ -39,8 +39,8 @@ Import the package in your entry file; in development mode the helper will initi
39
39
 
40
40
  ```javascript
41
41
  // In your entry file (e.g. src/main.ts or src/main.js)
42
- import 'tailwind-breakpoint-indicator/styles' // Import CSS
43
- import 'tailwind-breakpoint-indicator' // Import JS (auto-initializes)
42
+ import '@kittler/tailwind-breakpoint-indicator/styles' // Import CSS
43
+ import '@kittler/tailwind-breakpoint-indicator' // Import JS (auto-initializes)
44
44
  ```
45
45
 
46
46
  ### Manual Initialization
@@ -48,8 +48,8 @@ import 'tailwind-breakpoint-indicator' // Import JS (auto-initializes)
48
48
  For more control, you can manually initialize the helper in the same entry file:
49
49
 
50
50
  ```javascript
51
- import 'tailwind-breakpoint-indicator/styles' // Import CSS
52
- import { initBreakpointHelper } from 'tailwind-breakpoint-indicator'
51
+ import '@kittler/tailwind-breakpoint-indicator/styles' // Import CSS
52
+ import { initBreakpointHelper } from '@kittler/tailwind-breakpoint-indicator'
53
53
 
54
54
  // With default options (auto-detects dev mode)
55
55
  initBreakpointHelper()
@@ -118,8 +118,8 @@ If you prefer to use your own HTML element (e.g., from a template), you can:
118
118
 
119
119
  ```javascript
120
120
  // In your JS - the helper will use the existing element
121
- import 'tailwind-breakpoint-indicator/styles'
122
- import { initBreakpointHelper } from 'tailwind-breakpoint-indicator'
121
+ import '@kittler/tailwind-breakpoint-indicator/styles'
122
+ import { initBreakpointHelper } from '@kittler/tailwind-breakpoint-indicator'
123
123
 
124
124
  initBreakpointHelper()
125
125
  ```
@@ -134,55 +134,55 @@ initBreakpointHelper({
134
134
 
135
135
  ## Framework Integration
136
136
 
137
- ### Vite
137
+ ### ✅ Tested Frameworks
138
138
 
139
- ```javascript
140
- // vite.config.js
141
- import { defineConfig } from 'vite'
139
+ The following frameworks have been tested and verified to work:
142
140
 
143
- export default defineConfig({
144
- // ... your config
145
- })
146
- ```
141
+ #### Vanilla HTML
147
142
 
148
- ```javascript
149
- // main.js
150
- import 'tailwind-breakpoint-indicator/styles'
151
- import 'tailwind-breakpoint-indicator'
143
+ ```html
144
+ <!DOCTYPE html>
145
+ <html>
146
+ <head>
147
+ <link rel="stylesheet" href="path/to/styles.css">
148
+ </head>
149
+ <body>
150
+ <script type="module">
151
+ import '@kittler/tailwind-breakpoint-indicator/styles'
152
+ import '@kittler/tailwind-breakpoint-indicator'
153
+ </script>
154
+ </body>
155
+ </html>
152
156
  ```
153
157
 
154
- ### React
158
+ #### Vanilla HTML + Vite
155
159
 
156
160
  ```javascript
157
- // main.jsx or App.jsx
158
- import 'tailwind-breakpoint-indicator/styles'
159
- import { initBreakpointHelper } from 'tailwind-breakpoint-indicator'
160
- import { useEffect } from 'react'
161
-
162
- function App() {
163
- useEffect(() => {
164
- initBreakpointHelper()
165
- }, [])
166
-
167
- return <div>Your app</div>
168
- }
161
+ // main.js (entry file)
162
+ import '@kittler/tailwind-breakpoint-indicator/styles'
163
+ import '@kittler/tailwind-breakpoint-indicator'
164
+ ```
165
+
166
+ ```html
167
+ <!-- index.html -->
168
+ <script src="/src/main.js" type="module"></script>
169
169
  ```
170
170
 
171
- ### Vue
171
+ #### Vue
172
172
 
173
173
  ```javascript
174
174
  // main.js
175
- import 'tailwind-breakpoint-indicator/styles'
176
- import 'tailwind-breakpoint-indicator'
175
+ import '@kittler/tailwind-breakpoint-indicator/styles'
176
+ import '@kittler/tailwind-breakpoint-indicator'
177
177
  ```
178
178
 
179
- Or in a component:
179
+ Or in a Vue component:
180
180
 
181
181
  ```vue
182
182
  <script setup>
183
183
  import { onMounted } from 'vue'
184
- import { initBreakpointHelper } from 'tailwind-breakpoint-indicator'
185
- import 'tailwind-breakpoint-indicator/styles'
184
+ import { initBreakpointHelper } from '@kittler/tailwind-breakpoint-indicator'
185
+ import '@kittler/tailwind-breakpoint-indicator/styles'
186
186
 
187
187
  onMounted(() => {
188
188
  initBreakpointHelper()
@@ -190,6 +190,16 @@ onMounted(() => {
190
190
  </script>
191
191
  ```
192
192
 
193
+ ### ⚠️ Other Frameworks
194
+
195
+ The following frameworks should work but have not been tested yet. If you test them, please report any issues:
196
+
197
+ - **React** - Should work with `useEffect` hook
198
+ - **Svelte** - Should work with `onMount` lifecycle
199
+ - **Angular** - Should work in component lifecycle hooks
200
+ - **Webpack** - Should work with standard imports
201
+ - **Rollup** - Should work with standard imports
202
+
193
203
  ## Building from Source
194
204
 
195
205
  If you want to build the package from source:
package/dist/styles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const styles: string
2
+ export default styles
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kittler/tailwind-breakpoint-indicator",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "Visual breakpoint indicator for Tailwind CSS development",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -12,7 +12,10 @@
12
12
  "import": "./dist/index.esm.js",
13
13
  "require": "./dist/index.js"
14
14
  },
15
- "./styles": "./dist/styles.css"
15
+ "./styles": {
16
+ "types": "./dist/styles.d.ts",
17
+ "default": "./dist/styles.css"
18
+ }
16
19
  },
17
20
  "files": [
18
21
  "dist",