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!
Related
I want to focus a div surrounding a button but only when keyboard focused. Usually focus-within works, but in this case it should only focus on keyboard focus (focus-visible:) and not when clicking with the mouse(focus:).
Essentially, I need to combine focus-within and focus-visible. How can this be done?
Tailwind Play: https://play.tailwindcss.com/ApDB5gSjqv
<div class="flex h-screen items-center justify-center">
<div class="rounded-lg bg-green-100 px-20 py-20 focus-within:ring-4 focus-within:ring-blue-300">
<button class="bg-green-200 px-6 py-3 focus:outline-none">Focusable Button</button>
</div>
</div>
Notes:
Based on this thread, it looks like w3c doesn't have support for focus-within-visible. What's an alternative or round-about way to achieve this?
It looks like there is support for :has(:focus) selector in some browsers but how should this be applied in Tailwind...? Source
Instead of using focus-within you could add relative to the div you want to make look focused with the ring. Then make the button a peer and have an absolutely positioned div after it use the peer-focus-visible modifier to add any "focused" styles you want.
EDIT: You'll need to make the div be behind the button by adding relative to the button and assigning an appropriate z-index value to both the inset div and button.
<div class="flex h-screen items-center justify-center">
<div class="rounded-lg bg-green-100 px-20 py-20 relative">
<button class="bg-green-200 px-6 py-3 focus:outline-none peer relative z-[1]">Focusable Button</button>
<div class="absolute inset-0 rounded-lg peer-focus-visible:ring-4 peer-focus-visible:ring-blue-300 z-[0]"></div>
</div>
Here is an edited example on Tailwind Play https://play.tailwindcss.com/us5kpJg6cV
I'm trying to style a form using, but when I put in the margin for the left and right (mx-4), it is only add the margin on the left side and on the right side it's going off of the page.
export default function TextArea() {
return (
<div className="w-full mt-1 ">
<p className="text-purple-800 font-medium px-4 py-1">
What are you thinking?
</p>
<textarea
rows={4}
name="comment"
id="comment"
className="w-full sm:w-auto md:w-2/3 mx-4 h-96 rounded-md border-white sm:text-md placeholder-gray-300 text-black"
placeholder="Type your idea here..."
/>
</div>
)
}
I see you are using full width w-full for the div also the same thing for text area.
Here when you give w-full it will take the full with of the parent. Here Div is taking full width of its parent and text area is taking the width of div. Here you need to check the div's parent and set the correct width to it.
I believe mx-4 is being applied at the other end of the text area. You can inspect and see this in your browser
The problem is due to w-full. The class w-full on the parent div is causing the form to take up the full width of its parent container.
Change it to mx-auto
Change this
<div className="w-full mt-1 ">
to
<div className="mx-auto mt-1">
Now my reactjs input field looked like this.
As you can see the text just keeps going straight and not moving down to the next line. How do I solve this? Here is my code for this input field.
<input className="bg-slate-50 text-main-blue border border-gray-300 drop-shadow-lg text-sm rounded-md my-5 block w-full p-2.5 whitespace-normal word-break:break-word" type="text" name="eventName" placeholder="Event Name" required onChange={event => setEventName(event.target.value)} value={eventName}/>
Change word-break:break-word to break-words
There is no class word-break:break-word in tailwind-css
This is actually work of textarea not text, Use type = "textarea" to get the desired result .
Tailwind Work around:
Use contenteditable prop of div and use break-words property
Code:
<div class="m-4 max-w-full overflow-y-hidden break-words border border-solid border-black text-4xl" contenteditable="true"></div>
Output:
Like : Tailwind Play
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'm currently using Tailwind / TailwindUI and I would like to scale down ALL items.
Eg I go to my website and Zoom out so everything becomes smaller and the zoom level is 85%
I would like my website to appear at this scale (85%) when a normal user visits.
How would I go about doing this in tailwind?
You can use transform & scale property to achieve this.
Just add transform along with the scale-95 etc.
Visit for more reference :-
https://tailwindcss.com/docs/scale
https://tailwindcss.com/docs/transform
A simple solution to this is using the browser's built in zoom functionality.
document.body.style.zoom = "85%"
I've tested this on Chrome 101.
This is functional Alpine.js component that achieves dynamically changing browser's zoom percentage:
<div x-data="{zoom:100}" class="flex bg-teal-600 text-white mx-3 my-2 rounded-md text-sm font-medium">
<div #click="document.body.style.zoom = `${zoom-=10}%`" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-2 pl-3 rounded-l">-</div>
<div x-text="zoom" class="px-2 pt-1"></div>
<div #click="document.body.style.zoom = `${zoom+=10}%`" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-2 rounded-r">+</div>
</div>