how can i use tailwindcss properties directly in style of html property?
function App() {
return (
<div style={'bg-gray-400 w-full h-screen p-10'}>
<SideMenu />
</div>
);
}
export default App;
the above example is what i tried but style={'bg-gray-400 w-full h-screen p-10'} no works, i would like to use it inside style props or any js custom component to inject/modify the html.
Note: i know normally we use className to use tailwind css properties, but there are certains use cases when we have to use style properties to add css . framer-motion's variants is an example.
You should be able to put the tailwind styles as a class, they don't need to be in the style tag. If it's not working I would make a whitelist somewhere that they can be compiled before this code executes.
<div class='bg-gray-400 w-full h-screen p-10'>
<SideMenu />
</div>
Related
I am trying to learn Tailwind CSS and generally working better with CSS. In this case, I am trying to make my search icon appear inside of my search input field.
I found some tutorials online but they mostly use plain CSS.
Is there any simple way to achieve this using Tailwind?
import React from "react";
import { FaSearch } from "react-icons/fa";
const SearchBar = () => {
return (
<div>
<input className="bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56" />
<FaSearch />
</div>
I also tried to wrap the input elment in a <div> and <form> tags, but none of those worked.
This should do it:
<div className='flex items-center'>
<input className='bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56' />
<SearchIcon className='-ml-9' />
</div>
Docs:
align items | MDN
using negative margins | MDN
Now i want to remove the previous and next and also I want to style the slider which is shown as if it is very old , it's not modern
Acutally i want it to look something like how the react-bootstrap claims their carousel looks like :
Like this:
My code snippet is as follows
<Carousel pause="hover">
{product.images &&
product.images.map((image) => (
<Carousel.Item key={image.public_id}>
<img
className="d-block w-100"
src={image.url}
alt={product.title}
/>
</Carousel.Item>
))}
</Carousel>
I think the problem comes from your css. Did you put the bootstrap one ?
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';
and I suggest "antd" instead of bootstrap (https://ant.design/components/carousel/)
I have this rails reactjs app that if I put this line in the form
<input type='submit'/>
It will create for me a blue button. I have just installed Tailwind and if I input this line with tailwind class, it does not have any effect on the button design.
<input type='submit'
className='bg-red-500 text-white font-bold py-2 px-4 rounded-full'/>
Is there a way that I can override this global settings like putting !important inline in the className?
Any help would be greatly appreciated.
You can add a ! character before the class name and that should do the job
Example:
<input type='submit'
className='!bg-red-500 text-white font-bold py-2 px-4 rounded-full'/>
Docs: https://v2.tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier
Yes, You can config tailwind.config.js if you add this
module.exports = {
important: true,
}
this will generate all tailwind classes as !important
read more here
i'm currently working on rendering a set of elemens using map as follow:
<div className="wrapperScoring">
{TOPUPSCORER.map((item, i) => (
<div key={i + 1} className="flexi">
<ShowScore/>
</div>
))}
</div>
the class "flexi" should be use to control how Showscore is render since the width is control by a div class automatically add.
screenshoot of Dev tool.
The flexi class is removed automatically, therefore the css style isn't applied. I would like the flexi class to use the whole properties of the wrapperScoring class.
do someone know why?
thanks
As #code mentioned, your code appears invalid.
Try:
<div className="wrapperScoring">
{TOPDOWNSCORER.map((item, i) => (
<div key={i + 1} className="flexi">
<ShowScore/>
</div>
))}
</div>
I would like to apply the style to Formik's tag for react. How can I do?
<ErrorMessage name="email"></ErrorMessage>
I try with component={Custom} but don't work.
I use Tailwindcss.
Thanks if you want to help me.
To add a class to a React component, use className="theClass". Formik's ErrorMessage.component property takes a value of a custom component, e.g. component={Custom} as you have, or it can take an HTML container, e.g. component="div". Assuming this is not a Tailwind port to React, "div" is appropriate. Putting these two together, you can apply Tailwind-style invalid message styling thus:
<ErrorMessage name="emailAddress" component="div" className="text-red-500 text-xs italic" />
<ErrorMessage name="field name" component="div" className="some classes" />
add "component" field for ErrorMessage component
This method worked for me in react..
<ErrorMessage name='email' render={msg => <div className="error">{msg}</div>}/>
then, call that className in the CSS file
.error{
color: red;
}