Description - The images cannot get loaded as a background.
Screenshots -
One thing you can do is to use tailwind.config.js.
Just define the image path in tailwind.config.js file like this.
module.exports = {
theme: {
extend: {
backgroundImage: {
'galaxy': "url('http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg')",
'tree': "url('http://commondatastorage.googleapis.com/codeskulptor-demos/riceracer_assets/img/tree_3.png')",
}
},
},
plugins: [],
}
And then use bg-keyvalue. like bg-galaxy here to utilize them in the pages like this.
And use like
<script src="https://cdn.tailwindcss.com"></script>
<div class="mx-auto mt-16 grid w-8/12 grid-cols-3 text-white grid-rows-3 gap-4 bg-slate-200">
<div class="row-span-2 flex items-center justify-center rounded-lg bg-tree">block1</div>
<div class="col-span-2 flex items-center justify-center rounded-lg bg-galaxy">block2</div>
<div class="row-span-2 flex items-center justify-center rounded-lg bg-blue-400">block4</div>
<div class="flex items-center justify-center rounded-lg bg-blue-400">block5</div>
<div class="flex items-center justify-center rounded-lg bg-blue-400">block3</div>
<div class="flex h-40 items-center justify-center rounded-lg bg-blue-400">block6</div>
</div>
YOu can see my tailwind play link as an example here
Related
I'm making a blog using NextJS and TailwindCSS. I've made a card, that the button overlays the card image right in the middle. But the button stays a little higher. Image:
And here is the code:
<div className="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div className="relative overflow-hidden flex items-center justify-center flex-col">
<Image
src={
"https://static.wixstatic.com/media/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg/v1/fill/w_393,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/5bfb6f_9f2519d5fc2d41f990a10dd92eb8658d.jpg"
}
width={314}
height={314}
alt="Image"
className="object-cover"
/>
<div className="absolute w-full h-full top-0 bottom-0 left-0 right-0">
<button className="text-xl px-4 py-2 rounded text-blue-600 bg-white absolute bottom-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">Travel</button>
</div>
</div>
</div>
I've tried using absolute and relative positions. I've also tried using flexbox. But nothing worked. I'm expecting that the button will overlay on the image right on the center.
There are many ways to do this, but I think the easiest fix here is, instead of using absolute for the button, just add flex items-center justify-center to the parent class of button like this:
<div class="relative max-w-5xl mx-auto px-2 grid grid-cols-3">
<div class="relative overflow-hidden flex items-center justify-center flex-col">
<img
src="https://via.placeholder.com/314x314"
width="314"
height="314"
alt="Image"
class="object-cover"
/>
<div class="absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center">
<button class="text-xl px-4 py-2 rounded text-blue-600 bg-white">Travel</button>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
Hi I'm designing a grid system in NextJS using Tailwind.
I'm having trouble auto sizing the grids to fit the size of the parent element.
Below are two images to help convey my meaning.
Mockup wireframe of the container and grids. (Red = Wrapper, Pink = Layout, Purple = Grids)
What I've managed to code, (I want to resize the right hand boxes to the height of the window.)
<div className="bg-white dark:bg-custom05 md:fixed md:inset-y-0 md:left-0 md:flex md:items-start md:overflow-y-auto md:w-full ">
<div className="min-h-full md:flex md:w-16 md:flex-none md:items-center md:whitespace-nowrap md:py-12 md:leading-7 md:[writing-mode:vertical-rl]">
<div className="flex justify-between text-sm gap-12">
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-1">Avatar</div>
<div className="sm:w-60 sm:h-14 md:w-14 md:h-60 rounded-lg flex items-center justify-center bg-custom03 order-2">Author Tag Line</div>
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-3">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom06 relative z-10 mx-auto p-10 md:max-w-md md:min-h-full md:flex-auto md:border-x md:border-custom07">
<div className="grid grid-row-3 grid-flow-row gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom05 relative z-9 p-10 mx-auto md:max-h-full md:flex-auto ">
<div className="grid grid-col-2 grid-flow-col gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center col-span-2">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-2 col-span-2">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-3">03</div>
</div>
</div>
</div>
Answer Result & Refactor
Thanks to MagnusEffect's help I've been able solve the problem.
Ended up changing some of his styling and made sure to set the padding, gaps and other minor changes, hover its worked fantasticly!
You can use the flex properties to create the following grid systems like this.
<script src="https://cdn.tailwindcss.com"></script>
<div class=" border-red-600 border-2 p-3 flex flex-row items-center space-x-2">
<div class=" p-4 border-pink-500 border-2 h-screen space-y-2 items-center w-1/12 flex flex-col">
<div class=" border-purple-500 border-2 h-20 ">Av</div>
<div class=" border-purple-500 border-2 h-72">ot</div>
</div>
<div class=" p-4 border-pink-500 border-2 h-screen w-4/12 flex flex-col space-y-2">
<div class="p-3 border-purple-500 border-2 h-48">Video</div>
<div class="p-3 border-purple-500 border-2 h-24">Description</div>
<div class="p-3 border-purple-500 border-2 h-48">Github, Socials</div>
</div>
<div class=" p-4 border-pink-500 border-2 h-screen w-7/12 space-x-4 flex flex-row items-center">
<div class="flex flex-col space-y-2 w-1/2 h-full">
<div class="border-purple-500 border-2 h-full p-4">Projects</div>
<div class="border-purple-500 border-2 h-full p-4">Empty </div>
</div>
<div class="p-6 border-purple-500 border-2 w-1/2 h-full ">
Study/Work
</div>
</div>
</div>
Note:
Replace class= with className= in Reactjs.
View the demo in fullPage
Try h-screen or h-fit or you can add custom sizing h-[] in the square brackets you can add any sizing (px, vh) etc.
Try to render all the Twcss Colors out,
because they are missing once a while
but end up only a few can display randomly.
I can manually use it one by one , it will show up otherwise it wont display in a map
Edit: Add the key, already set it one by one and refresh would NOT work as expected
export function Twcolors(props: TwcolorsProps) {
const colors = ['', 'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
return (
<>
<main className="flex w-screen flex flex-col items-center justify-center">
<h1 className="text-4xl mt-3 font-extrabold text-gray-900 tracking-tight text-indigo-500">
Tailwind CSS
Colors</h1>
<p className="my-4 text-center leading-loose">
<code className="bg-gray-200 px-3 py-1 rounded-lg">-inherit</code>
<code className="bg-gray-200 px-3 py-1 rounded-lg">-current</code>
<code className="bg-gray-200 px-3 py-1 rounded-lg">-transparent</code>
<code
className="bg-gray-200 px-3 py-1 rounded-lg">-black</code>
<code
className="bg-gray-200 px-3 py-1 rounded-lg">-white</code>
<br/>as well as the following:</p>
<div className="bg-neutral-300"> Some</div>
{
colors.map(
(color) => (
<div key={color.toString()} className="grid grid-rows-10 grid-flow-col items-left">
<h2 key={color.toString()}>{color} {`bg-${color}-50`}</h2>
<div key={color.toString()}
className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-50`}>50
</div>
<div key={color.toString()}
className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-100`}>100
</div>
<div key={color.toString()}
className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-200`}>200
</div>
<div key={color.toString()}
className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-300`}>300
</div>
</div>
)
)
}
</main>
</>
)
;
}
export default Twcolors;
It is because you are using dynamic class names, which will not work as Tailwind can not detect the class names. This is documented here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names
The "random" ones showing up will be bacause they are used in the rest of your code somewhere.
And that is why it works if you manually add the colors one by one.
If you check out the Tailwind Colors page, you will see they actually render all the colors using a style rather than Tailwind classes. https://tailwindcss.com/docs/customizing-colors
I'm making a switch to toggle dark mode in React. This is how it looks
<div className="flex gap-4 bg-black p-1 rounded-full relative" onClick={() => setDarkMode((mode:boolean) => !mode)}>
<div className="bg-white border-2 border-gray-400 h-8 w-8 rounded-full absolute
top-0 left-0 dark:left-auto"/>
<WbSunnyIcon className="text-yellow-400"/>
<ModeNightIcon className="text-white"/>
</div>
For some reason it doesn't move when I click on it. Why is that?
I know your all busy, and any time you give me I value highly and would be greatly appreciated.
I'm trying to create a Youtube like layout with the video player, a sidebar and comments underneath the video. I'm trying to use a grid with Tailwind CSS, but the comment section (3 and 4) aren't going underneath the video player (1). This is the desktop layout I was thinking:
enter image description here
The order when in mobile should be video, sidebar then comments.
Heres my code so far:
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-6">
<div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-8" style="height: 200px;">1</div>
<div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4" style="height: 400px;">2</div>
<div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4">3</div>
<div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100 col-end-auto md:col-span-4">4</div>
</div>
</div>
I'm very great full for any help.
Assuming you like the way everything works above mobile size (sm and up). You can add order utility classes order-1, order-2 etc. to your major elements and sm:order-none to them as well to make sure the order only applies on mobile.
Here's an example on Tailwind Play https://play.tailwindcss.com/RX1JQHMYgo