On site with tailwindcss 3.1 I define class
.view_image {
#apply border-2 border-gray-300 p-1 rounded-lg w-64;
height: auto;
}
and it is looking good for most of images, but if image is small (less then w-64)
the image looks ugly.
If there is a way for this image if it is less then w-64 to show it in its original size ?
Thanks in advance!
Change w-64 into max-w-[16rem] - it is max-width property. This way images will stretch to its original size, but if their width more than 16rem, it will stop stretching and has width of 16rem. Tailwind has not this value for Tailwind, as you can see here, so either use arbitrary value max-w-[16rem] or extend configuration file
DEMO
Related
I'm using Tailwind CSS to design my website and I keep running into an issue while creating my layout: the page is always wider and taller than the size of the screen. If you've ever had this happen before, you know how annoying it is.
I think this is because I added a navbar with fixed positioning and h-content. In any case, my main wrapper div is supposed to wrap the entire page, fit the screen without creating any scrollbars, and have m-8 margins on all sides, while still fitting the screen.
I'm finding that the height properties (h-full, h-content, h-screen) and width properties (w-full, w-content, w-screen) can be confusing at times. Especially when I start adding other divs to the page to create "sections" with specified heights and widths.
Does anyone have a good tutorial or article on how these properties work? I must not be understanding them properly.
I'm using React and Next.js. On the homepage, I am returning something like this:
<div className="w-screen h-screen">
{/* This nav is applied to all pages through the pages/.app */}
<Navbar className="w-full h-content" />
<div className="flex w-full h-full m-8">
<section className="w-1/2" />
<section className="w/1/2" />
</div>
</div>
Any resources to help me understand how to build layouts using Tailwind would help tremendously.
You need to add this in global css file (probably styles/global.css) before you can use w-full and h-full as they depend on container element's width and height.
In case of a page the container is most probably a div being used to render react. And that div depends on body, which depends on html tag.
html, body, #ID_OF_THE_CONTAINER_DIV_IN_WHICH_REACT_IS_BEING_RENDERED {
width:100%;
height:100%;
}
Also checkout https://nextjs.org/learn/basics/assets-metadata-css/global-styles
The video below really explains in detail how to create this kind of layout:
https://www.youtube.com/watch?v=XQ1m4r3BqaY&ab_channel=WebBlocksApp
And this is the example I created. pay attention to the CSS tab. there are extra styles needed for this to work properly. Also notice I added extra height on purpose, but if you remove the class the content will still wrap the whole available space.
I'm (very) new to Tailwind and have encountered a problem that is driving me crazy. I'm looking to place an image in a footer. At desktop size (1024px), the image needs to sit to the left of the footer content and then on smaller screens, the logo needs to be centered, pretty standard stuff. As with non-tailwind css, I'm using margin to control this and as guided in the documentation, my default setup is in mobile-first so the horizontal margin is set to auto with the following to put the image in the middle with the aim for it to be set to the left when being viewed at a bigger resolution:
<img alt="..." :src="logo" class="mx-auto"/>
The key thing here is mx-auto which centers the image. As per the documentation, I then want to remove the auto-positioning so I add the following to adjust the margin once the screen is at a bigger resolution.
<img alt="..." :src="logo" class="mx-auto lg:mx-0"/>
However, when I run this the image just stays positioned in the center of the element when at full desktop resolution. I've tried using ml-0 just in case there was a problem overriding the original setting but in the inspector, the media query doesn't even attempt to override.
I'm building from a template that does similar things to what I want elsewhere in the project however when I copy that code over, it works until I make a change to the setting (changing a -16 to a -20 etc...) which is also odd. I'm not sure if I've messed something up with my configuration or am just missing something basic but any pointers would be really appreciated.
Just in case its something to do with the container the image is in, here's the wider container:
<div class="container mx-auto px-4">
<div class="flex flex-wrap text-center lg:text-left">
<div class="w-full lg:w-6/12 px-4">
<img alt="..." :src="logo" class="max-w-250-px pb-4 mx-auto lg:mx-0"/>
</div>
</div>
</div>
Maybe something to do with the flex?
It is max-w-[250px] not max-w-250-px
Why not use the flex container you already have to get it done?
What you want is this: https://play.tailwindcss.com/wgHwT7KMJ5
I want to use Tailwind Css to maintain a perfect circle for my icon avatars shown below for both large and small screens.
I do know that I can use a gradient-radial like this:
.avatar{
background: radial-gradient(circle closest-side,
yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);
color: #db0100;
}
But I scrictly want to use Tailwind. Is it possible? Thanks.
You can do that rather easy with Tailwind. You need to create a div with rounded-full, grow-0 and shrink-0. Besides this, you need to set a width and height. The setting the grow and shrink to 0 means that the div will not resize, even if the browser needs more space for other elements.
<div class="w-11 h-11 shrink-0 grow-0 rounded-full bg-green-300 text-green-700">Content</div>
I have made an example for you in Tailwind Play.
Hope this helps.
A background gradient won't actually have any effect on the size or shape of an element.
In order to maintain a perfect circle you first need to make an element a square and then use something like border radius to round the corners.
The most recent version of Tailwind CSS has a class to utilize the "aspect-ratio" property.
(More on that here: https://tailwindcss.com/docs/aspect-ratio )
Your HTML might look something like this:
<div class="avatar aspect-square rounded-full"></div>
"aspect-square" will make the element always be a square.
"rounded-full" will use border-radius to make the square a circle.
Both of these classes are available in Tailwind CSS.
If you haven't already, your icon avatars may need a defined height or width to make sure they match each other in size.
I have menu that I would like to be positioned to left of the screen when screen is small (let say before SM) and positioned to right when bigger.
<MenuItems
class="
absolute left-2 top-24 w-full mt-8
sm:right-2 sm:top-0 sm:w-max
"
>
Settings for right-* works as expected when applied alone, however when prefixed with breakpoint sm left-* is taking priority.
Is it a way to use something that would cancel left on bigger screens? like sm:left-none
Yes auto can be used to cancel positioning values. So use sm:left-auto.
Another (worse) option would be to use right-full on smaller screens. But then your element would be offscreen. Though you could transform it back like this: right-full translate-x-full sm:right-0 sm:translate-x-0
I am trying to get the height of the div to h-2 and on medium is set a class with height animation.
The problem is that tailwindcss still uses the h-20 on mobile while h-2 should be used.
any idea why ?
here is the div in question :
<div className={`h-2 md:flex w-full text-white fixed bg-white mt-1 ${scrolling ? 'md:animationNav h-16' : 'md:animationBasisNav h-20'} dark:bg-gray-400`}></div>
The problem is that tailwindcss still uses the h-20 on mobile while h-2 should be used.
That's because you are using the class h-20 (applies the 20 height in all screen sizes) instead of md:h-20 (applies the 20 height in screen size md and upwards).
Similarly, you might want to change h-16 to md:h-16.
You need to apply the md: prefix to all classes that you want to apply only in screen size md and upwards. Similarly for all other breakpoint prefixes. All classes are mobile-first by default (and "by default" means the absence of a breakpoint prefix). See the Responsive Design section on Tailwind CSS docs.
My solution
Hey, maybe you want to try with this:
<div className={`h-2 md:flex w-full text-white fixed bg-white mt-1 ${scrolling ? 'md:animationNav md:h-16' : 'md:animationBasisNav md:h-20'} dark:bg-gray-400`}></div>
Now you are defining that the default height is 2, while in medium devices is 20.
Use this pattern in all your classes.
First: Define the height in mobile
Second: Add the classes for larger screen sizes.