I've looking for a way to place elements between sections, I tried using margins but the elements stay "behind" the next section in the page. What's the CSS property I need to use? I use Tailwind CSS but would like to know what property handles it so I can look about it in the documentation. Also, I'm using components (React / JSX) in my project.
I attached an image for reference.
Thanks!
[Elements inside red square][1]
[1]: https://i.stack.imgur.com/vVLbS.png
try codes below in TailwindCSS playground
hope u get what u want
<div class="bg-sky-400">
<p>test</p>
</div>
<div class="bg-indigo-400">
<div class="absolute z-10 -translate-y-1/2">
<div class="inline-block h-4 w-4 rounded-full bg-white"></div>
<div class="inline-block h-4 w-4 rounded-full bg-white"></div>
</div>
<p>hello</p>
</div>
Related
I am using tailwind css, the collapse class is set 'hidden' and is toggled to 'block' on hover , but it is still not working, have seen on web and they show the same approach. I understand one way is to remove hidden class on hover but this too shall work , idk please help .
<div className='text-white text-xl font-bold relative right-8 p-2 hover:text-slate-300 cursor-pointer'>Menu
<div className='bg-white text-black z-30 w-44 right-14 hidden absolute hover:absolute'>
<div className=' block'>
<div>Add Project</div>
<div>My Projects</div>
<div>Logout</div>
</div>
</div>
</div>
Is there a way to add border-top with tailwind? Before you say it, i did look at the documentation and searched on google. I don't need border-top-width i need exactly border-top. Also its ok to use just in time css.
Try this:
<div class="h-20 w-20 bg-gray-300 flex justify-center items-center">
<div class="border-t-4 border-black h-5 w-5 bg-white mt-"></div>
</div>
Live example: https://play.tailwindcss.com/aUPhlY2DrZ
Those are the properties you are searching for:
class="border-t-4 border-black"
And here the documentation if you need more details:
https://tailwindcss.com/docs/border-width#individual-sides
In my vue-app I'm doing this loop
<div class="grid grid-cols-3 gap-14">
<article-card v-for="(article, index) in articles" :key="index" :content="article" />
</div>
So far so good, but I want to display the first row of the css-grid differently -> e.g. something like grid-template-columns: 1fr 2fr 1.5fr; - just to make them more visible
How can I do that? Can someone help me out? I'm using tailwindcss, so maybe that could help?
Style an element when it is the first-child using the "first" modifiers:
In your code use condition for the first index (I assume it 1) and use the style, I think you know the condition implementation I just mention the style usage-
<article-card first:your-style />
For more see the official tailwind CSS documentation. First, last, odd, and even
Also a code example I get from Tailwind CSS, that might help you.
<ul role="list" class="p-6 divide-y divide-slate-200">
{#each people as person}
<!-- Remove top/bottom padding when first/last child -->
<li class="flex py-4 first:pt-0 last:pb-0">
<img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
<div class="ml-3 overflow-hidden">
<p class="text-sm font-medium text-slate-900">{person.name}</p>
<p class="text-sm text-slate-500 truncate">{person.email}</p>
</div>
</li>
{/each}
</ul>
If you are using Tailwind v3 then you can just use arbitrary values feature, for example like that:
<div class="grid-cols-[200px_minmax(900px,_1fr)_100px]">
<!-- ... -->
</div>
So just wrap values in square brackets [...] and use _ instead of spaces.
More info in the docs as always
Have a look at my current web page, developed using tailwindcss page below:
What now I want to achieve is to have a .PNG background instead of that blank green background in the center.
I am new to Tailwind, so I used to simply set a background: url(..) in a css file for particular div class. Looking at TailwindCSS documentation here about backround-image,I can't see similar functionalities there.
Below is snippet of my code for that particular div:
<!-- Content: background image url should be in this div, right?-->
<div class="flex-1 pt-2 text-2xl font-bold mt-2 mb-2 bg-green-50 rounded-br-3xl">
<div>
<!--Search field -->
<div class="w-full">
<form class="rounded">
<div class="px-5">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Ask me anything (Press CTRL+K to focus)")>
</div>
</form>
</div>
<!-- content -->
<div class="px-5 pt-8">Course content here</div>
</div>
</div>
You can add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
}
so hero-pattern will become bg-hero-pattern for example.
Now that Tailwind 3 is out, you can use one-off background images like this, without having to use inline styles or extend tailwind:
<div class="bg-[url('/img/background.png')]">
<!-- ... -->
</div>
You can learn more about using arbitrary values in Tailwind 3 in the docs.
I am trying to set my Login section's background opacity using bg-opacity-75, but when I add that to my className, background color will just disappear. And if I use opacity-75, all child-div will be transparent as it should, if I use opacity-100, background color will just disappear and only input field is visible, it's kinda wired. In addition, I'm using default tailwind.config file with tailwind v2.0.2.
Here's my code:
...
<div className={"h-screen w-screen py-10 lg:w-3/6"}>
<div
className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
<Logo/>
<Text/>
...
I aslo tried inline css, still not working.
using bg-opacity-75(there sholld be a white transparent area behind inputs)
I guess you are looking for something like this:
<div class="bg-green-400 h-32">
<div class="bg-gray-50 h-full w-6/12 mx-auto bg-opacity-50">
<div>Your Opacity child div here</div>
</div>
</div>
Opacity
Use opacity Keyword only, for version 2.2.7 Tails wind
example:
<div
className = "opacity-75 bg-red-300">
</div>