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
Related
I'm learning Tailwind CSS and Svelte, and to practice my skills I decided to make a widget layout with different components. I'm trying to make the grid's item's height flexible - like on the DaisyUI homepage under the components preview - so that other components can fit immediately beneath it. I've tried using flexbox but that lead to the same outcome. My code so far:
App.svelte:
<script>
import './app.css'
import Temp from './components/Temp.svelte'
import Login from './components/Login.svelte'
import Quiz from './components/Quiz.svelte'
import ShoppingList from './components/ShoppingList.svelte'
import Quote from './components/Quote.svelte'
import Date from './components/Date.svelte'
</script>
<main class="w-[calc(100vw - 120px)] max-w-[calc(100vw - 120px)] h-screen grid grid-flow-row grid-cols-5 gap-5 m-5">
<Temp />
<Login />
<Quiz />
<ShoppingList />
<Quote />
<Date />
</main>
All of the other components follow the same simple layout:
<script>
import '../app.css'
</script>
<section class="max-w-xs min-w-xs bg-slate-50 rounded-xl p-5 h-fit">
<!-- other HTML here -->
</section>
Any help or tips would be appreciated!
I'm new to Tailwind, and I'm not sure if there's a way to solve this edge case. Here is the scenario:
We have different variants listed on the product page(for example different color tags). When you hover we are showing a faded border around the tag, and when you select the variant, the tag becomes active, and its border should get darker.
The problem:
Even when the user clicks on the tag to make it active, the user still sees hover still rather than the 'active' style.
These are the classes I'm using for now
<Tag
clssName={`flex rounded border border-gray-200 bg-white hover:border-gray-400 ${active && 'border-gray-700'}`}
...prop
/>
Now the question is if there's a way to override the hover styles on when the item is active. One way could be to remove the hover class when the item is active, but I was wording if there is a Tailwind way to fix it.
You can add different styles for active and non-active variants.
<Tag
clssName={`flex rounded border bg-white ${active && 'border-gray-700 hover:border-black'}`} ${!active && "border-gray-200 hover:border-gray-400"}
...prop
/>
Well you can use focus utility for this.
Below is the example you can see where button has different behaviour on hover and focus.
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10">
<button class="p-4 bg-pink-100 hover:bg-pink-300 focus:bg-red-500 focus:border-2 focus:border-red-700">Click </button>
</div>
You can achieve this with a ternary operator on className. By default we have border-gray-200 hover:border-gray-400 when state changes, we replace border-gray-700 instead of border-gray-200 hover:border-gray-400.
const App = () => {
const [active, setActive] = React.useState(false);
return (
<button onClick = {() => setActive(!active)}
className={`flex p-3 rounded border bg-white ${active ? 'border-gray-700' : 'border-gray-200 hover:border-gray-400'}`
}>
{active ? 'Active' : 'Inactive'}
</button>
);
};
const rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render( < App / > );
<script src="https://cdn.tailwindcss.com"></script>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="root" class="p-10"></div>
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>
I have a list of items (dynamically created buttons) coming from a reactjs map function. I want them listed horizontally and also allow wrapping remaining items to the next line if needed. Can some one please help with this. Given below is my code snippet.
return( <div>
{ relevantMessages.map(function(thisQuestion){
return
<p key={thisQuestion.id}>
<button key={thisQuestion.id} onClick={() => this.sendThisMessage(thisQuestion.question)}>
{thisQuestion.title}
</button>
</p>
}, this)
}
</div>)
You can use css to align horizontally.
For example:
return( <div>
{ relevantMessages.map(function(thisQuestion){
return
<p key={thisQuestion.id} style="display:inline-block;">
<button key={thisQuestion.id} onClick={() => this.sendThisMessage(thisQuestion.question)}>
{thisQuestion.title}
</button>
</p>
}, this)
}
</div>)
Using span tag instead of p tag in the above code snippet solved my issue.
This isn't really an issue with React, but more so with CSS.
What you are probably looking for is something such as flex-box. Check out css-tricks for a good tutorial on how to use it.
Or try flexbox-froggy for a gamified of learning it :)
So I have a search box component that is to be used in the Navigation bar on all pages of the site. I also want to use this component/html in other pages of the site hence I put it inside a component shown below
LocationSearchBox.js
import React, {PropTypes} from 'react'
import {Button,FormGroup, FormControl} from 'react-bootstrap'
import styles from '../scss/components/LocationSearchBox.scss'
export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={styles.navbarSubmitButton}>Get Weather</Button>
</FormGroup>
)
}
I am using css modules with web pack to convert my scss into css and than generate random styles to use in classnames for the components.
LocationSearchBox.scss
.navbarSubmitButton {
margin-left: 20px;
}
This used inside the component just adds some space between the input and submit button.
This is the NavBar component again with the help of react-bootstrap.
MainNavBar.js
import React from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
import styles from '../scss/components/MainNavbar.scss'
export default function MainNavbar() {
return(
<Navbar fixedTop className={styles.navbarColour} >
<NavbarBrand pullLeft >
<a href='#' className={styles.Brand}>Weather-app</a>
</NavbarBrand>
<Navbar.Collapse>
<Navbar.Form pullRight>
<Search/>
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
)
}
Now I have created a homepage component and I want to use the LocationSearchBox component inside it.
Home.js
import React from 'react'
import {default as Search} from '../components/LocationSearchBox'
import styles from '../scss/components/Home.scss'
export default function Home() {
return (
<div className={styles.center}>
<h2>Enter a city and state</h2>
<Search />
</div>
)
}
The search component inside Home.js, the button has the same margin-left property was the navigation bar so it is moved to the right a bit. I don't want that to happen. I want it only to be applied to the search box used inside the navigation bar but I am unsure of how to do that with CSS modules and React components without creating a separate search box for the navigation bar but I see that as pointless when it will have the exact same code.
I feel like I am not using CSS modules correctly at all, I am not using its philosophy and the point of CSS modules correctly.
It's hard to say what the best approach would be without understanding why it needs to be visually different in those locations but generally I would update <Search /> to accept a new prop to conditionally apply the extra margin.
It could be theme if those two styles are likely to be used many times:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={props.theme === 'foo' ? styles.navbarSubmitButton : null}>Get Weather</Button>
Or if it's more of an override you could provides a buttonClassName prop to add exceptional styles at specific call sites:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={`${styles.navbarSubmitButton} ${props.buttonClassName}`}>Get Weather</Button>