Incompatibility with IE11, so you can tell the person in charge “sorry boss it’s out of my hands, blame Tailwind”Įven though Tailwind CSS v2.0 is a new major version, we’ve worked really hard to minimize significant breaking changes, especially ones that would force you to edit tons of your templates.Default transition duration and easing curve, so you only have to add 17 classes to make a button instead of 19.Group-hover and focus-within by default, because you were enabling them on every project anyways.Extend variants, so you can enable extra variants like focus-visible without redeclaring the entire list or thinking about order.New text overflow utilities, for controlling things more precisely than you can with truncate alone.Use with anything, including responsive, hover, focus, and other variants.Extended spacing, typography, and opacity scales, for fine-tuning things at the micro level, making an even bigger impact with huge headlines, and for when opacity-25 wasn’t enough and opacity-50 was too much.Default line-heights per font-size, because if we can’t make using a 1.5 line-height with a 48px font illegal we should at least make it not the default.Utility-friendly form styles, a new form reset that makes it easy to customize form elements (even checkboxes) with just utility classes.New outline ring utilities, which are almost as good as if they would just make outline-radius a real thing.Extra wide 2XL breakpoint, for designing at 1536px and above.Dark mode support, making it easier than ever to dynamically change your design when dark mode is enabled.All-new color palette, featuring 220 total colors and a new workflow for building your own color schemes.Right now I’m using padding to push that phrase to the end of the flexbox, but I thought I should be able to set it there in the flexbox.Tailwind CSS v2.0 is the first major update ever, including: The first child element is styled as thus… it kicks that element out to the right (horizontally) not to the end of the stretched flexbox (vertically) when the elements are stacked in columns?Įxample: “Check us out at Retro booth B24-25” on Two child elements stretched and both used as flexbox wrappers themselves. Here’s a flexbox niggle I’m struggling with: Works: Text is in, but min-width set on flex child.Broken: Text is in an inside flex child.Works: Text is directly inside flex child.See the Pen Thing you gotta know about flexbox by Chris Coyier ( on CodePen. Safari was shrinking/truncating even without the min-width (against spec, I think). I found this behavior consistent across Chrome, Opera, and Firefox. subtitle has a width of 100%, the min-width: auto calculation that flexbox makes says that its container should be larger than we want. He writes:Īccording to a draft spec, the above text should not fully collapse when the flex container is resized down. When I first ran into this problem, I found the solution via a Pen by AJ Foster. Without this, the flex child containing the other text elements won’t narrow past the “implied width” of those text elements. } The solution is min-width: 0 on the flex child So need to truncate there for it to work */ The problem comes up when there are child elements, like: Child elements (of the flex child) are the issueĬonfusing things a bit… if the text at hand is directly within the flex child, things work fine: Not only might this prevent the narrowing of a container, it might blow a container out super wide. The potential problem Animated GIF showing the non-wrapping text preventing the flex parent from getting narrower. What we want Animated GIF showing the text truncating as the flex child gets narrower. You just need to use a non-flexbox property/value to do it. Flexbox is supposed to be helping make layout easier!įortunately, there is a (standardized) solution. The unthinkable! The layout breaks and forces the entire flex parent element too wide. You don’t want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). Situation: you have a single line of text in a flex child element.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |