Tailwind issue - some items are slightly off - tailwind-css

Not sure how to debug this, but inspecting some items that are supposedly inside a flex, they are still off by a few fractions of a pixel.
On the screenshot below, notice the slight variation between the Id / Due Date and the Project input fields. https://imgur.com/a/je3Sgiu
What could be the issue here? I tried it in Firefox, Safari, and Chrome, all facing the issue.
Edit:
Added the html snippet below
<div class="lg:w-4/5 mr-auto ml-auto mt-16 sm:px-6 lg:px-8">
<div class="">
<form method="GET" autocomplete="off">
<div class="md:flex">
<div class="mx-2">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold my-5" for="grid-state">
Id
</label>
{% render_field invoice_filter.form.id class="w-full lg:w-40 block appearance-none bg-white border border-gray-500 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" %}
</div>
<div class="mx-2">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold my-5" for="grid-state">
Project
</label>
{% render_field invoice_filter.form.project class="w-full lg:w-40 block appearance-none bg-white border border-gray-500 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" %}
</div>
<div class="mx-2">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold my-5" for="grid-state">
Due Date
</label>
{% render_field invoice_filter.form.due_date class="w-full lg:w-40 block appearance-none bg-white border border-gray-500 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" %}
</div>
</div>
<button class="whitespace-no-wrap mr-5 bg-green-600 hover:bg-green-700 text-white py-2 my-2 mx-2 px-6 rounded-lg" type="submit">Apply filter</button>
</form>
</div>
</div>
The {% render_field ... %} tags are just a Django specific way of adding classes to the form fields,
It essentially says
`<input class="...." />`

Related

Component shrinks at fixed aspect ratio instead of just reducing width when viewport shrinks. (React, Tailwind CSS)

Whenever I use Google Chrome's responsive view to see my login form component at different screen sizes, I notice some strange behaviour. Once the viewport shrinks to a certain width, specifically 1024px, it stops shrinking horizontally and instead starts shrinking on both axis at the same fixed rate. This is despite there being ample space in the form still.
I tried setting fixed (non-percentile) values for the top-level to hopefully constrain the height to a specific scale, but this hasn't fixed the issue unfortunately. If anyone could help me to troubleshoot this behaviour I would be very appreciative!
The code is written using the React library and makes use of TailwindCSS classes for styling.
<div className='
w-3/4 xl:w-1/3 h-[26rem]
absolute
top-1/2 left-1/2 xl:left-3/4
-translate-y-1/2 -translate-x-1/2 xl:-translate-x-3/4'>
<div className='
w-full h-full
relative
bg-navWhite
py-12 px-4 sm:px-8
shadow-lg
flex flex-col'>
<h1 className='
font-navigation font-medium text-3xl tracking-tight
text-navGrey
text-center'>
Sign In
</h1>
<p className='
mt-2
font-navigation
text-navGrey text-center
font-light text-base'>
Enter your credentials below, to access your dashboard.
</p>
<form className='
flex flex-col gap-y-4 mt-4'>
<div className='
w-full flex flex-row-reverse
border-b border-b-navGrey/20
focus-within:border-b-dashboardBlue
transition-colors duration-200'>
<input
type="text"
placeholder="Email Address"
value={username}
name='Email signup'
onChange={usernameInput}
className='
p-2 w-full peer
bg-transparent
outline-none focus:ring-0
sm:text-sm'
/>
<span className='
material-symbols-outlined
text-2xl
text-navGrey/50
peer-focus:text-dashboardBlue
transition-colors duration-200
h-full
p-2
select-none'>
mail
</span>
</div>
<div className='
w-full flex flex-row-reverse
border-b border-b-navGrey/20
focus-within:border-b-dashboardBlue
transition-colors duration-200'>
<span
onClick={passwordVisibility}>
<span className='
cursor-pointer select-none
material-symbols-outlined
text-2xl
h-full
p-2'
style={showPassword === true ? styles.active : styles.inactive}>
{showPassword === true ? 'visibility' : 'visibility_off'}
</span>
</span>
<input
type='password'
id='passwordField'
placeholder="Password"
value={password}
name='Email signup'
onChange={passwordInput}
className='
p-2 w-full peer
bg-transparent
outline-none focus:ring-0
sm:text-sm'
/>
<span className='
material-symbols-outlined
text-2xl
text-navGrey/50
peer-focus:text-dashboardBlue
transition-colors duration-200
h-full
p-2
select-none'>
lock
</span>
</div>
<div className="flex justify-between p-2 -mb-2">
<label className='self-end'>
<input type="checkbox" checked={rememberPassword} onChange={() => toggleRemember(!rememberPassword)} className='relative align-middle w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600'/>
<span className="
sm:text-sm
text-navGrey/50
ml-1">
Remember me
</span>
</label>
<span className="
cursor-pointer
sm:text-sm
text-dashboardBlue
no-underline
hover:underline
transition-all duration-200">
Forgot password?
</span>
</div>
<button
className='
w-full p-6 mt-2
relative
bg-dashboardBlue
focus:outline-none focus:ring-2 focus:ring-dashboardBlue focus:ring-offset-2'
onClick={loginAction}>
<div className='relative' style={loading === true ? styles.notLoading : styles.loading}>
<span className='
absolute
top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2
text-white
font-semibold
text-lg
transition-all duration-300'>
Login
</span>
</div>
<Loader visibility={loading === true ? styles.loading : styles.notLoading} />
</button>
</form>
</div>
</div>

