https://github.com/igorkowalczyk/is-browser
🏔️ Add support for browser specific variants in Tailwind.css
https://github.com/igorkowalczyk/is-browser
chrome firefox nodejs safari tailwindcss tailwindcss-plugin
Last synced: about 1 year ago
JSON representation
🏔️ Add support for browser specific variants in Tailwind.css
- Host: GitHub
- URL: https://github.com/igorkowalczyk/is-browser
- Owner: IgorKowalczyk
- License: mit
- Created: 2022-06-13T21:25:58.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-12T11:01:27.000Z (about 1 year ago)
- Last Synced: 2025-04-13T17:18:03.579Z (about 1 year ago)
- Topics: chrome, firefox, nodejs, safari, tailwindcss, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://npm.im/@igorkowalczyk/is-browser
- Size: 1.32 MB
- Stars: 26
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: license.md
- Codeowners: .github/codeowners
Awesome Lists containing this project
README
---
## 📥 Installation
Install the package using your package manager of choice. Tailwind CSS v3 and v4 are supported.
```
npm install @igorkowalczyk/is-browser
yarn add @igorkowalczyk/is-browser
pnpm add @igorkowalczyk/is-browser
```
## 📦 Usage
### Tailwind CSS v4
Import the plugin in your CSS file.
```css
@import "tailwindcss";
@plugin "@igorkowalczyk/is-browser";
```
That's it! You can now use the plugin in your components.
### Tailwind CSS v3
Add to `plugins` in your `tailwind.config.js`.
```js
module.exports = {
// ...
plugins: [
require("@igorkowalczyk/is-browser"),
// ...other plugins.
],
};
```
## 🎨 Examples
Style your components using `{browser_name}:{class}`, e.g. `firefox:bg-red-100`, `chrome:bg-blue-100`, etc.
```jsx
On firefox background should be red, on chrome should be blue and on other browsers it should be yellow
```
## 🔐 Supported browsers
| Browser | Variant | CSS Property | Example |
| ------- | ---------- | ------------------------------------ | ----------------------- |
| Firefox | `firefox:` | `-moz-appearance: none` | `firefox:bg-yellow-400` |
| Chrome | `chrome:` | `background: -webkit-named-image(i)` | `chrome:bg-red-400` |
| Safari | `safari:` | `-webkit-app-region: inherit` | `safari:bg-blue-400` |
## ⁉️ Issues
If you come across any errors or have suggestions for improvements, please create a [new issue here](https://github.com/igorkowalczyk/is-browser/issues) and describe it clearly.
## 📥 Pull Requests
When submitting a pull request, please follow these steps:
- Clone [this repository](https://github.com/igorkowalczyk/is-browser) `https://github.com/igorkowalczyk/is-browser.git`
- Create a branch from `main` 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 clearly describe the feature or fix you are proposing.
## 📋 License
This project is licensed under the MIT. See the [LICENSE](https://github.com/igorkowalczyk/is-browser/blob/main/license.md) file for details