I have some search params above a table. I want everything to be on one line with the search and filter fields on the left and button to create new pulled all the way to the right. Any thoughts on how to do this? Here is a tailwind play of what I have so far.
https://play.tailwindcss.com/fHMprfAuNW
You can use flex class on your form "flex flex-col md:flex-row items-center"
On the children items use :
flex-1 for your reserch bar to get all the freespace.
flex-none for you other items to get auto width
Add some media queries to get full width (breakpoint in this example is md)
https://play.tailwindcss.com/oQe2L4Kt8s
I have a semi-transparent sidebar with some background filters, on a mostly dark background
When scrolling further down, the text gets on the white section and gets really hard to read
Is it possible to dynamically change the text color to be dark when the contrast between the text and anything under it is too low? If not through only Tailwind/normal CSS, then how?
Its not a perfect fix, but I had a similar issue and I was able to use Tailwind's Blend Modes:
https://tailwindcss.com/docs/mix-blend-mode
<div class="bg-gray-400 mix-blend-difference" />
What is the difference between Box and Grid in Material-UI
When to use each one
I'm confused by that
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
How it works
The grid system is implemented with the Grid component:
It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element. Items have padding to create the spacing between individual items. There are five grid breakpoints: xs, sm, md, lg, and xl.
A Box is just that, a box. It's an element wrapped around its content which by itself contains no styling rules nor has any default effects on the visual output. But it's a place to put styling rules as needed. It doesn't offer any real functionality, just a placeholder for controlling the styles in the hierarchical markup structure.
I often think of it as semantically similar to the JSX empty element:
<>
Some elements here
</>
But just with some Material UI capabilities:
<Box component="span" m={1}>
<Button />
</Box>
In short:
Box is a more powerful, convenient, and potential replacement for div. You can change it to any HTML elements (e.g. span), but most of the time you will use it as div replacement.
Grid is the syntactic sugar of Grid Layout.
Use Box when you want to group several items and control how they look on the page. For example, you can take several paragraphs and use a box to put a border around them.
Use Grid for setting up a grid layout system for organizing content in columns on the page. Designers will divide the page into 12 columns with the idea that it is more visually appealing to have content aligned along each column or group of columns. Here is an article that provides much better detail on the subject: https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout
Box
The Box component serves as a wrapper component for most of the CSS utility needs. The Box component packages all the style functions that are exposed in #material-ui/system . It's created using the styled() function of #material-ui/core/styles
Grid
GridBox is the low-level representation of Grid. Except for low-level notebook expression manipulation, GridBox should not need to be used directly. In a notebook, columns of a GridBox can be added using and rows using . or a menu item can be used to start building a GridBox.
Box
The Box component serves as a wrapper component for most of the CSS utility needs.
The Box component wraps your component. It creates a new DOM element, a <div> by default that can be changed with the component property.
Let's say you want to use a <span> instead:
<Box component="span" m={1}>
<Button />
</Box>
This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way.
Grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
How it works
The grid system is implemented with the Grid component:
It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Items have padding to create the spacing between individual items.
There are five grid breakpoints: xs, sm, md, lg, and xl.
Further Reading
Docs on Box & Grid
Is there any chance to change it or I must use mobile-first approach with Tailwind ?
Go to your tailwind.js config file, look for the screens section. By default you will find the list of screen sizes like this: 'sm': '576px'. Tailwind uses min-width by default, you can change those values to 'sm': {'max':'576px'} to force max-width.
Tailwind generates a corresponding max-* modifier for each breakpoint. For example:
<h1 class="text-green-500 max-md:text-red-500">Test</h1>
Here the green color will apply to all screen sizes and the red color will overwrite it only for screens that are smaller than the medium breakpoint (768px).
More info: https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range
I am new with bootstrap.
While reading documentation I noticed that it is posible to set a class for a default invisible object to make it visible for some breakpoints like visible-xs, visible-md that is OK.
But what if I want to hide a default visible object for only one breakpoint. Do I have to add all classes visible-sm visible-md visible-lg classes to hide it in xs screens? Or is there any easy way like invisible-xs?
Thank you.
.hidden-xs
will hide your content for all divices under 768px resolution.
check out the table at bootstrap website http://getbootstrap.com/css/#responsive-utilities