@alirezahosseini/sibtorsh-player 0.3.9 → 0.3.10

package/README.md

@@ -74,17 +74,15 @@ A modern, responsive, and TypeScript-first video player for React with HLS suppo
 
 ---
 
-## Installation
+# Installation
 
-Using npm:
+Install the package:
 
 ```bash
 npm install @alirezahosseini/sibtorsh-player
 ```
 
-### Peer Dependencies
-
-Your project must include React and React DOM:
+Install the required peer dependencies if they are not already available:
 
 ```bash
 npm install react react-dom
@@ -92,6 +90,127 @@ npm install react react-dom
 
 ---
 
+## Tailwind CSS 4
+
+If your project uses **Tailwind CSS v4**, import the default stylesheet:
+
+```tsx
+import VideoPlayer from "@alirezahosseini/sibtorsh-player";
+import "@alirezahosseini/sibtorsh-player/dist/sibtorsh-player.css";
+```
+
+Example:
+
+```tsx
+import VideoPlayer from "@alirezahosseini/sibtorsh-player";
+import "@alirezahosseini/sibtorsh-player/dist/sibtorsh-player.css";
+
+export default function App() {
+    return (
+        <div style={{ width: "100%", aspectRatio: "16 / 9" }}>
+            <VideoPlayer
+                src="https://example.com/master.m3u8"
+                poster="https://example.com/poster.jpg"
+                title="Sample Video"
+            />
+        </div>
+    );
+}
+```
+
+---
+
+## Tailwind CSS 3
+
+If your project uses **Tailwind CSS v3**, use the compatibility stylesheet instead:
+
+```tsx
+import VideoPlayer from "@alirezahosseini/sibtorsh-player";
+import "@alirezahosseini/sibtorsh-player/dist/sibtorsh-player.v3.css";
+```
+
+Example:
+
+```tsx
+import VideoPlayer from "@alirezahosseini/sibtorsh-player";
+import "@alirezahosseini/sibtorsh-player/dist/sibtorsh-player.v3.css";
+
+export default function App() {
+    return (
+        <div style={{ width: "100%", aspectRatio: "16 / 9" }}>
+            <VideoPlayer
+                src="https://example.com/master.m3u8"
+                poster="https://example.com/poster.jpg"
+                title="Sample Video"
+            />
+        </div>
+    );
+}
+```
+
+> **Note**
+>
+> The Tailwind CSS 3 build includes compatibility fixes for Tailwind v3 and does not include Tailwind v4 specific styles.
+
+---
+
+## Projects Without Tailwind CSS
+
+Tailwind CSS is **not required**.
+
+Simply import the default stylesheet:
+
+```tsx
+import VideoPlayer from "@alirezahosseini/sibtorsh-player";
+import "@alirezahosseini/sibtorsh-player/dist/sibtorsh-player.css";
+```
+
+---
+
+## Check Your Tailwind Version
+
+If you're not sure which Tailwind version your project uses:
+
+```bash
+npm ls tailwindcss
+```
+
+Example output:
+
+Tailwind CSS 3
+
+```text
+tailwindcss@3.x.x
+```
+
+Tailwind CSS 4
+
+```text
+tailwindcss@4.x.x
+```
+
+---
+
+## Important
+
+Import **only one** stylesheet.
+
+✅ Tailwind CSS 4
+
+```tsx
+import "@alirezahosseini/sibtorsh-player/dist/sibtorsh-player.css";
+```
+
+✅ Tailwind CSS 3
+
+```tsx
+import "@alirezahosseini/sibtorsh-player/dist/sibtorsh-player.v3.css";
+```
+
+❌ Never import both files together.
+
+---
+
 ## Quick Start
 
 Import the player component and its stylesheet:

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.9",
+  "version": "0.3.10",
   "type": "module",
   "types": "dist/index.d.ts",
   "main": "dist/sibtorsh-player.umd.js",