Tailwind.css v3 or newer is required.
npm install @igorkowalczyk/is-browser
yarn add @igorkowalczyk/is-browser
pnpm add @igorkowalczyk/is-browser
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>
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 |
If you have any issues with the page please create new issue here
When submitting a pull request:
- Clone the repo.
- Create a branch off of
main
and give it a meaningful name (e.g.my-awesome-new-feature
). - Open a pull request on GitHub and describe the feature or fix.
This project is licensed under the MIT. See the LICENSE file for details