I am working on a Next js + tailwindcss project, where I am trying to make my site responsive.
This is my component: <div className="flex md:hidden">
According to the rules, this div should start with its display set as flex, but as soon as it hits screen size "md" it should hide.
but it keeps itself hidden for some reason, and flex property never got applied.
Similarly, in 2nd case:
`<div className="bg-red-200 xs:bg-blue-500 sm:bg-pink-600 md:bg-green-400 lg:bg-gray-50"`
only background color of "md" screen size is applied for every screen size while testing.
I tried custom values as well but it didn't solve anything, here is my tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
screens: {
'xs': '320px',
'sm': '576px',
'md': '960px',
'lg': '1440px',
'xl': '1280px',
'2xl': '1536px',
},
extend: {},
},
plugins: [],
}
I have gone through docs, many StackOverflow questions & Youtube videos but I don't have any idea why this is happening, please help me find its cause, Thanks.
it happens because it's not max display but minimum so if you use md it will affect lg and md display, i had the same problem, and the solution i found was using max-md
md:hidden
to
max-md:hidden
using max makes it only work up to that display
Related
I cannot make a simple media query for the padding of an element. I work with NextJs but it is not the problem because my custom break points work for everything else but this :
When I have a class like className="p-2 sml:p-4" the p-2 overwrites the other class. I think it has to do with the !important attribute given to p-2 by tailwind.
How to make this simple thing ? What am I missing ?
PS: I repeat, this problem has nothing to do with the media query itself, className="bg-black sml:bg-white" works perfectly fine. The sml: is my custom media query that is triggered at 576px, and I repeat, works very well.
Edit: Minimal code to reproduce
<main className="p-2 sml:p-4">
<div className="w-full h-12 bg-black"/>
</main>
Edit: Config file for tailwind version 3.1.2
/** #type {import('tailwindcss').Config} */
module.exports = {
important: false,
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
plugins: [
require('tw-elements/dist/plugin')
],
darkMode: 'class',
theme: {
screens: {
'sml': '576px',
'mdm': '768px',
'nrm': '992px',
'lrg': '1280px',
'max': '1564px',
},
extend: {
},
},
plugins: [],
}
As you said, the problem is that the !important attribute is added to the p-2 class. You can disable whether or not Tailwind's utilities should be marked with !important in your tailwind.config.js file:
module.exports = {
important: false,
}
Reference: https://tailwindcss.com/docs/configuration
Here is the Tailwind Play code.
I have a configuration as below, mind the custom breakpoint:
const colors = require("tailwindcss/colors");
module.exports = {
darkMode: "media", // or 'media' or 'class'
theme: {
extend: {
screens: {
xs: "320px", // here i have xs
},
colors: {
orange: colors.orange,
},
},
},
variants: {
extend: {},
},
plugins: [],
};
Then I have some elements as below:
<div class="bg-gray-500 xs:hidden sm:hidden md:flex">
<h1>foo</h1>
</div>
I want the div to display on screens above md, otherwise it should be hidden.
The weird thing about the code above is this totally works with built-in breakpoint, sm. For example, if you remove xs:hidden in Tailwind Play. You will see the behavior I want to have.
However, I also want to include xs:hidden. Why does this happen?
Thanks in advance.
Environment
"postcss": "^7.0.39",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
Using with React.
To hide and element until a specific width use hidden to hide the element and another display class with responsive modifier (e.g. md:flex) to show it again.
So basically this should fit your needs:
<div class="bg-gray-500 hidden md:flex">
<h1>foo</h1>
</div>
See https://play.tailwindcss.com/Nb0QOhn9E7 for a working snippet.
Combining a responsive hidden (e.g. xs:hidden) and with another responsive display class (e.g. md:flex) doesnt work as the specifity of both css selectors is the same (both use a single class selector inside a mediaquery) so the md:flex does not overwrite it.
Therefore use non-responsive hidden (single class selector) which is less specific then md:flex (single class selector inside a mediaquery) so it gets overwritten for md upwards.
Theres also a issue in tailwind-css github regarding this behaviour:
https://github.com/tailwindlabs/tailwindcss/issues/841
all,
I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this.
It's not a complicated task, but still doesn't work.
So as in the documentation, I want to create 2 simple background image to use for multiple viewsize.
It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities."
It means, without any further configuration on variants, I should be able to use it for this purpose.
Here is how my tailwind.conf.js looks like (important part is at the end):
const plugin = require('tailwindcss/plugin')
module.exports = {
purge: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./plugins/**/*.vue",
"./static/**/*.vue",
"./store/**/*.vue"
],
theme: {
extend: {
minHeight: {
'120': '30rem',
},
height: {
'15': '3.75rem',
'17': '4.25rem',
'7': '1.75rem',
'75': '18.75rem',
},
width: {
'15': '3.75rem',
open: '11.875rem',
'75': '18.75rem',
},
margin: {
'7': '1.75rem',
'17': '4.25rem',
'27': '6.75rem',
},
padding: {
'7': '1.75rem',
},
borderWidth: {
'5': '5px',
},
fontSize: {
'5xl': '3.375rem',
'xxl': '1.375rem',
},
boxShadow: {
'lg': '0px 0px 10px #00000033',
'xl': '0px 0px 20px #00000080',
},
gap: {
'7': '1.75rem',
},
inset: {
'10': '2.5rem',
'11': '2.75rem',
'17': '4.25rem',
'1/2': '50%',
},
backgroundImage: {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
}
},
variants: {
opacity: ['group-hover'],
backgroundOpacity: ['group-hover'],
},
plugins: []
}
Just to make sure I included the full content.
And this is how the html looks like:
<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>
As I said, nothing special, "npm run dev" finishes witout any error...but if I inspect the element, I cannot see anything related to any background parameter in css. Even the example from documentation doesn't work, which should have to provide a gradient block.
I don't think it's important info, but I use tailwind with laravel.
Can anyone help me with that? I'm desperate, and I'm trying to make it work for days :(I can do workaround using css code in my sass file, but I want to use tailwinds own solution)
Thank you all in advance!
I was having this issue in TailwindCSS 2.2.7 My issue was that my syntax was wrong.
tailwindcss.config.js:
theme: {
backgroundImage: {
'pack-train': "url('../public/images/packTrain.jpg')",
},
App.js
<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>
The ' and " are critical. For some reason eslint was going in and "cleaning" those characters up on save, which was making it not work. Also, the ../ leading the url was also critical.
If you don't want to extend your theme in the tailwindcss.config.js and want to add the background image directly to your div you can try:
<div className="bg-[url('../public/assets/images/banner.svg')]">
This is the simplest way to get background images working.
Reference: Check under Arbitrary values heading
The background image functionality of tailwindcss has been released in version 1.7.0.
I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss. After upgrading to the latest version, your code has worked fine.
editing your tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
add name and the URL for your image and use it.
example bg-hero-pattern
u need to add (theme) props to your config
like this:
backgroundImage: (theme) => {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
or url with "../" like this
backgroundImage: (theme) => {
'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
},
Hope it works :)
In ^3.1.8 version image path was not working. Then I just put "../" instead of "./"
and it worked. Example:
extend: {
backgroundImage: {
'hero-pattern': "url('../src/assets/images/bg.png')",
}
}
I had to specify a height for my image to be displayed
<div className="h-screen bg-hero"/>
For static image[set is background image] works for me.
First import the image from the static image folder.
import m5 from '../Assets/a2.avif'
Then use it like this.
<div style={{ backgroundImage: `url(${m5})` }}>
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend{},backgroundImage: {"hero-lg": "url('/src/assets/images/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},},
class="hero-content bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse"
I've noticed that :hover in Tailwindcss uses the defaults hover selector which causes 'stuck' hover states on mobile. Is there a way to modify the :hover function to do a #media(hover:hover) instead?
update: There is now a better way. See this answer by Javier Gonzalez
original:
By far the simplest way is to add your own #media rule to the #responsive-class of rules in tailwind. How you can do that is described in the official tailwind documentation under the topic of custom media queries.
Simply add this to your config:
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'hover-hover': {'raw': '(hover: hover)'},
}
}
}
}
This translates to #media (hover: hover) { ... } in css. And voila, you could use hover-hover:text-red to display red text only for devices that have hover ability.
To make your own, leave 'raw' as is and change the other two attributes to whatever media query you want. The first attribute hover-hover is what you use in tailwind. The second (hover: hover) is what your actual css #media query looks like. E.g.: hover: none or pointer: coarse.
Now, go ahead and use hover-hover:hover:text-red to modify your hover states.
Might be a bit late but the Tailwind team is already addressing this issue in Tailwind version 3 using a feature flag: https://github.com/tailwindlabs/tailwindcss/pull/8394
Once a new version is published with these changes Starting on tailwindcss v3.1.0, you could include a feature flag in your configuration to look like:
// tailwind.config.js
module.exports = {
future: {
hoverOnlyWhenSupported: true,
},
// ...
}
Yes, just generate the hover variant using a plugin that, besides adding the :hover pseudo-selector, also wraps all of the rules inside an #media(hover:hover) rule:
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
const hoverPlugin = plugin(function({ addVariant, e, postcss }) {
addVariant('hover', ({ container, separator }) => {
const hoverRule = postcss.atRule({ name: 'media', params: '(hover: hover)' });
hoverRule.append(container.nodes);
container.append(hoverRule);
hoverRule.walkRules(rule => {
rule.selector = `.${e(`hover${separator}${rule.selector.slice(1)}`)}:hover`
});
});
});
module.exports = {
plugins: [ hoverPlugin ],
}
The responsive attributes like sm: md: lg: will do those media query job for you. Refer example in the docs. If you dont want to use hover state in mobile device. specify with eg:- sm:hover:no-underline
You can easily create your own hover like below:
// styles.css
#variants hover {
.banana {
color: yellow;
}
}
Then use it like class='hover:banana'
Using arbitrary variants
<button
type="button"
class="
[#media(hover:hover)]:opacity-0
[#media(hover:hover){&:hover}]:opacity-100
">
<!-- ... -->
</button>
I am using JSS in my React project and I encountered strange issue, which I find hard to solve. Basically I write media query and it is triggered when I shrink my desktop browser. Though while using device toolbar, it does not seem to work. I am trying to hide span when device "width" is smaller than 600px. Any help will be appreciated.
Here is the code:
const menuStyles = theme => ({
flex: {
display: 'flex',
alignItems: 'center',
},
wrapper: {
composes: '$flex',
cursor: 'pointer',
},
span: {
fontFamily: theme.fontMontserrat,
marginRight: '30px',
},
'#media screen and (max-width: 600px)': {
span: {
display: 'none',
},
},
});
Ok, fixed the problem. It was in a completely different part of application.
I forget to add this line in my code:
<meta name=viewport content="width=device-width,initial-scale=1">
You can always check the generated CSS, if it is what you expect it to be then you have wrong assumptions about CSS/html. At the end, jss does nothing else than generating regular CSS.