I have a problem with my project, I don't understand why when trying to pass 'width' from props it won't work
https://i.stack.imgur.com/SoXzx.png
code looks like this
<div className={'border-b-[1px] w-[50%] lg:' + props.width + ' text-thirdMainColor ' + props.margin }></div>
I will add that I also tried to add breakpoints in 'tailwind.config.js', but this did not change anything.
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
The following form works normally.
https://i.stack.imgur.com/siSaq.png
Related
I use tailwind in nextjs project, and when I restart the server (I mean start the server again with npm run dev) some tailwind code not working when I write class property in "inspect Element" it works but not tailwind code.
not works: w-1/2 (width: 25%), lg:w-0 (media screen and(max-width: 1024px) {code})
my tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
screens: {
sm: { max: "640px" },
md: { max: "768px" },
lg: { max: "1024px" },
xl: { max: "1280px" },
"2xl": { max: "1536px" },
}
},
plugins: [],
};
my global.css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
#import "./reset.css";
You need to pass the classes fully w-1/2 instead of partially like 1/2. As tailwind doesn't support dynamic classes.
Try the following code.
function Component({ width}) {
return (
<div
className={`${width}`}
>
Hello there
</div>
);
}
And use it as
<Component
width={"w-1/2"}
/>
Edit: Using Safelisting classes
As a last resort, Tailwind offers Safelisting classes
Safelisting is a last-resort, and should only be used in situations where it’s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature.
In your example,you want to have different width. You can use regular expressions to include all the widths you want using pattern
In tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
safelist: [
{
pattern: /w-(1/2|2/2|1/6|2/6)/, // You can define all the width you desire
},
],
// ...
}
you have to create an extend object with your personalized code inside like this:
theme: {
extend: {
screens: {
'clg': '1090px',
'cxl': '1159px',
'c2xl': '1213px',
'c3x1': '1373px',
'c4x1': '1480px',
'c5x1': '1579px',
'c6x1': '1679px',
'c7x1': '1740px',
'c8x1': '1820px',
},
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
What would be the best (I'd be interested even in 2nd best) approach to make a component define some sx style that applies only starting from particular breakpoint?
<MyComponent
transition="1s"
sx={{
...
transform: 'translateY(-100%)',
...
}}
>
{componentContent}
</MyComponent>
In the example above everything inside sx should be applied only to lg+ breakpoints (targeting Desktop) and nothing should be applied to lower breakpoints (mobile/tablet).
As far as I understand there is a way around my issue with using useBreakpointValue to manually check whether the breakpoint is the one where i apply the style or not, but I'm wondering if there is a better approach to achieve the result
Here are some options:
https://codesandbox.io/s/sx-breakpoint-mdsjhz?file=/src/index.js
<Box
width="100px"
height="100px"
sx={{
// one-liner
// https://chakra-ui.com/docs/styled-system/responsive-styles
bg: { base: "pink.200", md: "green.200" },
// equivalent array syntax
// bg: ["pink.200", null, "green.200"],
// alternatively, multiple properties in a single condition
// https://chakra-ui.com/docs/styled-system/the-sx-prop#custom-media-queries
"#media screen and (min-width: 768px)": {
borderWidth: 16,
borderColor: "purple.500"
}
}}
/>
https://chakra-ui.com/docs/styled-system/responsive-styles
https://chakra-ui.com/docs/styled-system/the-sx-prop#custom-media-queries
Here is my tailwind.config.js file , I have no problems in breakpoints but my teammate has problems in breakpoints like 767px and the browser will apply the styles from both "sm" and "md" devices. The resolution of the screen with problems is full HD and when it is changed to 1366*768 the issue will be gone. and I'm not sure how to solve this problem. my question is about the importance of writing the tailwind styling codes in a specific order while using fixed range breakpoints.
theme: {
screens: {
xsm: { min: "0px", max: "639px" },
sm: { min: "640px", max: "767px" },
md: { min: "768px", max: "1023px" },
lg: { min: "1024px", max: "1279px" },
xl: { min: "1280px", max: "1535px" },
xxl: { min: "1536px"},
},
I'm using scss files and I want to change the breakpoints in the css side in vuetify v2.
I Can't find any reference in vuetify upgrade guide for this.
In version 1.5 I did style-x.styl:
$grid-breakpoints := {
xs: 0
sm: 476px
md: 668px
lg: 1000px
xl: 1300px
}
#import '~vuetify/src/styles/styles.sass';
$material-light.background = #f5f5f5;
#import '~vuetify/src/stylus/main';
And then I import the file:
import '../style-x.styl';
...
Vue.use(Vuetify);
...
So look at the documentation: https://vuetifyjs.com/en/customization/sass-variables/#vue-cli-install, it says:
Once installed, create a folder called sass, scss or styles in your
src directory with a file named variables.scss or variables.sass
That is, after we have created the project using the Vue CLI, we manually:
Сreate the new sass folder in our src folder.
Next, in our new sass folder, create the new variables.scss file.
Next, in our new variables.scss file, write these lines, these
are the standard settings for bootstrap-4:
*
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
Now restart npm run serve and you are ready. You can change the values in the $grid-breakpoints variable to your own.
For version 2.0 you have to change the SASS variables by creating a custom SASS file which you import into your vue.config.js file: https://vuetifyjs.com/en/customization/sass-variables.
For the SASS variables to be available globally, you can to first
// src/sass/main.scss
#import '~vuetify/src/styles/styles.sass';
// You need to map-merge your new SASS variables
$grid-breakpoints: map-merge($grid-breakpoints, (
xs: 0,
sm: 476px,
md: 668px,
lg: 1000px,
xl: 1300px
))
And then have your config file import the variable globally:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "~#/sass/main.scss"`,
},
},
},
}
You also have to specify your custom breakpoints when you specify Vuetify options:
https://vuetifyjs.com/en/customization/breakpoints
//import this into your main.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
breakpoint: {
thresholds: {
xs: 0,
sm: 476,
md: 668,
lg: 1000,
xl: 1300
}
}
})