How to stop two nested divs with absolute positioning from overlapping each other?

I have a responsiveness issue with the project that I am currently developing
I have a sidebar with two nested divs (the sections that appear "separated" from each other - see preview below) with absolute positioning that are overlapping each other whenever the screen height is lower than the space required to fit all of the elements on screen.
Overlapping Elements
I would like to know how to stop the bottom section from overlapping the top section and make the sidebar's content scrollable from that point (once the "SOUND DETECTION DETAILS" container begins to overlap the "STROBE DURATION" container).
Here's the relevant index.html body section code:
<body class="bg-black">
<div id="sidebar">
<div id="sidebar-container" class="py-1.5 bg-gray-300 w-400px h-full absolute z-1 overflow-x-hidden opacity-100">
<div id="sidebar-logo" class="w-[300px] mx-auto">
<img class="" src="assets\img\logo-V2\logo-horizontal-black.png">
</div>
<hr class="w-[375px] border border-solid border-zinc-700 mx-auto">
<h3 class="text-center py-3 text-xl text-gray-600 font-semibold">STROBE SYNC MODE</h3>
<div id="auto-manual-container" class="w-[330px] ml-35px flex justify-between">
<button id="auto" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="autoMode()">AUTO</button>
<button id="manual" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="manualMode();">MANUAL</button>
</div>
<hr class="w-[375px] border border-solid border-zinc-700 mx-auto">
<div id="auto-mode-container" class=""> <!-- "AM" stands for "Auto Mode" -->
<div id="input-device-container" class="w-[330px] ml-35px">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">INPUT DEVICE</h5>
<select id="select-input-device" class="w-full h-10 mb-5 flex mx-auto bg-white rounded outline-none font-semibold text-center text-gray-700" required>
<option value="" selected disabled hidden>SELECT DEVICE</option>
<option value="" class="device text-left"> Integrated Player</option>
<option value="" class="device text-left"> Example Device</option>
</select>
</div>
<div id="frequency-range-focus-container" class="w-[330px] ml-35px">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">FREQUENCY RANGE FOCUS</h5>
<div id="low-mid-high-container" class="w-full flex justify-between">
<button id="low" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-themeOrange selected" onclick="low_Btn()">LOW</button>
<button id="mid" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="mid_Btn()">MID</button>
<button id="high" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="high_Btn()">HIGH</button>
</div>
<button id="master" class="w-full h-12 mb-3 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="master_Btn()">MASTER</button>
</div>
<div id="detection-sensitivity-container" class="w-[330px] ml-35px">
<h5 id="sens-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>
<div id="sens-slider-container" class="w-full">
<input type="range" min="0" max="100" value="50" class="sens-slider w-full" id="sens-slider">
<p class="float-left font-regular text-sm text-gray-600">0</p>
<p class="float-right font-regular text-sm text-gray-600">100</p>
</div>
</div>
<br>
<div id="strobe-duration-container" class="w-[330px] ml-35px">
<h5 id="AM-duration-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>
<div id="duration-slider-container" class="duration-slider-container">
<input type="range" min="10" max="1000" value="200" class="duration-slider w-full" id="AM-duration-slider">
<p class="float-left font-regular text-sm text-gray-600">10</p>
<p class="float-right font-regular text-sm text-gray-600">1000</p>
</div>
</div>
<br>
<div id="sound-detection-details-container" class="w-[330px] ml-35px absolute bottom-[75px]">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">SOUND DETECTION DETAILS</h5>
<div id="SDD-container" class="w-full h-40 px-4 bg-white rounded flex flex-col justify-evenly">
<div id="SCT-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">SOUND COME THROUGH</h4>
<label id="SCT-check-container" class="float-right">
<input type="checkbox" checked disabled> <!-- only check when audio coming trough, change with javascript -->
<span class="SCT-checkmark"></span>
</label>
</div>
<hr>
<div id="tempo-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">TEMPO:</h4>
<h4 id="bpm" class="float-right font-semibold text-base text-gray-600">150BPM</h4> <!-- change with javascript -->
</div>
<hr>
<div id="audio-meter-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">AUDIO METER</h4>
<label id="AM-check-container" class="float-right"><!-- in this context "AM" stands for "Audio Meter" -->
<input type="checkbox">
<span class="AM-checkmark"></span>
</label>
</div>
</div>
</div>
<br>
<div id="AM-on-off-container" class="w-[330px] ml-35px flex justify-between absolute bottom-0">
<button id="AM-off" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="AM_turnOff()">OFF</button>
<button id="AM-on" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="AM_turnOn();">ON</button>
</div>
</div>
</div>
</div>
</body>
I am using Tailwind CSS, however, I do understand pure CSS answers as i am able to convert them to Tailwinds fromatting. Thanks!
I have searched for hours trying to find a solution for a problem similar to mine, but with no avail. I have found tutorials with a context similar to mine but the elements' positioning were not of the same type.
I had tried to remove the absolute position of the divs encapsulating sound detection details and also refactored some of the code . Below is the code shared.
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-black">
<div id="sidebar">
<div id="sidebar-container" class="py-1.5 bg-gray-300 w-400px h-full absolute z-1 overflow-x-hidden opacity-100 overflow-y-scroll flex-col justify-center items-center">
<div id="sidebar-logo" class="w-[300px] mx-auto">
<img class="" src="assets\img\logo-V2\logo-horizontal-black.png">
</div>
<hr class="w-[375px] border border-solid border-zinc-700 mx-auto">
<h3 class="text-center py-3 text-xl text-gray-600 font-semibold">STROBE SYNC MODE</h3>
<div id="auto-manual-container" class="w-[330px] mx-[35px] flex justify-between">
<button id="auto" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="autoMode()">AUTO</button>
<button id="manual" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="manualMode();">MANUAL</button>
</div>
<hr class="w-[375px] border border-solid border-zinc-700 mx-auto">
<!-- "AM" stands for "Auto Mode" -->
<div id="input-device-container" class="w-[330px] mx-[35px]">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">INPUT DEVICE</h5>
<select id="select-input-device" class="w-full h-10 mb-5 flex mx-auto bg-white rounded outline-none font-semibold text-center text-gray-700" required>
<option value="" selected disabled hidden>SELECT DEVICE</option>
<option value="" class="device text-left"> Integrated Player</option>
<option value="" class="device text-left"> Example Device</option>
</select>
</div>
<div id="frequency-range-focus-container" class="w-[330px] mx-[35px]">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">FREQUENCY RANGE FOCUS</h5>
<div id="low-mid-high-container" class="w-full flex justify-between">
<button id="low" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-themeOrange selected" onclick="low_Btn()">LOW</button>
<button id="mid" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="mid_Btn()">MID</button>
<button id="high" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="high_Btn()">HIGH</button>
</div>
<button id="master" class="w-full h-12 mb-3 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="master_Btn()">MASTER</button>
</div>
<div id="detection-sensitivity-container" class="w-[330px] mx-[35px]">
<h5 id="sens-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>
<div id="sens-slider-container" class="w-full">
<input type="range" min="0" max="100" value="50" class="sens-slider w-full" id="sens-slider">
<p class="float-left font-regular text-sm text-gray-600">0</p>
<p class="float-right font-regular text-sm text-gray-600">100</p>
</div>
</div>
<br>
<div id="strobe-duration-container" class="w-[330px] mx-[35px]">
<h5 id="AM-duration-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>
<div id="duration-slider-container" class="duration-slider-container">
<input type="range" min="10" max="1000" value="200" class="duration-slider w-full" id="AM-duration-slider">
<p class="float-left font-regular text-sm text-gray-600">10</p>
<p class="float-right font-regular text-sm text-gray-600">1000</p>
</div>
</div>
<br>
<div id="sound-detection-details-container" class=" w-[330px] mt-28 mx-[35px] bottom-[75px]">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">SOUND DETECTION DETAILS</h5>
<div id="SDD-container" class="w-full h-40 px-4 bg-white rounded flex flex-col justify-evenly">
<div id="SCT-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">SOUND COME THROUGH</h4>
<label id="SCT-check-container" class="float-right">
<input type="checkbox" checked disabled> <!-- only check when audio coming trough, change with javascript -->
<span class="SCT-checkmark"></span>
</label>
</div>
<hr>
<div id="tempo-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">TEMPO:</h4>
<h4 id="bpm" class="float-right font-semibold text-base text-gray-600">150BPM</h4> <!-- change with javascript -->
</div>
<hr>
<div id="audio-meter-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">AUDIO METER</h4>
<label id="AM-check-container" class="float-right"><!-- in this context "AM" stands for "Audio Meter" -->
<input type="checkbox">
<span class="AM-checkmark"></span>
</label>
</div>
</div>
</div>
<br>
<div id="AM-on-off-container" class=" w-[330px] mx-[35px] flex justify-between bottom-0">
<button id="AM-off" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="AM_turnOff()">OFF</button>
<button id="AM-on" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="AM_turnOn();">ON</button>
</div>
</div>
</div>
</body>
Note: Since I don't have the styles defined with id like sidebar, so the sidebar appears in the left side.
ALso you can view here

