Skip to content

πŸ”οΈ Add support for browser specific variants in Tailwind.css

License

Notifications You must be signed in to change notification settings

IgorKowalczyk/is-browser

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Is browser


πŸ“₯ 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:

module.exports = {
 // ...
 plugins: [
  require("@igorkowalczyk/is-browser"),
  // ...other plugins.
 ],
};

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 main and 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