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',
}
}
}
}
Related
when entering the vale "xs", i get an error saying "(max-width: 575.98px) isn't a valid CSS value."
and when entering any other value i get the following error "This Breackpoint 'sm' isn't supported yet"
is it even possible to apply this idea with SASS ?
Here is my code:
$breakpoints: (
"xs": (max-width: 575.98px),
"sm": ((min-width: 576px) and (max-width: 767.98px)),
"md": ((min-width: 768px) and (max-width: 991.98px)),
"lg": ((min-width: 992px) and (max-width: 1199.98px)),
"xl": ((min-width: 1200px) and (max-width: 1399.98px)),
"xxl": (min-width: 1400px),
);
#mixin breakpoint($user-value) {
#each $size, $value in $breakpoints{
#if $user-value == $size {
#media #{$value} {
#content;
}
}#else {
#error "This Breackpoint '#{$user-value}' isn't supported yet";
}
}
};
body {
#include breakpoint(sm) {
background-color: blue;
}
}
i wanted to minimize the number of code i'm writing with this SASS mixin
so i figured something out, check out this edited code :
$breakpoints: (
"xs": "max-width: 575.98px",
"sm": "(min-width: 576px) and (max-width: 767.98px)",
"md": "(min-width: 768px) and (max-width: 991.98px)",
"lg": "(min-width: 992px) and (max-width: 1199.98px)",
"xl": "(min-width: 1200px) and (max-width: 1399.98px)",
"xxl": "min-width: 1400px",
);
#mixin breakpoint($user-value) {
$value: map-get($breakpoints, $user-value);
#if $value {
#media (#{$value}) {
#content;
}
}#else {
#warn "This Breackpoint '#{$user-value}' isn't supported yet";
}
};
body {
#include breakpoint(xxl) {
background-color: blue;
}
}
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'm trying to dynamically create a variable, but that doesn't seem to be possible in SCSS:
$res-mat-xs: 0;
$res-mat-sm: 600px;
$res-mat-md: 960px;
$res-mat-lg: 1280px;
$res-mat-xl: 1920px;
#mixin media-min($var) {
#media only screen and (min-width: $var) { #content; }
}
#mixin media-max($var) {
#media only screen and (max-width: $var - 1px) { #content; }
}
#mixin media-from-to($var1, $var2) {
#media only screen and (min-width: $var1) and (max-width: $var2 - 1px) { #content; }
}
$media: 'min', 'max', 'from-to';
$variants: 'very-small', 'small', 'default', 'large', 'very-large';
$breakpoints: 'xs', 'sm', 'md', 'lg', 'xl';
#each $breakpoint in $breakpoints {
.typo-style-#{$breakpoint}-#{$variants}-#{$breakpoint} {
#include media-min($res-mat-#{$breakpoint}) {
#include typo-style('default', 'important');
}
}
}
In addition, I am totally overwhelmed with the from-to ($media) and variants.
The class names for the from-to should look like this:
.typo-style-very-small-from-sm-to-md
.typo-style-large-from-sm-to-lg
How can I make these dynamic variables?
I want to make this mixin responsive means it generate the media queries
based on breakpoints.
Here is my SCSS Code :
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
) !default;
#mixin overscroll-behavior-auto() {
-ms-scroll-chaining: chained;
overscroll-behavior: auto;
}
#mixin overscroll-behavior-contain() {
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
#mixin overscroll-behavior-none() {
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
.overscroll-auto {
#include overscroll-behavior-auto();
}
.overscroll-contain {
#include overscroll-behavior-contain();
}
.overscroll-none {
#include overscroll-behavior-none();
}
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-up($breakpoint) {}
}
I include my sass code thank you guys
Codepen
I made some modifications to the syntax of overscroll-behavior(). Mainly that its not overscroll-behavior-auto(), overscroll-behavior-contain() etc. any longer, but:
overscroll-behavior($behavior, $breakpoint);
This was necessary to not write the same code three times, since you can't generate mixins.
$overscrollBehavior: (
"auto": ["chained", "none" ],
"contain": ["none", "contain"],
"none": ["none", "none" ],
)!default;
$breakpoints: (
"xs": 0px,
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1400px,
) !default;
#mixin overscroll-behavior($behavior, $breakpoint) {
$map: $overscrollBehavior;
#for $i from 1 through length($map) {
$label: nth(nth($map, $i), 1);
$values: nth(nth($map, $i), 2);
#if $behavior == $label {
$map: $breakpoints;
#for $i from 1 through length($map) {
$bp: nth(nth($map, $i), 1);
$bpValue: nth(nth($map, $i), 2);
#if $breakpoint == $bp {
#media (min-width: #{$bpValue}) {
-ms-scroll-chaining: unquote(nth($values, 1));
overscroll-behavior: unquote(nth($values, 2));
}
}
}
}
}
}
body {
#include overscroll-behavior(none, xs);
}
#media (min-width: 0px) {
body {
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
}
If that's not quite what your looking for, let me know!
I'm trying to get only the containers grid from bootstrap4 grid system but I have an error on compiling and I really don't understand why :|
so this is the my custom scss file:
$grid-gutter-width: 30px !default;
$enable-grid-classes: true !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
#mixin make-container() {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
margin-right: auto;
margin-left: auto;
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the #content apply to the given breakpoint and wider.
#mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
#if $min {
#media (min-width: $min) {
#content;
}
} #else {
#content;
}
}
// For each breakpoint, define the maximum width of the container in a media query
#mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $max-widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
}
#if $enable-grid-classes {
.container {
#include make-container();
#include make-container-max-widths();
}
}
#if $enable-grid-classes {
.container-fluid {
#include make-container();
}
}
and this is the error:
(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) isn't a valid CSS value.
This should be compiled in some media-queries with given variables but
somewhere the movie is broken and ... so please give me a hint or something :|
I am using https://www.sassmeister.com/ for online compiling.
Your sass is missing a required function breakpoint-min used in the media-breakpoint-up mixin. It's located in the mixins/_breakpoints.scss file around line 26 of the latest Bootstrap source files (Nov/2018)
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
#function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
#return if($min != 0, $min, null);
}
You've likely already found out since 11 months ago but I'll leave it here for anyone else to know to carefully read copied code and check for any required or missing functions, variables or mixins.
Here is the fixed code, I've test and works:
$grid-gutter-width: 30px !default;
$enable-grid-classes: true !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
#function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
#return if($min != 0, $min, null);
}
#mixin make-container() {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
margin-right: auto;
margin-left: auto;
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the #content apply to the given breakpoint and wider.
#mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
#if $min {
#media (min-width: $min) {
#content;
}
} #else {
#content;
}
}
// For each breakpoint, define the maximum width of the container in a media query
#mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $max-widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
}
#if $enable-grid-classes {
.container {
#include make-container();
#include make-container-max-widths();
}
}
#if $enable-grid-classes {
.container-fluid {
#include make-container();
}
}