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.
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>
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>
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>
I created a component named Header with a simple css class:
<template>
<nav
class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
>
<!-- Etc... -->
</nav>
In Home component I registred Header but it is overlapping the home:
<template>
<div class="container">
<Header />
<div class="flex m-5">
<h3>Hello</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
Header: () => import('#/components/Header.vue')
}
}
</script>
The Hello is behind, even including block class in Home component is not worked. Anyone can helped?
There are may ways you could achieve this, but building on the code you already have, you could:
Add a top-0 class to your header. This will ensure that your header which is now positioned fixed will stick to the top of the viewport.
Add a top padding class equavliant to the height of your header (e.g. pt-16) to your container.
Here's a live demo for your reference.
overlapping component each others because of height of your component and in flex height taking automaticly so remove your height
remove css h-16
I am using datetimepicker of NG-ZORRO and try to customize the style:
Want to achive:
width being responsive
no outline when hover and focus
What I have done is:
nzSize="large" [nzStyle]="{'width': '440px'}"
and modify large to 50px in ng-zorro's theme.less file, it works but the width is fix length.
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-last-name">
Start DateTime
</label>
<nz-date-picker nzSize="large" [nzStyle]="{'width': '440px'}" [nzMode]="dateMode" nzShowTime (nzOnOpenChange)="handleDateOpenChange($event)"
(nzOnPanelChange)="handleDatePanelChange($event)">
</nz-date-picker>
</div>
See how it looks in a form, the end datetime is default input box size:
Has anyone customized before and please help!