Is Browser
🏔️ Add support for browser specific variants in Tailwind.css
📥 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.
@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.
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.
<div className="firefox:bg-red-400 chrome:bg-blue-400 bg-yellow-400">
<p>On firefox background should be red, on chrome should be blue and on other browsers it should be yellow</p>
</div>
🔐 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 and describe it clearly.
📥 Pull Requests
When submitting a pull request, please follow these steps:
- Clone this repository
https://github.com/igorkowalczyk/is-browser.git - Create a branch from
mainand give it a meaningful name (e.g.my-awesome-new-feature). - Open a pull request on GitHub and clearly describe the feature or fix you are proposing.
📋 License
This project is licensed under the MIT. See the LICENSE file for details
