define a PWA specific screen modifier like md: except pwa:
#10194
-
|
Hello, I am trying to create a custom modifier so that I can conditionally apply styling if the app is being used in standalone mode. The app is built with react and next.js in case that is relevant. Currently, I am using something like this in my @media all and (display-mode: standalone) {
.browserOnly {
display: none;
}
}
@media all and (display-mode: browser) {
.pwaOnly {
display: none;
}
}then in a component... <div className='pwaOnly flex ...' />
<div className='browserOnly flex flex-col ...' />This method works for high level show/hide issues but sometimes I need to adjust padding on an element in the PWA environment only. My goal is something like the following... <button className='mb-2 md:mb-4 pwa:mb-6 ...' />I am fairly new to tailwind, can anyone point me in the right direction for this? Perhaps something in the |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
You'd look at a plugin to add const plugin = require('tailwindcss/plugin')
module.exports = {
// …
plugins: [
plugin(function({ addVariant }) {
addVariant('pwa', '@media all and (display-mode: browser)');
}),
],
}; |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much @wongjn - that makes perfect sense. One note - mostly for anyone else finding this in the future - I made one small change to your plugin function... technically - PWA is const plugin = require('tailwindcss/plugin')
module.exports = {
// …
plugins: [
plugin(function({ addVariant }) {
addVariant('pwa', '@media all and (display-mode: standalone)');
addVariant('browser', '@media all and (display-mode: browser)');
}),
],
};thank you again - and happy new year! |
Beta Was this translation helpful? Give feedback.
-
|
How would you do this for a class on the html element? Any tips? |
Beta Was this translation helpful? Give feedback.
-
|
You could look at a plugin to add const plugin = require('tailwindcss/plugin')
module.exports = {
// …
plugins: [
plugin(function({ addVariant }) {
addVariant('android', '.android &');
// OR
// addVariant('android', '&:is(.android *)');
// OR
// addVariant('android', ':is(.android &)');
addVariant('ios', '.ios &');
// OR
// addVariant('ios', '&:is(.ios *)');
// OR
// addVariant('ios', ':is(.ios &)');
}),
],
};You could add extra qualification by adding |
Beta Was this translation helpful? Give feedback.
-
|
Is there a way for v4? |
Beta Was this translation helpful? Give feedback.
-
|
See https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot. E.g. standalone: |
Beta Was this translation helpful? Give feedback.
You'd look at a plugin to add
pwaas a variant, something like: