I am trying to apply gradient to my nav links but it is not showing any results.
This is my code
<NavLink className="block p-4 pr-0 mr-3 bg-gradient-to-br from-purple-500
to-indigo-500 rounded-tr-full rounded-br-full text-textPrimary
hover:text-white text-xl" to="/dashboard">
<i class="fas fa-laptop-house mr-3"></i>
Dashboard
</NavLink>
I am using tailwind css and react
It looks like there is no color schema in your config.
Just add this to your tailwind.config.js.
const colors = require("tailwindcss/colors");
module.exports = {
theme: {
colors: {
blue: {
...colors.blue,
"your custom blue color"
},
green: colors.green,
pink: colors.pink
...etc
}
},
};
It should work. Just pick colors you want to include in your schema. ...colors.blue will give you all shades of blue. After this, gradient with blue color should work.
This should work fine (https://play.tailwindcss.com/xnQDaASzOL).
There might be an issue with you <NavLink /> component. Does the className props is goodly propagate to the inner component ?
Indeed, React does not understand className for custom component until you propagate it to the inner component, see this answer.
Related
have problem with avatar, when I change size (28, 18, 16) - everything is fine.
But when I change size to 24, 22, 20 and other - image is hidden.
Here is my screenshots and code:
Img Component:
import Image from "next/image";
function Img(props) {
return (
<>
<div className={`relative flex h-[${props.size}px] w-[${props.size}px]`}>
<Image
src={
"https://images.unsplash.com/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2095&q=80"
}
alt="image"
fill
style={{
objectFit: "cover",
borderRadius: "999px",
}}
/>
</div>
</>
);
}
export { Img };
import { Img } from "../../elements/common/Img";
export default function AvatarPage() {
return (
<>
<div className="flex p-24">
<Img size={14} />
</div>
</>
);
}
Example 1
Example 2
What I do wrong?
Example 3 - if I change size to 38px the image will appear
That is simply not how Tailwind works.
Tailwind just-in-time basically scrapes all of your files (that matches paths in your content from tailwind.config.js) for existing classes and add them to the final distributed CSS. It is totally impossible to create Tailwind dynamic classes via props. You should use style= to add Height.
As a little tip, in the case the possible classes to be generated would be predictable (not [] values, but Tailwind classes), you can make usage of safelist which you can find the documentation here.
I'm trying to add a custom gradient over an image using React state, Tailwind CSS and the FastAverageColor package (https://www.npmjs.com/package/fast-average-color) into my Next JS app.
I'm using an useEffect hook for this:
const [avgColor, setAvgColor] = useState("")
useEffect(() => {
const fac = new FastAverageColor()
fac.getColorAsync(songData.track.album.images[0].url, { algorithm: 'dominant' }).then(result => {
setAvgColor(`w-full h-full absolute bg-gradient-to-tr from-[${result.hex}] to-transparent`)
})
}, [avgColor, songData.track.album.images])
The JSX is presented below:
<div className="relative w-full h-full">
<Image priority alt="test" layout='fill' objectFit='cover' src={songData.track.album.images[0].url} />
{avgColor ? <div className={avgColor}></div> : null}
</div>
The problem is that my gradient doesn't appear over the image. Do you know maybe why this happens?
It's not possible to do with JIT classes but you can use from-current and set an inline color to set the from color.
So, try this:
setAvgColor(result.hex)
and
<div style={{color: avgColor}} className="w-full h-full absolute bg-gradient-to-tr from-current to-transparent"></div>
basic demo
I am trying to use a hex color code passed through props to set the background color of a div. These are one-off colors that are generated dynamically, so cannot be added as a theme extension in tailwind.config.
I thought a template literal would be the best way to achieve this, but have not been able to get this to work with arbitrary color values in Tailwind CSS.
interface Props {
color: string;
}
const ColorSwatch = ({ color }: Props) => {
return (
<div className="flex flex-col gap-1 p-2">
<div
className={`h-20 w-20 border border-gray-400 shadow-md bg-[${color}]`}
></div>
<p className="text-center">{color}</p>
</div>
);
};
export default ColorSwatch;
Pasting the hex color code directly into the className list produces expected results, but trying to use the prop value in a template literal results in a transparent background (no background effect applied).
Looking for advice on how to correct this or different approaches to dynamically setting background color with a hex code passed through props.
Unfortunately, Tailwind requires the color to be hardcoded into the className prop as it cannot compute arbitrary styles from dynamic className values.
Your best bet would be to set the background color using the style prop as shown below;
interface Props {
color: string;
}
const ColorSwatch = ({ color }: Props) => {
return (
<div className="flex flex-col gap-1 p-2">
<div
className="h-20 w-20 border border-gray-400 shadow-md"
style={{backgroundColor: color}}
></div>
<p className="text-center">{color}</p>
</div>
);
};
export default ColorSwatch;
You can look here and here to read more on how Tailwind generates arbitrary styles.
I am currently working on a component's responsive styling wherein on large screens I have the div with the text element sitting on top of the div containing the img element and on smaller and medium screens have the div with the image aligned right below the div with the text element. I am using Next.js and and Tailwind CSS for styling.
The styling works fine on large screens but for some reason the div with the text element is not showing in small screens when I already have flex flex-col-reverse in the parent element
Here is how the entire code look like:
import React from 'react'
import Image from 'next/image'
import catImage from '../assets/catImage.webp'
const LargeCard = () => {
return (
<article className='relative flex flex-col-reverse h-screen py-16 lg:h-96' >
<div>
<Image src={catImage}
layout='fill'
objectFit='cover'
className='rounded-2xl'
/>
</div>
<div className='h-96 lg:absolute lg:top-32 lg:left-12' >
<h2 className='text-white text-4xl font-semibold mb-3 w-64' >Cat Ipsum</h2>
<p className='text-lg lg:w-[300px] text-white' >Stretch out on bed i heard this rumor where the humans are our owners, pfft, what do they know?!</p>
<button className='bg-gray-100 text-gray-900 px-4 py-2 rounded-lg mt-5 max-w-md ' >Learn more</button>
</div>
</article>
)
}
export default LargeCard
tailwind.config.js:
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
maxWidth: {
md: '90vw'
}
},
variants: {
extend: {},
},
plugins: [
require('tailwind-scrollbar-hide')
],
}
forgot to post the answer. I actually solved the following day.
First. flex-col-reverse is actually working.
Second. setting nextjs's <Image> component's objectFit property to cover will set the img element to cover the entire area of it's grandparent element so to contain it you add position relative to the parent div containing it and make sure to define it's height too.
something like this:
<div className='relative h-96'>
<Image src={catImage}
layout='fill'
objectFit='cover'
className='rounded-2xl'
/>
</div>
First, the stack I'm using:
- React: Gatsby
- Typescript
- Scss (using module for each component)
- React Bootstrap
I'm trying to show the content of a React Bootstrap Card only when the mouse hovers over it. The problem is that I am using Gatsby modules for scss, and I cannot find the way to directly access the .card-img-overlay class to change its hover properties, since a module would add its name to the class.
My solution was to wrap a div around it. However it doesn't work. The content is hidden but nothing happens when the mouse hovers it. Here is the code:
projectCard.tsx
import React from 'react'
import { Card } from 'react-bootstrap'
import styles from './projectCard.module.scss'
interface ProjectInfo {
title: string
description: string
imageSrc: any
}
const ProjectCard = (project: ProjectInfo) => (
<Card className="bg-dark text-white">
<Card.Img src={project.imageSrc} alt="Card image" />
<div className={styles.cardContent}>
<Card.ImgOverlay>
<Card.Title> {project.title} </Card.Title>
<Card.Text> {project.description} </Card.Text>
</Card.ImgOverlay>
</div>
</Card>
)
export default ProjectCard
projectCard.module.scss
.cardContent {
visibility: hidden;
}
.cardContent:hover {
visibility: visible;
}
Any help would be appreciated!
I was able to find a solution with the help of a previous comment (someone erased the comment.. but thanks anyways!)
I followed this codepen: https://codepen.io/askibinski/pen/RwWwxxO
<Card className={styles['card']}>
<Card.Img src={project.imageSrc} alt="Card image" className={styles['card-content-image']} />
<div>
<Card.ImgOverlay className={styles['card-content']}>
<Card.Title className={styles['card-content-text']}> {project.title} </Card.Title>
<Card.Text className={styles['card-content-text']}> {project.description} </Card.Text>
<Card.Text className={styles['card-content-text']}> {project.technologies} </Card.Text>
</Card.ImgOverlay>
</div>
</Card>
Note that I couldn't directly access the Bootstrap elements, so I created class for each of them. Also, gatsby has a camelCase convention, but since it doesn't go well with css standards I overwrote that by adding to gatsby-config.js
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-plugin-sass`,
options: {
cssLoaderOptions: {
camelCase: false,
},
},
}
However, that is just a band-aid fix for the problem. I still want to access the React Bootstrap variables if possible. For example, I want to center the Card.Img. I have tried using a className, but it doesn't have access to the image itself.
And here is the code trying to access the React Bootstrap name, but it doesn't work
.card-img {
// any type of css here doesn't have any effect
}