Develop Reference

Tailwind background gradient transition

Does Tailwind CSS allow transitions of gradients i.e. changing the 'from' or 'to' color so that the gradient of either color changes by a transition?
What I have tried:
<button class="transition duration-500 ease-in-out bg-gradient-to-t from-black to-white hover:to-red-500">
Hover me
</button>

As chojinicki already pointed out, it is not possible without any workarounds, especially without adding extensions to your config file. Because I needed the exact same for my project, I created my own workaround for it.
You have to double the background size of the element and transition the background position using transition-all to get the desired effect. Note that you require the via- gradient stop.
Tailwind Play: https://play.tailwindcss.com/XFQDCOKQ8L
<button className="transition-all duration-500 bg-gradient-to-t to-white via-black from-red-500 bg-size-200 bg-pos-0 hover:bg-pos-100">
Hover me
</button>
tailwind.config.js
module.exports = {
// ...
theme: {
extend: {
backgroundSize: {
'size-200': '200% 200%',
},
backgroundPosition: {
'pos-0': '0% 0%',
'pos-100': '100% 100%',
},
},
}
};
Unfortunately, it is very limited and doesn't exactly work with your exact example provided, however this is the closest you can get.

Short answer No, but not because of lack this functionality in Tailwind but rather in CSS itself. Reason for that is probably performance issues - browser engine would have to render separate gradient for every frame of animation.
This is common question: Use CSS3 transitions with gradient backgrounds
You can only try to use some workaround (depends what exactly effect you expect) like background position, opacity etc (examples in linked question and plenty tutorials online). If something works for you - just extract this as Tailwind utility if you need this in multiple places.
https://tailwindcss.com/docs/adding-new-utilities

Design breaking while using flex with dimension in react native

Using import {dimension} from 'react-native' and flex:1 at the same time in css style and for some devices design got broken when there is input field present inside the js. CSS is so simple that's it should not be broken
MainContainer: {
height : Dimensions.get('window').height,
width : Dimensions.get('window').width,
backgroundColor: '#fff',
flex: 1
}
and moreover there is slight 1 px blank space for some android devices.

Earlier when I have started coding with react-native I have faced the same issue while using the same css style.
You should read the documentation first carefully to get idea about flex.
flex will define how your items are going to “fight” over the
available space along your primary axis. Most of the time you will
want your app container to be flex:1 to take all of the screen
height. Space will be divided according to each element flex property.
In the following example the red, yellow and the green views are all
children in the container view that got flex:1. The red view got
flex:1 , the yellow view got flex:2 and the green view got
flex:3 . 1+2+3=6 which means that red view will get 1/6 of the
space, the yellow 2/6 of the space and the red 3/6 of the space. I
think you got it…
To get more clear idea about the above lines please refer to this medium.com's post
And basically we don't use dimension while developing app using react-native .
MainContainer: {
height: '100%',
width: '100%',
backgroundColor: '#fff',
}
This will be enough to design the main container. Also If you are using Input field then I will suggest to use scrollView
I think My answer will help you.

ag-grid how do I set the floating filter height

Anyone know how to set the floating filter height?
I have looked through all the documentation and I can't see anything. The next thing I am looking at is tweaking the theme. But so far no luck there either.
I looked at the css in dev tools and found that it didn't have a class I could style. The tag has a manual style applied to it.
<div class="ag-header-row" role="presentation"
style="top: 30px;height: 56px;width: 1603px;">
So I don't believe I can't hack it with a class or a template override. Anyone else know how to do this?

This can be achieved using gridOptions.floatingFiltersHeight config.
Here is an example from ag grid documentation.
As per docs-
floatingFiltersHeight - The height for the row containing the floating
filters. If not specified the default is 20px.

we can apply directly apply in <AgGridReact> tag, floatingFiltersHeight={20} as property in the following way
<AgGridReact
rowStyle={rowStyle}
ref={gridRef}
columnDefs={columnDefs}
rowData={rowData}
headerHeight={20}
rowHeight={20}
floatingFiltersHeight={20} // floatingFiltersHeight applied
defaultColDef={defaultColDef}
onGridReady={onGridReady}
onFilterChanged={()=> setRow(gridRef.current.gridOptions.api.getDisplayedRowCount())}
></AgGridReact>

