1.0.2 • Published 2 years ago
@codewithhridoy/tailwind-browser v1.0.2
TailwindCSS :browser
Tailwind browser helps you to develop efficiently for cross-browser platform
📥 Installation
Tailwind.css v3 or newer is required.
#If you use npm
npm install --save-dev @codewithhridoy/tailwind-browser
#If you use yarn
yarn add -D @codewithhridoy/tailwind-browser
#If you use pnpm (preferred)
pnpm add -D @codewithhridoy/tailwind-browser📦 Usage
Add to plugins in your tailwind.config.js:
module.exports = {
// ...
plugins: [
require("@codewithhridoy/tailwind-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 have any issues with the page please create new issue here
📥 Pull Requests
When submitting a pull request:
- Clone the repo.
- Create a branch off of
masterand give it a meaningful name (e.g.my-awesome-new-feature). - Open a pull request on GitHub and describe the feature or fix.
📋 License
This project is licensed under the MIT. See the LICENSE file for details