I want to extend 540px and 1920px screen size in tailwind but 'xxs' didn't work.
**theme: {
extend:{
screens:{
'xxs':'540px',
'xxl':'1920px',
},
}
}**
If you want to add an additional small breakpoint, you can’t use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system. Use this code instead:
theme: {
screens: {
'xxs':'540px',
...defaultTheme.screens,
},
},
Here is the related link:
Adding smaller breakpoints
Related
Currently I'm trying to add an animation to a page of a few shooting stars flying across the screen. I want the star to appear and end at certain percentages of the available screen to make it responsive and visible on any device. However when I try to do this, my values seem to default to 0px rather than the percentage that I am passing into my tailwind.config.js from my React Component. The values work if I pass in pixels, but as I mentioned, I would rather do percentages so that it can work well on any screen.
Currently, I am passing in my desired percentage values using this method with an alteration to make it React compatible like this:
style={{"--startingX":props.startingX}}
I am currently using NextJS and TailwindCSS to attempt to make this.
Here are (what I believe are) the relevant files:
/components/shootingStar.js
export default function ShootingStar(props) {
return (
<div>
<div style={{"--percentage":props.startingX}} className="absolute animate-star">
<div className="transform absolute top-2/4 ..."></div>
<div className="absolute top-full left-2/4 ..."></div>
</div>
</div>
)
}
animation: 'star' is the animation in question, inside of keyframes I created my custom animation.
tailwind.config.js:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
'Quicksand': ['Quicksand', ...defaultTheme.fontFamily.sans],
},
'animation': {
...
star : "star 3s linear infinite"
},
'keyframes': {
...
star: {
'0%' : {
transform : 'translateX(var(--percentage)) translateY(0px) rotate(235deg)',
'opacity': '50%'
},
'75%' : {
'opacity' : '100%'
},
'100%' : {
transform : 'translateX(350px) translateY(500px) rotate(235deg)',
'opacity' : '0%'
}
}
}
},
},
plugins: [],
}
index.js
return (
//This div is the parent div to the whole page which is why I included it.
<div className="bg-gradient-to-tl from-blue-900 to-black overflow-x-auto h-screen w-screen ">
<ShootingStar startingX={'25%'} startingY={'25%'} endingX={'500px'} endingY={'500px'}</ShootingStar>
{The remaining shooting stars would eventually get created here}
</div>
...
)
When the animation is at 0%, I would like my star component to start at a specified X% of my screen (for example if I pass in 25% to my percentage var, I would like it to start 1/4 of the way into the screen from the left hand side of the window.)
If this is possible, I plan to expand this for the starting Y value and the ending values of X & Y as well which is why I have those props passed in.
If I pass in 25% to my percentage var, my starting value is at the top left of the screen (or 0). and allows the animation to run. If I try to hardcode percentage values into my Keyframe animation, the animation does not occur since all of the values are technically defaulting to 0.
I am expecting the animation to start at 1/4 of the way in from the left hand side.
I feel as if I'm doing something slightly wrong that won't allow me to make this animation possible but I am not entirely sure what that would be.
I figured out why my animation was stuck in the top left after further research. Keyframe animations take the height and width specifications of the component that is being animated, and do not inherit their parent's height or width (as I initially thought they did). Because I had not specified a height or width for my component it could not move across the screen as I originally wanted it to.
For anyone who might run into this as I did make sure you are setting the height and width of your components to allow your animation to go through your component. Otherwise, if you want it to run through your entire viewport, use vh rather than % when setting your animation values.
Regardless, I decided to opt for viewport since it better fits my use case.
I want a larger value for padding right than tailwind currently offers (pr-96 which is around 24rem) I’d like something around 40rem for my project.
Following documentation, I tried, but I cannot run npm run build without an error.
// tailwind.config.js
module.exports = {
theme: {
padding: {
xxl: 'padding-right: 40rem',
}
}
}
’’’
Error:the xx class does not exist, but xx does.
If I remove the code I added above, error goes away.
You don't need to specify the property padding-right in your creation of the xxl utility only the value and unit, this line:
xxl: 'padding-right: 40rem'
should be:
xxl: '40rem'
This will give you an xxl size of 40rem for all padding classes p-xxl, pr-xxl, pl-xxl, etc...
However, you should only use padding as a direct child of theme when you want to replace all padding utilities. If you wanted to just add this size to the existing padding sizes you should use extend inside theme like this:
// tailwind.config.js
module.exports = {
theme: {
extend: {
padding: {
xxl: '40rem'
}
}
}
}
So I want to know how to set a Max Height Media Breakpoint in TailWindCSS Config.
IPad Pro's are recognised as Laptops because of their width.
That said, they are far too tall for Laptop CSS, making my site look horrible.
Any help welcome,
Thanks,
Justin.
I spit through the Tailwind docs, it seems like there are none for Max Height media queries.
But you can create your own Custom media queries. I don't known the height of an iPad Pro. But I made an example based on the docs. (Also untested example)
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'iPad': {'raw': '(max-height: 1234px)'},
// => #media (max-height: 1234px) { ... }
}
}
}
}
Edit:
I'm not sure what the output of this will be, my guess iPad:text-xl or something.
You can just apply it directly to the jsx element inline. for example
<div className='max-h-[1234px]'></div>
I need to hide legends of highcharts ng in mobile view alone so that it occupies the full width of the screen. I tried setting the class .highcharts-legend to display none using bootstrap class hidden-xs but even though it is getting hidden the chart is not occupying the full width of the screen even though the highcharts ng directive does. I have also given the id #chart1 as follows
#chart1{
height:100% !important;
width:100% !important;
}
so that the chart always occupies the full width of the screen
This will work to hide legend if screen less than 900px:
chart.legend.update({ enabled: (chart.containerWidth > 900) });
Likewise:
legend: {
enabled : ($('#myContainer').width() > 900)
}
You can use responsive property and hide the legend in some condition:
responsive: {
rules: [{
chartOptions: {
legend: {
enabled: false
}
},
condition: {
maxWidth: 500
}
}]
}
Live demo: http://jsfiddle.net/BlackLabel/pds7aqr4/
API Reference: https://api.highcharts.com/highstock/responsive
I am using Twitter Bootstrap. I have a btn-group. I want the btn-group and btn-group-justified classes added for screens at or above 768px, and the btn-group-vertical class applied for screens at or below 767px. How can I do this?
This is a jQuery implementation. If you can't change the IDs to classes on your buttons, this is probably the best way I can think of to do it.
$(document).ready(function(){
var changeWidth = function(){
if ( $(window).width() < 768 ){
$('.btn-group-justified').removeClass('btn-group-justified').addClass('btn-group-vertical');
} else {
$('.btn-group-vertical').removeClass('btn-group-vertical').addClass('btn-group-justified');
}
};
$(window).resize(changeWidth);
});
You can use bootstrap's utility class. (.visible-xs)
http://getbootstrap.com/css/#responsive-utilities
You basically create contents that will only be visible if current screen is below 768px. And then add the class you want.