How to add a custom image/icon in ANTD Design menu?

Using this example: https://ant.design/components/layout/#components-layout-demo-side
How can I add a custom image or icon instead of the default icons.
I tried:
<Menu.Item to="/" key="2">
<img className="ant-menu-item" src={require('image.png')} />
<span>Shopify</span>
<Link to="/shopify">Home</Link>
</Menu.Item>
But that does not look good or does not respect the collapsed behaviour

I tried several different ways of creating custom icons, and the one that was easiest and worked best was to use the component property of the antd Icon component. Just give it a functional component that returns whatever image you want to use:
<Icon component={() => (<img src="/image.svg" />)} />
This seems to work well within menu items and submenus, except that the icons don't line up perfectly with the menu text like the built-in icons do. I ended up adding transform: translateY(-3px) to the CSS to compensate for this (might depend on the image you use).
On the other hand, the official solution (for SVG images only) is to use the #svgr/webpack plugin to turn the SVG file into a component. This may have some advantages as far as layout and coloring (antd icons seem to prefer actual <svg> elements over <img> elements with SVG image files). But I'm not sure because I didn't go to the trouble of setting it up.

<Menu.Item to="/" key="2">
<img className="ant-menu-item" src=="{{ "image.png" | asset_url }}"/>
<span>Shopify</span>
<Link to="/shopify">Home</Link>
</Menu.Item>

I hope this might be work.
you need handle separate css file and put it this code
.ant-menu-item{background-image: url("theme5.jpg");}

icon:<img src="/static/icons/BH_tainan.svg" height={20} style={{margin:"0 12px 0 0" ,paddingTop:10 ,float:"left"}}/>,
need float:"left" in your style

A bit of an old question, but I thought I'd post another solution here for those not wanting to go the webpack route like the docs recommend. You can simply create your own SVG component and then pass it to the antd icon component.
Something like this
// Icons.tsx
export const MyIcon = () => {
return (
<svg>
// svg path data
</svg>
);
};
Then
// app.tsx
import Icon from "#ant-design/icons";
import { MyIcon } from "./Icons";
const App = () => {
return (
<Icon component={MyIcon} />
)
}
I fiddled with this a little bit in a sandbox, and it seems to work just fine. I was using antd 4.23.3 for reference. Didn't test it a huge amount so there might be some style adjusting needed, not sure.

changing font size of material-ui buttons, and having the buttons scale?

I seem to be having an issue with changing the font sizes on Material-UI's (for React) RaisedButton and having the button itself scale properly with it.
<RaisedButton
label={<span className="buttonText">Log in Here</span>}
/>
CSS:
.buttonText {
font-size: 63px;
}
The text size changes but the button itself doesn't scale with it. Does anyone know the proper solution to this? I want to button to scale with the text size.

The problem is Material-UI inlines all of the styles for their components, so if you try to override them with CSS selectors it doesn't usually work quite right. Instead, try overriding whatever inline styles you don't want using the style property directly on the component. It would look something like this:
<RaisedButton style={{ fontSize: '63px' }} label='Log in Here' />
And if it still doesn't look quite right, just inspect all the generated inline styles on that component and see what you'd like to change, then just add that to the style object as well.
http://www.material-ui.com/#/components/raised-button

Use the labelStyle prop to override the inline style for the element
http://www.material-ui.com/#/components/raised-button
<RaisedButton
label="Button"
labelStyle={{ fontSize: '63px'}}
/>

<RaisedButton
label="Label"
labelStyle={{ fontSize: 15 }}
/>

It needs to be added with lineHeight as a style prop for even spacing:
<RaisedButton style={{ lineHeight: "100px" }} label="lineHeight in style" />
Here's a fiddle with all of the different solutions: https://jsfiddle.net/botbotdotdot/kfph5cc2/
Cheers

You can use classes props to override the default css styles applied to every material-ui component. You can find out more in this youtube video:
https://www.youtube.com/watch?v=mu8-u7V7Z8s&feature=emb_logo

Use font-size unit as Percent (%) or em. For e.g font-size:12%