I installed React with tailwind from this: https://github.com/altafino/react-webpack-5-tailwind-2
I want to make a bg color like above in the picture. But I get no background-color its white. But Why?
this picture above is from tailwind.com first or second content
flex items-center space-x-4 p-6 md:px-10 md:py-6 bg-gradient-to-br rounded-b-xl leading-6 font-semibold text-white from-fuchsia-500 to-purple-600
fuchsia is not added to the colors by deafult. Checkout https://tailwindcss.com/docs/customizing-colors#color-palette-reference
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
// Build your palette here
fuchsia: colors.fuchsia,
}
}
Then, your gradient from-fuchsia-500 will work.
Related
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.
My code is working when fine when i am running for group hover on play.tailwindcss.com
But when i copy same code in my local file, group hover is not working there;
what should i include in my tailwind.config.css file to enable group hover in my case?
DEMO
CODE:
<div class="group">
Menu
<div class="hidden group-hover:block absolute bg-white shadow-md w-auto p-4">
option 1
option 1
option 1
option 1
</div>
The Playground uses JIT mode, so option 1 for you is enabling JIT mode.
Option 2 is to add the group-hover variant to your display utility as shown here https://tailwindcss.com/docs/display#variants
If you're using display variants anywhere else you'll need to add those as well, it might look something like this.
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
display: ['hover', 'focus', 'group-hover'],
}
}
}
I want to make an image have border radius only when the screen is large, otherwise I want it to have straight edges, how can I do that?
I am using Nextjs and Tailwind CSS
You just need to add the lg: or xl: prefix on whatever class you want to conditionally apply according to screen size, take a look at the docs
Here's an example code:
pages/index.js
export default function Home() {
return (
<div className="h-full w-full grid place-items-center">
<div className="w-32 h-32 bg-red-500 lg:rounded-xl"></div>
</div>
);
}
You can check the sandbox
I want to just set the left value of a absolutely positioned div different from other divs. I tried the last: property of tailwind, but its not working.
Here's my code thet I tried
absolute z-10 -ml-4 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 -left-5 last:left-20"
I added these classes and only want the last mapped div to have different position
Sample code:
<div class='relative w-full h-72'>
{items.map((each, i ) => {
return (
<div key={i} class='absolute top-0 left-0 last:left-10'>{each}</div
)
})}
</div>
and the last div that is mapped should have different left value
Prior to v2.1 and JIT mode, you need to explicitly enable the last-child variant in your tailwind.config.js, as it's not enabled for any core plugins.
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
inset: ['last']
}
}
}
Playground demo: https://play.tailwindcss.com/Wt6reZBsRY
From v2.1, when using Just-in-Time mode no extra configuration is required as all styles are generated on-demand.
// tailwind.config.js
module.exports = {
mode: 'jit',
// ...
}
I currently have a weird problem using tailwindcss. The button below looks fine.
But when I click it does shape pill/rounded, instead its a rectangle below.
Someone knows how to make the active state shape same as the current one?
Here is my button code:
<button class="flex items-center justify-center focus:outline-none rounded-3xl
bg-green-200 text-gray-800 text-13 h-8 px-3">
Goto Button
</button>
I tried to add below code. But doesn't work
active:rounded-3xl
Device tested: iPhone X (using chrome browser (CTRL+SHFT+M))
Two possible solutions
1) This could be fix by disabling the preflight of tailwind but unfortunately it can cause major design problems for possible affected pages.
corePlugins: {
preflight: false,
}
2) Alternatively this could be solve by changing the cursor style. Add this class to the button cursor-auto.
<button class="cursor-auto flex items-center justify-center focus:outline-none rounded-3xl
bg-green-200 text-gray-800 text-13 h-8 px-3">
Goto Button
</button>
By default, active variant is not enabled for most of the plugins.
You need to add a small config change in tailwind.config.js
Extend the borderRadius plugin
//Add this change in tailwind.config.js
module.exports = {
variants: {
extend: {
borderRadius: ['active'],
}
}
}
Note:
By default, only some variants like focus, hover etc are enabled for the plugins(core-plugins only)
For more info, refer to
https://tailwindcss.com/docs/hover-focus-and-other-states
For borderRadius,
https://tailwindcss.com/docs/border-radius