@igorkowalczyk/is-browser 1.0.1

package/index.js

@@ -0,0 +1,5 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addVariant }) {
+ addVariant("firefox", "@-moz-document url-prefix()");
+});

package/license.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Igor Kowalczyk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,35 @@
+{
+ "name": "@igorkowalczyk/is-browser",
+ "version": "1.0.1",
+ "description": "🏔️ Add support for browser specific variants in Tailwind.css",
+ "main": "index.js",
+ "scripts": {
+  "format": "prettier --write . --ignore-unknown",
+  "format:check": "prettier --check .",
+  "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+  "type": "git",
+  "url": "git+https://github.com/IgorKowalczyk/is-browser.git"
+ },
+ "keywords": [
+  "tailwindcss",
+  "react",
+  "firefox",
+  "chrome"
+ ],
+ "author": "Igor Kowalczyk",
+ "license": "MIT",
+ "bugs": {
+  "url": "https://github.com/IgorKowalczyk/is-browser/issues"
+ },
+ "homepage": "https://github.com/IgorKowalczyk/is-browser#readme",
+ "devDependencies": {
+  "prettier": "^2.6.2",
+  "tailwindcss": "^3.1.2",
+  "prettier-plugin-tailwindcss": "^0.1.11"
+ },
+ "files": [
+  "index.js"
+ ]
+}

package/readme.md

@@ -0,0 +1,61 @@
+<img width="170" height="170" align="left" style="float: left; margin: 0 10px 0 0; border-radius: 50%;" alt="Tailwindcss" src="https://raw.githubusercontent.com/IgorKowalczyk/is-browser/main/src/images/logo.svg">
+
+# Tailwind is `:browser`
+
+🏔️ Add support for browser specific variants in Tailwind.css
+<br><br><br>
+
+---
+
+## 📥 Installation
+
+**Tailwind.css v3 or newer is required**.
+
+```
+npm install @igorkowalczyk/is-browser
+yarn add @igorkowalczyk/is-browser
+pnpm add @igorkowalczyk/is-browser
+```
+
+## 📦 Usage
+
+Add to `plugins` in your **tailwind.config.js**:
+
+```js
+module.exports = {
+ // ...
+ plugins: [
+  require("@igorkowalczyk/is-browser"),
+  // ...other plugins.
+ ],
+};
+```
+
+Style your components using `{browser_name}:{class}`, e.g. `firefox:bg-red-100`, `firefox:bg-blue-100`, etc.
+
+```jsx
+<div className="firefox:bg-red-100 bg-blue-100">
+ <p>On firefox background should be red, on other browsers it should be blue</p>
+</div>
+```
+
+## 🔐 Supported browsers
+| Browser | Browser Version(s) | Variant | CSS Property |
+| --- | --- | --- | --- |
+| Firefox | `1.5 – 61` | `firefox:` | `@-moz-document url-prefix()` |
+
+## ⁉️ Issues
+
+If you have any issues with the page please create [new issue here](https://github.com/igorkowalczyk/is-browser/issues)
+
+## 📥 Pull Requests
+
+When submitting a pull request:
+
+- Clone the repo.
+- Create a branch off of master and give it a meaningful name (e.g. my-awesome-new-feature).
+- Open a [pull request](https://github.com/igorkowalczyk/is-browser/pulls) on [GitHub](https://github.com) and describe the feature or fix.
+
+## 📋 License
+
+This project is licensed under the MIT. See the [LICENSE](https://github.com/igorkowalczyk/is-browser/blob/master/license.md) file for details