I have such queries
screens: {
414: { max: "414px" },
500: { max: "500px" },
630: { max: "630px" },
720: { max: "720px" },
840: { max: "840px" },
1000: { max: "1000px" },
1230: { max: "1230px" },
}
And such element
<div className="absolute right-0 bottom-0 840:-top-[350px] 500:-top-[150px]">
590 €
</div>
And for some reason it doesn't want to override top property
Maybe you can use this..
But tailwind is use min width not max width
You can read the docuentation here https://tailwindcss.com/docs/screens
{
"screens": {
"414": "414px",
// => #media (min-width: 414px) { ... }
"500": "500px",
"630": "630px",
"720": "720px",
"840": "840px",
"1000": "1000px",
"1230": "1230px"
}
}
To use max-width instead of min-width, make sure you using alphabet like xl and descending order, so that they override each other as expected.
screens: {
xl: {'max': '1199px'},
lg: {'max': '1029px'},
md: {'max': '829px'},
sm: {'max': '575px'},
},
Related
Here is my Tailwindcss version 3.0.24.
I want to create a prefix css class like this:
<div class="myTestVariant:text-red-600">hello world</div>
and try to complie css by Tailwindcss like:
#media (max-width: 400px) {
myTestVariant\:text-red-600:active {
color: rgb(220, 38, 38, var(1));
// color may setted by tailwind.config.js
}
}
#media (min-width: 401px) {
myTestVariant\:text-red-600:hover {
color: rgb(220, 38, 38, var(1));
// color may setted by tailwind.config.js
}
}
And I tried to use addVariant to customize my variant. Here is my tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [
plugin(function({ addVariant, e, postcss }) {
addVariant('myTestVariant', ({container, separator }) => {
const supportsRule1 = postcss.atRule({ name: 'media', params: 'screen and (min-width: 401px)' })
const supportsRule2 = postcss.atRule({ name: 'media', params: 'screen and (max-width: 400px)' })
supportsRule1.append(container.nodes)
supportsRule2.append(container.nodes)
container.append(supportsRule1)
container.append(supportsRule2)
supportsRule1.walkRules(rule => {
rule.selector = `.${e(`myTestVariant${separator}`)}${rule.selector.slice(1)}:active`
})
supportsRule2.walkRules(rule => {
rule.selector = `.${e(`myTestVariant${separator}`)}${rule.selector.slice(1)}:hover`
})
})
}),
],
}
Actually, it doesn't work.
But when I only add one media queries, it's work.
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [
plugin(function({ addVariant, e, postcss }) {
addVariant('myTestVariant', ({container, separator }) => {
const supportsRule1 = postcss.atRule({ name: 'media', params: 'screen and (min-width: 401px)' })
supportsRule1.append(container.nodes)
container.append(supportsRule1)
supportsRule1.walkRules(rule => {
rule.selector = `.${e(`myTestVariant${separator}`)}${rule.selector.slice(1)}:active`
})
})
}),
],
}
I think the problem is: I am not familiar with postCss API.
Can someone do me a favor? please.
You can add the custom screen breakpoint in the tailwind.config.js as follows:
module.exports = {
theme: {
screens: {
//like you can add extra-extra-small screen as
'xxs': '400px',
// => #media (min-width: 400px) { ... }
'xs': '401px',
// => #media (min-width: 401px) { ... }
'sm': '640px',
// => #media (min-width: 640px) { ... }
'md': '768px',
// => #media (min-width: 768px) { ... }
'lg': '1024px',
// => #media (min-width: 1024px) { ... }
'xl': '1280px',
// => #media (min-width: 1280px) { ... }
'2xl': '1536px',
// => #media (min-width: 1536px) { ... }
}
}
}
You can find more here https://tailwindcss.com/docs/screens#adding-smaller-breakpoints
I need to change fonsize accourding to screensize with tailwind css. Is there a way to define fontsizes according to screen in tailwind.config and apply them to all text?
Normally i can create custom fontsize and apply in text element.
Define custom fontsize in tailwind.config:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
fontSize: {
xs: "10px",
s: "15px",
sm: "17px",
"2sm": "20px",
m: "22px",
md: "25px",
l: "30px",
xl: "35px",
"2xl": "40px",
"3xl": "45px",
"4xl": "50px",
"5xl": "55px",
"6xl": "60px",
"7xl": "65px",
"8xl": "70px",
},
}
}
using it in text element:
<div className="text-s md:text-m xl:text-xl">Text</div>
in order to avoid applying resposive text size for every text element i need it change fontsize value automatically. Maybe it will look like so in tailwind.config:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
fontSize: {
screen: {
lg: {
xs: "10px",
s: "15px",
sm: "17px",
"2sm": "20px",
m: "50px",
md: "25px",
},
md: {
xs: "5px",
s: "7px",
sm: "10px",
"2sm": "15px",
m: "17px",
md: "20px",
},
},
},
}
};
or do i have to apply responsize fontsize for every text?
I was looking at tailwind doc for container class and saw how it could be customized in tailwind.config.js, likely so:
module.exports = {
theme: {
container: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
},
},
};
But as it was said, only works in x direction, that's padding-left and padding-right.
Is there a way to add vertical padding in the config file like horizontal one?
tailwind CSS container width in 2xl is not desired for me .
how can I change it ?
I want to remove its default width in 2xl .
How can I do it?
Add only necessary breakpoints to tailwind.config.js. Default values you can see in tailwind theme config
module.exports= {
theme: {
screens: {
'sm': '640px', // => #media (min-width: 640px) { ... }
'md': '768px', // => #media (min-width: 768px) { ... }
'lg': '1024px', // => #media (min-width: 1024px) { ... }
'xl': '1280px', // => #media (min-width: 1280px) { ... }
}
}
}
Or if you need some custom solution not directly connected with your "screens" configuration (as suggested by JHeth) you can configure container behavior separately like this:
module.exports= {
theme: {
container: {
screens: {
'sm': '100%',
'md': '100%',
'lg': '1024px',
'xl': '1280px',
'2xl': '1600px',
}
}
}
}
The component has the following binding:
<div
class="columns dropdowns"
:style="{
height: `${dropdownsgridheight}px`,
}"
>
That height is getting calculated based on count of dropdowns. On mobile screens, it shows poorly. So I need to remove this style binding when screen height is less than 812px. How can it be done correctly in Vue.js?
Try this:
<div
class="columns dropdowns"
:style="finalHeight"
></div>
and in your component:
data() {
return {
finalHeight: ''
}
},
created() {
window.addEventListener("resize", this.myEventHandler);
},
destroyed() {
window.removeEventListener("resize", this.myEventHandler);
},
methods: {
myEventHandler() {
if(window.innerHeight > 812) {
this.finalHeight = {
"height": this.dropdownsgridheight + 'px'
}
}
else {
this.finalHeight = '15px'
}
},
},
computed: {
dropdownsgridheight () {
return '50'
}
},
mounted() {
this.myEventHandler()
}
here is an example: https://jsfiddle.net/Nanif/yvw2h5pe/1/