I have an FAQ section which has accordion type sprung sections, all made with TailwindCSS (i.e. no Javascript). Links inside open sections do not work (they just close the FAQ as the question looses focus).
Does anyone have any idea how i can get the link event to fire before the focus is lost?
Here's a simple minimal example demonstrating the issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test TailwindCSS Group:Focus</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="tailwind.css" rel="stylesheet">
<style>
/* ----- ACCORDION ----- */
.group:focus .group-focus\:max-h-screen {
max-height: 100vh;
}
.group:focus .group-focus\:text-white {
--text-opacity: 1;
color: #02455a; /*petrol_blue*/
color: rgba(255, 255, 255, var(--text-opacity));
}
.group:focus .group-focus\:-rotate-90 {
--transform-rotate: -90deg;
}
</style>
</head>
<body>
<div class="group" tabindex="1">
<div class="group flex justify-between px-4 py-2 items-center transition cursor-pointer pr-10 relative">
<div class="h-8 w-8 items-center inline-flex justify-center rotate-180 transform transition group-focus:-rotate-90 absolute top-0 left-0 mb-auto ml-auto mt-2 mr-2">
<svg fill="#02455a" height='100px' width='100px' xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 847 847" x="0px" y="0px">
<g><polygon points="670,584 423,263 176,584 "></polygon></g></svg>
</div>
<div class="transition pl-4 hover:opacity-50">Question</div>
</div>
<div class="group-focus:max-h-screen max-h-0 px-4 overflow-hidden">
<p class="pl-4 pr-4 pt-0 pb-2">Answer: Stack Overflow</p>
</div>
</div>
</body>
</html>
tailwind.css is creating using:
npx tailwindcss-cli#latest build -o tailwind.css
(Incidentally, i realise the svg arrow isn't behaving itself, but that's another issue...)
In addition to your group-focus:max-h-screen you could also add focus-within:max-h-screen so that the max-height is kept when the anchor gains focus.
To fix your arrow animation simply replace --transform-rotate with --tw-rotate in your CSS.
.group:focus .group-focus\:max-h-screen {
max-height: 100vh;
}
.group:focus .group-focus\:text-white {
--text-opacity: 1;
color: #02455a;
}
.group:focus .group-focus\:-rotate-90 {
--tw-rotate: 90deg;
}
.focus-within\:max-h-screen:focus-within {
max-height: 100vh;
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="group" tabindex="1">
<div class="group flex justify-between px-4 py-2 items-center transition cursor-pointer pr-10 relative">
<div class="h-8 w-8 items-center inline-flex justify-center rotate-180 transform transition group-focus:-rotate-90 absolute top-0 left-0 mb-auto ml-auto mt-2 mr-2">
<svg fill="#02455a" height="100px" width="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 847 847" x="0px" y="0px">
<g><polygon points="670,584 423,263 176,584 "></polygon></g>
</svg>
</div>
<div class="transition pl-4 hover:opacity-50">Question</div>
</div>
<div class="group-focus:max-h-screen focus-within:max-h-screen max-h-0 px-4 overflow-hidden">
<p class="pl-4 pr-4 pt-0 pb-2">Answer: Stack Overflow</p>
</div>
</div>
Related
I'm using tailwind css to build a website but my page content is increasing the screen width. I have checked that the box-sizing is set to border-box and margin, padding for body is set to 0 too but this issue still occurs.
How do i solve this issue?
Navbar html:-
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="./assets/css/main.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="./assets/images/paper.png">
</head>
<body class="bg-sky-500 overflow-x-hidden w-full">
<nav class="px-6 md:px-12 py-1.5 md:py-2.5 bg-yellow-400 m-3 md:m-5 rounded-xl shadow-md shadow-sky-600 flex absolute z-50 top-0 right-0 left-0 w-full">
<img src="./assets/images/icon.png" alt="icon" class="w-[14%] sm:w-[6.5%] md:w-[4.2%] hidden xs:block" />
<p class="font-semibold text-gray-50 font-main m-auto text-xs sm:text-base md:text-lg tracking-wider">ROCK PAPER SCISSOR</p>
</nav>
<div class="mb-24 md:mb-0 mt-[14rem] md:mt-0 md:!my-56 flex mx-5 md:mx-0 relative w-full">
<div class="md:ml-32 mt-6 md:mt-12 font-main w-full md:w-2/6 mr-auto">
<div class="mb-2.5 h-[36px] md:h-[60px]">
<p class="text-4xl md:text-6xl text-yellow-400 font-bold drop-shadow-md" id="rpsText">ROCK</p>
</div>
<div class="inline-block w-full">
<p class="text-sm md:text-lg text-gray-50 mb-6">Online rock paper scissor game, create a room or join one to play with your friends!</p>
<div class="inline-flex w-full gap-3 flex-wrap">
<button class="rounded-md px-3 md:px-5 py-1.5 md:py-2 bg-yellow-400 hover:shadow-xl shadow-sky-700 duration-300 ease-in-out font-bold font-main text-stone-800 text-xs md:text-sm w-full md:mx-auto">CREATE ROOM</button>
<button class="rounded-md px-3 md:px-5 py-1.5 md:py-2 bg-yellow-400 hover:shadow-xl shadow-sky-700 duration-300 ease-in-out font-bold font-main text-stone-800 text-xs md:text-sm w-full md:mx-auto">JOIN ROOM</button>
</div>
</div>
</div>
<div class="md:mr-24 absolute md:relative -top-24 sm:-top-28 md:top-0 -right-14 w-[50%] sm:w-[40%] md:w-[30%]">
<img src="./assets/images/rock.png" alt="rockImg" id="rockImg" class="w-[64%] drop-shadow-lg rpsImage !opacity-100" />
<img src="./assets/images/paper.png" alt="paperImg" id="paperImg" class="w-[64%] drop-shadow-lg rpsImage" />
<img src="./assets/images/scissor.png" alt="scissorImg" id="scissorImg" class="w-[64%] drop-shadow-lg rpsImage" />
</div>
</div>
<div class="bg-yellow-500 h-72 mt-60 mx-3 md:mx-44 rounded-xl p-4 mb-44">
<p class="mx-auto text-xl font-bold text-stone-800 font-main text-center drop-shadow-md">ABOUT US</p>
</div>
<script src="./assets/js/rpsHero.js"></script>
</body>
</html>
I am using tailwindcss to create a side menu and I need some active indicator so I need to show the border at end of <li> tag.
Right now its showing like this:
<div class="bg-bgcolor h-screen">
<aside class="w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5">
<ul class="flex flex-col items-center">
<li>
<div class=" text-white bg-black p-2 rounded-2xl">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
stroke="currentColor" class="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</div>
</li>
</ul>
</aside>
</div>
I want to do it like this
You can simple add this few classes:
to <li> tag : pr-2 border-black border-r-2
padding right
border black
border on the right side
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
<div class="bg-bgcolor h-screen">
<aside class="w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5">
<ul class="flex flex-col items-center">
<li class="pr-2 border-black border-r-2">
<div class="text-white bg-black p-2 rounded-2xl">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</div>
</li>
</ul>
</aside>
</div>
</body>
</html>
To apply the right border to the element in the tailwind by using the "border-r-2" class and also more classes with border variants like "border-r-4", "border-r-8" etc.
In your case, you have to apply "border-r-2" to <li> elements like
<li class="border-r-2">
Hear the value "2" indicate border width,
For more information regarding the same here you can find the reference
https://tailwindcss.com/docs/border-width
I know this question gets asked often, I already googled a lot but did not find a solution.
I am trying to place my footer at the bottom of the page all the time, so even when not enough content is in the page.
Here is my app.blade.php code: (I shortened it a bit)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Finanzraketen</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<style>
.hintergrund {
background-image: url('/background.jpeg');
background-size: cover;
}
</style>
</head>
<body class="hintergrund pb-18">
<!-- Navbar goes here -->
<nav class="bg-white shadow-lg bg-gradient-to-r from-green-400 to-blue-500 mb-10 h-20">
<div class="max-w-full mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-0">
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-3">
<ul class="flex items-center pl-2 grid grid-cols-8 gap-2">
<a class="py-2 px-2 font-medium text-black rounded shadow transition text-sm border-2 border-black border-opacity-20 text-center
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100"
href="{{ route('overview') }}">Stellenanzeigen</a>
#auth('web')
<a class="py-2 px-2 font-medium text-black rounded shadow transition text-sm border-2 border-black border-opacity-20 text-center
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100"
href="{{ route('alle_bewerbungen') }}">Bewerbungen</a>
</nav>
#yield('content')
<footer class="bg-gradient-to-r from-green-400 to-blue-500 opacity-60 p-4 relative w-full">
<div class="bg-light py-4">
<div class="container text-center">
<p class="text-muted mb-0 py-2">© 2019 Bootstrapious All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>
I tried tinkering with the tailwind position attributes, so absolute, relative etc. I tried inset-x-0 bottom-0 and nothing works.
I read every SO question I could find about it but nothing seems to work.
Any help appreciated!
give to your main div min-height: 100vh; and then your footer put on the bottom section.
Either use a min-height for your body or main element. Like AkifObaidi suggested - as in:
body{ min-height: 80vh; } /* adapt to your needs - what is the least high page, test it out there */
Or you go with a position:fixed footer - making it stick to the bottom of your viewport, not the page:
footer{ position: fixed; bottom: 0; left: 0; width: 100%; }
I have the search input element and when I view it on mobile it goes beyond the width of the screen. I'm not sure why:
<template>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 ">
<div class="relative">
<input class= "bg-gray-900 text-white rounded-lg px-12 py-2
focus:outline-none focus:bg-white focus:text-gray-500"
placeholder="Search by keywords"/>
</div>
<button>Filters</button>
</section>
</div>
</template>
Any help is appreciated.
EDIT:
I tried to remove styles that set padding:
<template>
<div id="app" class="bg-gray-200 ">
<section class="flex justify-between bg-gray-800 ">
<div class=" ">
<input class= "bg-gray-900 "
placeholder="Search by keywords"/>
</div>
<button>Filters</button>
</section>
</div>
</template>
but it didn't work.
I'm looking to solve it with tailwind classes, without resorting to raw css solutions.
It's still not clear what's setting the width on the input (could simply be user-agent/browser default), but overriding it helps:
.flex input { /* or put a custom class on your input, such as input-flex */
min-width: 0;
}
body {
width: 240px; /* demo only */
}
<link href="https://unpkg.com/tailwindcss#1.0.0/dist/tailwind.min.css" rel="stylesheet"/>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 ">
<input class="bg-gray-900 text-white rounded-lg px-12 py-2
focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
<button>Filters</button>
</section>
</div>
Turns out you can use the w-full fluid width class to similar effect:
body {
width: 240px; /* demo only */
}
<link href="https://unpkg.com/tailwindcss#1.0.0/dist/tailwind.min.css" rel="stylesheet"/>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 ">
<input class="w-full bg-gray-900 text-white rounded-lg px-12 py-2
focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
<button>Filters</button>
</section>
</div>
You could target smaller screens with the sm modifier, as sm:w-full.
The input break is due to the padding you added.
It has 3rem padding-rigth, and when the screen is smaller, the component is larger than the width.
You should decrease the size of your padding.
The ideal would be to decrease the padding, and try to work with a text-indent in css.
.flex input{
text-indent: 10px;
}
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<div id="app" class="bg-gray-200 antialiased">
<section class="grid grid-cols-2 bg-gray-800 px-3 py-3 ">
<div class="relative">
<input class="bg-gray-900 text-white w-full rounded-lg px-3 px-3 py-2
focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
</div>
<div class="text-right">
<button>Filters</button>
</div>
</section>
</div>
You need to handle the responsive variant classes and flex-1 will set the full width for the <input> element for this:
<div>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 col-gap-2">
<input class="block max-w-none sm:max-w-full overflow-auto flex-1 w-auto bg-gray-500 text-white rounded-lg py-2 px-4 focus:outline-none focus:bg-white focus:text-gray-500 placeholder-black " placeholder="Search by keywords"/>
<button class="block text-gray-100">
<span class="hidden md:block">Filters</span>
<span class="md:hidden">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
</svg>
</span>
</button>
</section>
</div>
</div>
Checkout the code here : Example Code and Output
With the help of one of the answers here I found an answer which I believe is a better solution than setting the divs width:
https://play.tailwindcss.com/R474hCHy19
What I did was simply removed the <div class="relative"> so that the input element is now directly inside the section element. And then I added overflow-auto (to enforce all elements to stay within the screen width) and flex-1 (to force input element to fill all available space when the screen width increases) classes to the input element.
<section class="flex justify-between col-gap-4 bg-gray-800 px-2 py-3 ">
<input class= "flex-1 overflow-auto bg-gray-900 text-white px-2
focus:outline-none focus:bg-white focus:text-gray-500"
placeholder="Search by keywords"/>
<button class="px-4 bg-gray-700 ">Filters</button>
</section>
TailwindCSS Search Input Group Example:
CodePen: Example
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex grid grid-cols-6 place-content-center min-h-screen bg-gray-50">
<div class="col-start-2 col-span-4">
<span class="z-10 leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-2 py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</span>
<div class="flex justify-between">
<input type="search" name="search" id="search" placeholder="Search Item..." class="px-5 text-md border-gray-400 rounded-l text-lg pl-11 py-1 shadow-sm float-left w-full border" />
<button type="submit" class="w-24 flex items-center justify-center bg-gray-100 text-lg py-1 border-t border-r border-b border-gray-400 rounded-r text-gray-600">Search</button>
</div>
</div>
</div>
I'm trying to vertical center the form into my app.
Into tailwind.config.js , I've set the h-screen to 100vh (without header and footer height) :
module.exports = {
purge: [],
theme: {
minHeight: {
screen: 'calc(100vh - 296px)',
},
fontFamily: {
title: ['Righteous', 'sans-serif'],
body: ['Montserrat', 'sans-serif'],
},
},
variants: {},
plugins: [],
}
It works perfectly, but when I put h-full into my child (to be 100% of parent), the content don't dapat the height to be vertically center.
You can see the code in my screenshots below , the child is set to 100% but don't expend the div..
What is wrong ? Thanks
Screens here :
https://imgur.com/a/dT2nW7B
Edit (html code):
<section class="container mx-auto h-full px-6 p-10">
<div class="flex items-center flex-wrap">
<div class="w-full md:w-1/2">
<img src="images/illustrations/contact.svg" alt="Reporting" />
</div>
<div class="w-full md:w-1/2 pl-10">
<form class="w-full max-w-lg">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-first-name">
Prénom
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-first-name" type="text" placeholder="Jack">
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-last-name">
Nom
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-last-name" type="text" placeholder="Pot">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-password">
E-mail
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="email" type="email" placeholder="jackpot#exemple.fr">
<p class="text-gray-600 text-xs italic">Some tips - as long as needed</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-password">
Message
</label>
<textarea
class=" no-resize appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 h-48 resize-none"
id="message" placeholder="Je vous contacte pour ..."></textarea>
<p class="text-gray-600 text-xs italic">Re-size can be disabled by set by resize-none / resize-y
/
resize-x
/ resize</p>
</div>
</div>
<div class="md:flex md:items-center">
<div class="md:w-1/3">
<button
class="shadow bg-blue-500 hover:bg-white hover:text-blue-500 rounded-full hover:border-blue-500 border border-blue-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
type="button">
Envoyer
</button>
</div>
<div class="md:w-2/3"></div>
</div>
</form>
</div>
</div>
</section>
this code extends (laravel blade) this layout :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dico des Mots</title>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" type="text/css" href="css/app.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
</head>
<body class="font-body">
#include('components.navbar')
<main id="app" class="min-h-screen">
#yield('content')
</main>
#include('components.footer')
</body>
</html>
You should use h-screen for this. See the working model here jsfiddle
<section class="container mx-auto"> // remove h-full and padding
<div class="flex items-center h-screen flex-wrap"> // add h-screen
Tip:
h-full is 100% (relative to parent)
h-screen is 100vh (relative to screen)