I am trying to implement navigation with Tailwind but, doesn't result as expected
<nav class="bg-gray-100">
<div class="flex flex-row justify-between w-full">
<div>
<div>Logo</div>
<div>Primary Nav</div>
</div>
<div>Menu</div>
</div>
</nav>
This is the result:
This is the result I want:
It seems that you have to regenerate your css. In the development process, however, it is recommended to always work with the whole TailwindCSS file. For the production you can purge unnecessary css.
Means:
npm run dev or start npm run watch.
The correct way of using this would be,
<nav class="bg-gray-100">
<div class="flex justify-between">
// your html
</div>
</nav>
Check the docs here
Related
I have the following problem with Tailwind CSS and the truncate helper.
The code for the following image:
<div class="w-full flex items-center flex-wrap gap-y-2">
<!-- The problem is here. This is correctly cut if longer than max-w-xs, -->
<!-- but the shortest words get cut even tho they have space to grow. -->
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">
Audience
</h1>
<!-- Middle nav div -->
<div class="mr-auto">
... nav here
</div>
<!-- Right side buttons -->
<div class="flex flex-wrap">
... buttons
</div>
</div>
Removing the flex class from the parent fixes the truncate issue, but I obviously need the flex to put the 3 elements inline and wrap in smaller screens.
Any ideas? Thanks!
I tested this on my system and the Audience doesn't get truncated. Maybe you have a flex or grid above this one that's effecting it?
<div class="w-full flex items-center flex-wrap gap-y-2">
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">Audience</h1>
<div class="mr-auto">... nav here</div>
<div class="flex flex-wrap">... buttons</div>
</div>
I've been chasing down a problem, getting blur and mix to work well together in Tailwind, so I can have a Navbar component look good regardless of the color of the underlying content.
That is now largely solved for the text, but I have an issue where an anchor element styled as a button is "mixing" when I don't want it to do so.
This is the mix, over a dark background:
That green is what the button should always look like (actually, the text should be white, but that's a different problem). However, when over a light background, it turns pink (or mauve, or something):
The structure looks like this:
<div className="backdrop-blur sticky top-0 left-0">
<header className="backdrop-blur z-[1100] w-full mix-blend-difference bg-black">
<div className="mx-auto">
<div className="py-4 px-8 mx-4">
<nav>
<a href="/">
<div className="text-white">My Site</div>
</a>
<ul className="flex justify-between ml-auto">
<li className="text-white">Products</li>
<li> // I want this to not mix
<a
className="bg-emerald-700 hover:bg-emerald-600 text-white py-2 px-4 rounded-sm shadow-lg shadow-emerald-800"
href="/"
>
About
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
Basically, I need some deeply nested element inside a container that is using mix-blend-<whatever> to ignore the mix.
I've tried applying mix-blend-normal to the li element, but no effect.
Any idea how to do this?
CodeSandbox is here.
I am using React with Tailwind CSS and want to conditionally render/reorder components.
Let say we want to show this order when mobile size
<div1 />
<div2 />
<div3 />
but desktop size
<div3 />
<div1 />
<div2 />
In tailwind css we can specify screen size border like sm (minWidth:375px), md (minWidth:415px), lg (minWidth:1200px) then apply css styling but how can we use this screen size for React component itself rendering condition?
I think checking this documentation for the order of the items could be helpful. You could try doing something like:
<div className="flex flex-col">
<div className="lg:order-last">01</div>
<div>02</div>
<div>03</div>
</div>
Grid is pretty useful for creating more complex logic that is also easy to manage. Consider the following, which has 3 different orders defined:
<div class="grid grid-rows-3">
<div class="md:row-start-2">1</div>
<div class="lg:row-start-1">2</div>
<div class="md:row-start-1 lg:row-start-auto">3</div>
</div>
Use the tailwind's order class
<div class="flex justify-between">
<div class="h-40 w-60 bg-blue-600 text-center text-8xl">Div 1</div>
<div class="h-40 w-60 bg-blue-600 text-center text-8xl">Div 2</div>
<div class="h-40 w-60 bg-blue-600 text-center text-8xl lg:order-first">Div 3</div>
</div>
Output in small screen:
Output in large screen:
Code link : tailwind-play
I want to do this:
But my image stay in right side of div, like that:
Soo I don't know why it's happening, that's my code:
<div class="flex h-full justify-center items-center">
<div>
<h2 class="font-bold text-2xl text-gray-700">Page Not Found 🕵🏻♀️</h2>
<h3 class="mt-3 text-gray-500">Oops! 😖 The requested URL was not found on this server.</h3>
<div class="lg:grid justify-center mt-4">
<BreezeButton
class="
inline-table
w-full
items-center
bg-purple-600
text-white text-xs
font-bold
hover:bg-purple-600 hover:shadow-purple
mt-3
"
:href="route('dashboard')"
>
Back to home
</BreezeButton>
</div>
</div>
<div>
<img src="../../Assets/Img/error404.svg" alt="" />
</div>
</div>
You flexed the wrapper div so it seems to have placed the items in a row by default. Use "flex-col" alongside that in order to place your items in a column.
As #xavi3r mentioned you need to use flex-col, as a reminder, Tailwind uses a mobile-first breakpoint, so you need to set one of the breakpoints to change it to row for large devices as follows lg:flex-row or any other breakpoint!!
In the doc and in the issues of Bootstrap v4 (here), I can't see any plan on supporting flex-grow, something with a syntax like this for example:
<div class="d-flex">
<div class="flex-grow">
I use all the space left
</div>
<div>
I am a small text on the right
</div>
</div>
Here a sample of the layout I'd like to create:
The export button is always on the right, and the navigation button takes all the space left and therefore looks clean.
Is it possible to build such a layout already? Maybe it is not advised? Of course, there are workarounds using CSS, but I am looking for a clean solution, ideally using Bootstrap class names only to guarantee consistency.
use .col for a simple flex-grow: 1;. It's described here https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col">
I use all the space left
</div>
<div class="col-sm col-sm-auto">
I am a small text on the right
</div>
</div>
</div>
For anyone comming here from a google search (like me).
Since Bootstrap v 4.1 there are flex-grow and flex-shrink utilities, as the documentation says you can use them like this:
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
Here is a little example
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-row">
<div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
Grow 1
</div>
<div class="d-flex flex-grow-0 text-white justify-content-center bg-success">
Grow 0
</div>
<div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
Grow 1
</div>
</div>
I created a class for this, I checked the Bootstrap docs and found nothing about it.
.flex-2 { flex-grow: 2 }
col-auto takes the remaining space but if you have more than one row, so space won't be distributed equally. That's why flex-grow does the trick.