I've been trying to reach this type of layout using grid as I find it to be more easy to handle in situations as such. but it seems that my current code achieves stack two boxes on top of each other in the first column and only one in the second column which is not as the required layout. I would have liked it if the primary color which is in index=0 of the array to be the div taking the entire first column and the two remaining elements of the array to be stacked on top of each other in the second column.
Here is how it currently looks : Link
Here is my current component code along with tailwind classes:
const ColorPreview = ({ colors }: any) => {
console.log('colors inside colorPreview', colors);
return (
<div className='grid grid-cols-2 gap-6'>
{Object.keys(colors).map((key, index) => (
<div key={uuidv4()} className=' overflow-hidden rounded-lg border-2'>
<div
className={clsx(
'h-[6rem] w-20 p-4',
index === 0 && 'h-60 w-48 p-4',
)}
style={{
backgroundColor: colors[key],
}}
>
{' '}
</div>
<p className='justify-center p-2 text-base'>{colors[key]}</p>
{/* primary or secondary or tertiary*/}
</div>
))}
</div>
);
};
Any help or guidance is much appreciated.
I write a css class. this will work if you had only 3 items.
.parentClass {
/* targeting only those children 3n+1 */
/* n=0=>1st, n=1=>4th and so on */
& > *:nth-child(3n + 1),
// in large screen make the first item col span 2 units and row spans 2 units
#screen lg {
#apply col-span-2 row-span-2;
}
}
If you have more items, and decide which one you want to target. Here is a link about nth child:
https://css-tricks.com/how-nth-child-works/
Based on your layout decision you might write 2 separate logic. for example
& > *:nth-child(3n + 1),
& > *:nth-child(6n + 1) {
/* apply this css to target children. you could add more css here */
#screen lg {
#apply col-span-2 row-span-2;
}
then apply the parentClass class name to the top-level div.
Related
There is a list of elements where I want to apply a style for all the elements starting from the second one and another style for the first one.
To apply for the first one it's working first-of-type:bg-red-500 but how to apply a style to the other ones?
It seems that :not(first-of-type:bg-blue-500) does not work.
It is not possible at this moment in Tailwind, see pseudo class reference for a list possible variants.
In your specific case you might want to use first (or first-of-type) modifier like that:
<div>
<div class="first:bg-blue-500 bg-red-500">First</div>
<div class="first:bg-blue-500 bg-red-500">Second</div>
<div class="first:bg-blue-500 bg-red-500">Third</div>
</div>
Alternatively what you can do is to apply needed styles through js by looking at the index of the element, for example if you have list of elements in React:
<div>
{list.map((item, index) => (
<div
key={index}
className={index === 0 ? 'bg-blue-500' : 'bg-red-500'}
>
{
// ...
}
</div>
))}
</div>
I am trying to experiment with Bootstrap 5 within React, but somehow fail to understand the padding and margin. Consider the following code:
const Breadcrumbs = (props) => {
return (
<div className={"bg-dark rounded-start"}>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="https://somelink.com">
Library
</Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</div>
)
}
Its a Component which is later on shown in a Container. I chose a dark background to better show the issue. With this code, the Breadcrumbs render like this:
Now I want them to have some padding within the surrounding box, lets say only in vertical direction. According to the Spacing documentation I should be adding modifier classes, for example py-2 which should add a Padding to both top and bottom to $spacer * .5. When applying the additional class like this:
const Breadcrumbs = (props) => {
return (
<div className={"bg-dark py-2 rounded-start"}>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="https://somelink.com">
Library
</Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</div>
)
}
It now looks like this:
My question now is: how can I add padding that keeps the Breacrumbs vertically centered within the surrounding div?
//Edit: I think I found something. The <ol> element created by Breadcrumb has a margin-bottom set. How can I remove that?
I want to make an image have border radius only when the screen is large, otherwise I want it to have straight edges, how can I do that?
I am using Nextjs and Tailwind CSS
You just need to add the lg: or xl: prefix on whatever class you want to conditionally apply according to screen size, take a look at the docs
Here's an example code:
pages/index.js
export default function Home() {
return (
<div className="h-full w-full grid place-items-center">
<div className="w-32 h-32 bg-red-500 lg:rounded-xl"></div>
</div>
);
}
You can check the sandbox
I want to just set the left value of a absolutely positioned div different from other divs. I tried the last: property of tailwind, but its not working.
Here's my code thet I tried
absolute z-10 -ml-4 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 -left-5 last:left-20"
I added these classes and only want the last mapped div to have different position
Sample code:
<div class='relative w-full h-72'>
{items.map((each, i ) => {
return (
<div key={i} class='absolute top-0 left-0 last:left-10'>{each}</div
)
})}
</div>
and the last div that is mapped should have different left value
Prior to v2.1 and JIT mode, you need to explicitly enable the last-child variant in your tailwind.config.js, as it's not enabled for any core plugins.
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
inset: ['last']
}
}
}
Playground demo: https://play.tailwindcss.com/Wt6reZBsRY
From v2.1, when using Just-in-Time mode no extra configuration is required as all styles are generated on-demand.
// tailwind.config.js
module.exports = {
mode: 'jit',
// ...
}
If data in container A collapses(minimised), Component B should increase vertically in size and appear on full page. Similarly if Component B is collapsed,component A should increase.By default,both the components have equal screen space.
there are tons of ways to do this, you can check how flexbox in CSS works. it should not bee very react specific, All you need to do from react is to know which component is collapsed and which is to expanded.
In the parent component, you'll want to track which component is maximised. Then, pass a maximised prop to component A and component B, and let them set their CSS classes based on it. You could hide most of the content if you just want a mini version of the component.
Assuming you're using function components with hooks, it would look somewhat like this:
const Container = () => {
// Either "A", "B" or null (equal sizes)
const [componentMaximised, setComponentMaximised] = useState(null);
return (
<div className="container">
<A maximised={componentMaximised === "A"}/>
<B maximised={componentMaximised === "B"}/>
</div>
);
};
const A = props => {
return (
<div className={props.maximised ? "component component-maximised" : "component"}>
// ...
</div>
);
};
const B = props => {
return (
<div className={props.maximised ? "component component-maximised" : "component"}>
// ...
</div>
);
};
You'll also want to pass the setComponentMaximised function to each component as a prop if you want them to be able to have a button to maximise and minimise themselves.
For your CSS, use display: flex in combination with flex-grow to set how the items share the space:
.container {
height: 100vh; /* approx full height */
display: flex;
flex-flow: column nowrap;
}
.component {
flex-grow: 1;
overflow: hidden; /* prevent contents from spilling out of component */
}
.component-maximised {
flex-grow: 3;
}
Quick demo of this technique (try changing the classes manually in HTML)
https://codepen.io/gh102003/pen/MWKOQqE
You can use flex-grow: 0 if you just want the component to take up the space it needs.