How can I add spacing in file upload button

I wanted to add spacing between the Choose Files button and the text on right side. How can I do so by tailwind CSS. I had added the code below .
<script src="https://cdn.tailwindcss.com"></script>
<section class="body-font text-gray-600">
<div class="container mx-auto px-5 py-24">
<div class="mx-auto flex flex-col items-start lg:w-2/3">
<label class="title-font mb-2 text-sm font-medium text-gray-900" for="multiple_files">Upload multiple files</label>
<input class="w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-100 px-4 py-2 text-lg text-gray-600 file:rounded-lg file:border-none file:bg-indigo-600 file:p-2 file:text-white hover:file:cursor-pointer hover:file:bg-indigo-500" id="multiple_files" type="file" multiple="" />
</div>
</div>
</section>
you can add margin-right to file, use this selector file:mr-4
<input class="file:mr-4" id="multiple_files" type="file" multiple="" />
have a look here :
https://play.tailwindcss.com/scMYVnSVjY

How to turn page background color dark when tailwind css modal is open in angular13

I want to turn my entire screen into the grey when my tailwind css modal open in my angular app but the screen remain white after modal open Please anyone can solve this
this is my html code
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
<div class="relative w-auto my-6 mx-auto max-w-3xl">
<!--content-->
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
<!--header-->
<div class="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
<h3 class="text-3xl font-semibold">
Modal Title
</h3>
<button class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" (click)="toggleModal()">
<span class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
×
</span>
</button>
</div>
<!--body-->
<div class="relative p-6 flex-auto">
<p class="my-4 text-blueGray-500 text-lg leading-relaxed">
I always felt like I could do anything. That’s the main
thing people are controlled by! Thoughts- their perception
of themselves! They're slowed down by their perception of
themselves. If you're taught you can’t do anything, you
won’t do anything. I was taught I could do everything.
</p>
</div>
<!--footer-->
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Close
</button>
<button class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Save Changes
</button>
</div>
</div>
</div>
</div>
This is my typescript code to open modal
showModal:boolean = false;
toggleModal(){
this.showModal = !this.showModal;
}
Here my modal is opening but the entire screen is not turning into the dark mode Please anyone can solve this Thanks in advance
Probably you need to add the specific style for your modal container as backgrop background, like custom style: style="background-color: rgba(0,0,0,0.5);"
In your code it should be look like: <div *ngIf="showModal" style="background-color: rgba(0,0,0,0.5);" class="overflow-x-hidden...
Also, you can add the specific '.backdrop' class to the root styles.css and use it as class:
.backdrop {
background-color: rgba(0,0,0,0.5);
}
in html:
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto...
tailwind screen example with the dark background here
the component template html looks like that:
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
//.......the rest code is the same....

How to remove border input below li tag?

I have this input with languages tabs:
I need to make it like this:
My problem with the border when any languages active tab!
my code in English:
<div>
<div class="flex justify-between items-center">
<label class="block font-medium text-sm text-gray-700">
Categroy Name
</label>
<div class="inline-flex items-center text-gray-700 list-none space-x-1">
<li class="px-4 rounded border-r border-t border-l cursor-pointer">
Arabic
</li>
<li class="px-4 rounded border bg-gray-200 cursor-pointer">
English
</li>
</div>
</div>
<input type="text" name="category_title" class="focus:ring-indigo-500 rounded focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300">
</div>
You could make it work by changing the radius to top only (rounded-t), moving your div and tab each -1px down (-mb-px) and adding a white background (bg-white).
This is also the solution of the official tabs component.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div>
<div class="flex justify-between items-center">
<label class="block font-medium text-sm text-gray-700">
Category Name
</label>
<div class="-mb-px inline-flex items-center text-gray-700 list-none space-x-1">
<li class="-mb-px px-4 rounded-t border-r border-t border-l cursor-pointer bg-white">
Arabic
</li>
<li class="px-4 rounded-t border bg-gray-200 cursor-pointer">
English
</li>
</div>
</div>
<input type="text" name="category_title" class="focus:ring-indigo-500 rounded focus:border-indigo-500 block w-full border border-grey-300">
</div>

Resources