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
Related
I want to add the add a border to my checkbox container when the checkbox is checked.
Currently, I have this:
<label
htmlFor="choose-me"
className=
'flex w-fit items-center justify-evely p-3 border-2 border-grey-4 text-grey-8
peer-checked:bg-light-indigo peer-checked:text-medium-indigo peer-checked:border-medium-indigo'>
<input type="checkbox" id="choose-me" className="peer mr-3 " />
Check me
</label>
I want something like the below:
However, I am unable to change the label styles when I put my input inside the label.
A CSS-only solution would be to use the :has pseudo-selector (note: not supported yet in Firefox). This would apply the classes only if the label wraps a checkbox which has been checked.
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.checkbox-label:has(input:checked) {
#apply border-blue-800 bg-blue-400 text-blue-800;
}
}
Your JSX: (with the unused classes stripped out)
<label className="checkbox-label justify-evely border-grey-4 text-grey-8 flex w-fit items-center gap-x-2 border-2 p-3">
<input type="checkbox" id="choose-me" />
Check me
</label>
You can test it here: https://play.tailwindcss.com/zidP4zm2Pq
The list of browsers supporting :has: https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility
use useState for handle active state:
const [isactive,setActive] = useState(false)
in JSX:
<label
onClick={()=>setActive(isactive?false:true)}
className= {`${isactive?'active-style':'normal-style'} extra-style-classes`}
>
<input type="checkbox" id="choose-me" className= {`${isactive?'active-style':'normal-style'} extra-style-classes`} />
Check me
</label>
First off, it's important to remember that the peer functionality in tailwind doesn't target parents (which is what you currently have). You can only target elements that are next to one another.
Additionally, because of how the CSS :peer combinator works you can only target previous components, meaning the checkbox MUST come before the peer who's state you want to affect when the checkbox is checked.
<label
htmlFor="choose-me"
class=
'flex w-fit items-center justify-evely p-3 text-grey-8 relative'
>
<input type="checkbox" id="choose-me" class="peer mr-3 relative z-10" />
<div class="absolute inset-0 border-2 border-grey-4 peer-checked:bg-indigo-200 peer-checked:text-indigo-800 peer-checked:border-indigo-800 peer-checked:block z-0"></div>
<span class="relative z-10">Check me</span>
</label>
Here's an example that works using pure tailwind/css, assuming you don't want to handle the state in your react component, as per #Vikesir's comment (though that was my first thought as well and it's a good idea).
You'll notice I'm fudging in an empty div and using that to simulate the background and border changing. I also wrapped the label text in a span to make sure I could change it's z-index so that both the checkbox and the text were visible above the div that handles the state change.
EDIT:
Here is a version using a pseudo-element built off of the span holding the label text if you don't want the empty div in your code:
<label
htmlFor="choose-me"
class=
'flex w-fit items-center justify-evely text-grey-8 relative'
>
<input type="checkbox" id="choose-me" class="peer mr-3 absolute left-2.5 z-20" />
<span class="relative z-10 inset-0 py-3 pr-3 pl-8 before:-z-10 before:content-[''] before:absolute before:inset-0 before:h-full before:w-full before:border-2 before:border-grey-4 peer-checked:before:bg-indigo-200 peer-checked:before:text-indigo-800 peer-checked:before:border-indigo-800 peer-checked:before:block">Check me</span>
</label>
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">
TailwindCss - Pseudo-classes Pseudo-elements Media queries combine in one class with subclasses
How combine repeated prefixes in one subgroup.
For example.
According to tailwind documentation we should use this peace of code when we want to add styles to disabled input
<label class="block">
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white
border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200
disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500
"/>
</label>
</form>
I would like to use something like this
<label class="block">
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white
border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:(outline-none border-sky-500 ring-1 ring-sky-500)
disabled:(bg-slate-50 text-slate-500 border-slate-200 shadow-none)
invalid:(border-pink-500 text-pink-600)
focus:invalid:(border-pink-500 ring-pink-500)
"/>
</label>
</form>
If it's possible not repeat every time words focus, disabled etc, just use selector once for each component.
Unluckily you can't wrap styles. Some improvements you can do is:
Creating "base components" with default styling and then adding only local styling by extending the classes. This approach however is easier when you use JS Frameworks/libraries like react, angular, and so on.
Move the commons styles in a CSS file and use tailwind directives. Then, in your class attribute, you use the class defined in the CSS for the common styling. Then you add local styling using normal tailwind classes.
I have the following problem. I have input and on left on it I want to have icon. Everything looks fine until I focus on the input. In such case right border (probably shadow in fact) seems to be smaller than other ones (no idea why?)
Code for this is:
<div class="m-10">
<label class="block text-sm font-medium text-gray-700">
Password
</label>
<div class="mt-1 relative rounded-md flex">
<input type="password"
class="flex-1 appearance-none block w-full border border-gray-300 rounded-l-md focus:ring-cyan-500
focus:outline-none sm:text-sm">
<span class="inline-flex items-center px-3 rounded-r-md border-l-0 border border-gray-300 bg-gray-50 text-gray-500 sm:text-sm cursor-pointer">
Some icon
</span>
</div>
However when I switch order of elements (first icon and then input and switch some classes) then on focus it looks fine.
So the questions are:
How to fix it (without changing markup much as it's simplified comparing to real usage scenario)
Why border seems to be different on focus
Why switching order of elements make the difference
Working example comparing 2 cases on TailwindPlay
You can fix it by adding the class relative to the input.
The outline ("border") is actually the same in both examples. In the second example, the icon element covers the outline. As you can see in this interactive example, elements that appear later in the dom, are "higher" than the elements before them.
Adding position: relative; activates z-index automatically and puts the element on top of the elements around it.
z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
The Z-Index CSS Property: A Comprehensive Look
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!