This question already has an answer here:
Conditionally set background color in React component with Tailwind CSS
(1 answer)
Closed last month.
I want to use MUI theming in my otherwise Tailwind-styled page so I can centrally handle the color palettes for dark and light mode since I found the decentral dark and light mode theming provided by Tailwind not very practicable in case I want to change colors.
My approach is to use the Tailwind syntax for arbitrary values and pass the hex code from the theme.js color palette.
the Tailwind arbitrary syntax is:
bg-[#hex]
e.g.:
bg-[#50d71e]
which just works fine in normal classNames, e.g.:
<div className={`bg-[#50d71e]`}>
<div/>
gives me a green background (#50d71e) in that container.
On the other side, I have a mui-themed template page. Here I can reference colors as follows:
import {useTheme} from "#mui/material";
import { tokens } from "../../theme";
const AnyName = () => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
return (
<Box backgroundColor={colors.grey[400]}></Box>
<Box sx={{backgroundColor: colors.grey[500],}}></Box>
}
export default AnyName;
And again, it just works fine.
Now, if I want to fuse these two approaches, I am struggling to query the hex code out of the const colors = tokens(theme.palette.mode);.
The theme.js holds all color values as hex, so I think this should be possible. Here is a look inside:
export const tokens = (mode) => ({
...(mode === 'dark'
?
{
grey: {
900: "#141414",
800: "#292929",
700: "#3d3d3d",
600: "#525252",
500: "#666666",
400: "#858585",
300: "#a3a3a3",
200: "#c2c2c2",
100: "#e0e0e0",
},
} : {
grey: {
100: "#141414",
200: "#292929",
300: "#3d3d3d",
400: "#525252",
500: "#666666",
600: "#858585",
700: "#a3a3a3",
800: "#c2c2c2",
900: "#e0e0e0",
},
}),
});
** What I have tried: **
const AnyName = ({ anyProp }) => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
return (
<div
className={`bg-[${colors.grey[400]}]`}
></div>
);
};
export default AnyName;
This doesn't work. I guess it is a matter of scoping, but I am not sure, and I honestly do not know what I am doing.
So I tried a few more things like:
className={`bg-[{colors.grey[400]}]`}
Which doesn't seem to reference colors at all.
And:
className={`bg-[colors.grey[400]]`}
Which also does not reference colors.
All three approaches result in a transparent background.
Now I am here, hoping for your help. Thanks.
I suspect this to work, But you are not able to see the background color because the there is no children for this div, which makes it height of 0
Try adding height:
<div className={`bg-[${colors.grey[400]}] h-24`}/>
Thanks for your answer. Up there is not the complete code. I tried to keep it short for the post. There are children, and if I set the background using normal Tailwind syntax, e.g., bg-[#50d71e], it works as expected. Here is the full return statement, unmodified:
return (
<div
className={`bg-[#50d71e] shadow-lg rounded-lg p-0 lg:p-8 pb-12 mb-8`}
>
<div className="relative overflow-hidden shadow-md pb-80 mb-6">
<img
src={post.featuredImage.url}
alt={post.title}
className="object-top absolute h-80 w-full object-cover shadow-lg rounded-t-lg lg:rounded-lg"
/>
</div>
<h1
className="transition duration-700 text-center mb-8 cursor-pointer
hover:[text-cyan-400] text-3xl font-semibold"
>
<Link href={`/post/${post.slug}`}>{post.title}</Link>
</h1>
<div className="block lg:flex text-center items-center justify-center mb-8 w-full">
<div className="flex items-center justify-center mb-4 lg:mb-0 w-full lg:w-auto mr-8">
<img
alt={post.author.name}
height="30px"
width="30px"
className="align-middle rounded-full"
src={post.author.photo.url}
/>
<p className="inline align-middle text-gray-700 ml-2 text-lg">
{post.author.name}
</p>
</div>
<div className="font-medium text-gray-700">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 inline mr-2 text-cyan-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<span>{moment(post.createAt).format("DD. MMM, YYYY")}</span>
</div>
</div>
<p className="text-center text-lg text-gray-700 font-normal px-4 lg:px-20 mb-8">
{post.excerpt}
</p>
<div className="text-center">
<Link href={`/post/${post.slug}`}>
<span className="transition duration-500 transform hover:-translate-y-1 inline-block bg-cyan-500 text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer">
Continue Reading
</span>
</Link>
</div>
</div>
);
Since the VS Code autocompletion works as intended when using the $-approach, I guess maybe it is not or not only a matter of scope.
I messed around a bit more and found something strange.
In the following example I will be using colors.grey[900] which is #141414.
If I manually enter bg-[#141414], the background will be dark-grey (obviously).
If I then enter bg-[${colors.grey[900]}], it works just fine.
So I guessed, maybe that's just some caching.
I double-checked --> chrome --> F12 --> disable cache --> page refresh --> still works fine.
I double-checked again, differently by changing the hex to a different value, e.g. bg-[${colors.grey[800]}] --> doesn't work. Changing it back to bg-[${colors.grey[900]}] --> works again.
Checked it on a different Browser which always clears cache and never loaded the page before: still works.
Restart Server: and bg-[${colors.grey[900]}] also does not work anymore.
Steps to reproduce:
doesn't show grey background
const AnyName = ({ anyProp }) => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const hex = colors.grey[900];
return (
<div
className={`bg-[${hex}]`}
></div>
);
};
export default AnyName;
shows grey Background
const AnyName = ({ anyProp }) => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const hex = colors.grey[900];
return (
<div
className={`bg-[#141414]`}
></div>
);
};
export default AnyName;
shows grey Background
const AnyName = ({ anyProp }) => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const hex = colors.grey[900];
return (
<div
className={`bg-[${hex}]`}
></div>
);
};
export default AnyName;
doesn't show grey background (changed colors.grey to 800)
const AnyName = ({ anyProp }) => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const hex = colors.grey[800];
return (
<div
className={`bg-[${hex}]`}
></div>
);
};
export default AnyName;
shows grey background even in different browser without caching
const AnyName = ({ anyProp }) => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const hex = colors.grey[900];
return (
<div
className={`bg-[${hex}]`}
></div>
);
};
export default AnyName;
So I guess there must be some weird server-side binding issue that I overcome by once providing directly the correct value and afterwards it seems to be cached on server-side and works. Once I restart the server, everything is gone and I have to go through steps 1,2,3 to make it work again.
Any ideas? Workarounds also welcome.
edit:
I found this thread:
JIT tailwindcss using variable in bg-[] not rendering color
Unfortunately, I did not find it before, even after reviewing related threads.
This sheds a lot of light on the issue.
Related
I'm just learning React and Tailwind CSS and had a strange experience with CSS grid using Tailwind classes. I've made the buttons for a calculator, with the last Button spanning two columns:
App.js:
export default function App() {
return (
<div className="flex min-h-screen items-center justify-center bg-blue-400">
<Calculator />
</div>
);
}
Calculator.js
import { IoBackspaceOutline } from "react-icons/io5";
export const Calculator = () => {
return (
<div className="grid grid-cols-4 grid-rows-5 gap-2">
<Button>AC</Button>
<Button>
<IoBackspaceOutline size={26} />
</Button>
<Button>%</Button>
<Button>รท</Button>
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>x</Button>
<Button>4</Button>
<Button>5</Button>
<Button>6</Button>
<Button>-</Button>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>+</Button>
<Button>0</Button>
<Button>.</Button>
<Button colSpan={2}>=</Button>
</div>
);
};
const Button = ({ colSpan = 1, rowSpan = 1, children }) => {
return (
<div
className={`col-span-${colSpan} row-span-${rowSpan} bg-white p-3 rounded`}
>
<div className="flex items-center justify-center">{children}</div>
</div>
);
};
This doesn't work (tested in Chrome):
Now here comes the weird part. I replaced the returned JSX from the App component with HTML from a Tailwind tutorial and deleted it again.
<div className="bg-blue-400 text-blue-400 min-h-screen flex items-center justify-center">
<div className="grid grid-cols-3 gap-2">
<div className="col-span-2 bg-white p-10 rounded">1</div>
<div className="bg-white p-10 rounded">2</div>
<div className="row-span-3 bg-white p-10 rounded">3</div>
<div className="bg-white p-10 rounded">4</div>
<div className="bg-white p-10 rounded">5</div>
<div className="bg-white p-10 rounded">6</div>
<div className="col-span-2 bg-white p-10 rounded">7</div>
<div className="bg-white p-10 rounded">8</div>
<div className="bg-white p-10 rounded">9</div>
</div>
</div>
After I Ctrl-Z'd a bunch of times, so I had only the previous code, my button suddenly spans two columns as intended:
I checked to make sure that there were no changes in the code:
My friend even cloned my repo, followed the same steps and got the same result.
He suspects that it has something to do with the variable classNames in my Button component with regards to Tailwind's JIT compiler, but none of us can pinpoint the error.
Am I using variable CSS classes wrong?
This has been a WTF moment. What could be the reason for this?
The CSS file generated by Tailwind will only include classes that it recognizes when it scans your code, which means that dynamically generated classes (e.g. col-span-${colSpan}) will not be included.
If you only need to span 2 columns, you could pass boolean values which will trigger the addition of a full col-span-2 or row-span-2 utility class to be added:
const Button = ({ colSpan = false, rowSpan = false, children }) => {
return (
<div
className={`${colSpan ? 'col-span-2' : ''} ${rowSpan ? 'row-span-2' : ''} bg-white p-3 rounded`}
>
<div className="flex items-center justify-center">{children}</div>
</div>
);
};
Otherwise, you could pass the values as classes to the Button component:
<Button className='col-span-2 row-span-1'>=</Button>
const Button = ({ className, children }) => {
return (
<div
className={`${className} bg-white p-3 rounded`}
>
<div className="flex items-center justify-center">{children}</div>
</div>
);
};
More information: https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Another tricky solution that worked for me is to use variable with forced type of the possible className values (in typescript) like :
export type TTextSizeClass =
'text-xl' |
'text-2xl' |
'text-3xl' |
'text-4xl' |
'text-5xl' |
'text-6xl' |
'text-7xl' |
'text-8xl' |
'text-9xl'
;
...
const type : number = 6 ;
const textSizeClass : TTextSizeClass = type != 1 ? `text-${type}xl` : 'text-xl';
...
<div className={`font-semibold ${textSizeClass} ${className}`}>text</div>
As Ed Lucas said:
The CSS file generated by Tailwind will only include classes that it recognizes when it scans your code, which means that dynamically generated classes (e.g. col-span-${colSpan}) will not be included
But now could use safeListing
and
tailwind-safelist-generator package to "pregenerate" our dynamics styles.
With tailwind-safelist-generator, you can generate a safelist.txt file for your theme based on a set of patterns.
Tailwind's JIT mode scans your codebase for class names, and generates
CSS based on what it finds. If a class name is not listed explicitly,
like text-${error ? 'red' : 'green'}-500, Tailwind won't discover it.
To ensure these utilities are generated, you can maintain a file that
lists them explicitly, like a safelist.txt file in the root of your
project.
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>
I have a multi step form and would like my path to be changed depending on form step. I found out there is smth. like shallow routing which can be used for this purpose. So in my form step number zero component I added Router and the inscrease function.
export default function ContractInfo({ formStep, prevFormStep, nextFormStep, selected }) {
const router = useRouter();
const { query } = router;
const { formStepsNumer } = query;
const increase = () => {
var newStepNumber = + 1;
router.push(`/?step=${newStepNumber}`, undefined, {
shallow: true
});
};
........ more irrelevant code
Attention, I am not giving all the code, otherwise it will get too complicated. Before adding shallow routing, everything worked. Problem now is, that my URL gets changed onClick, as I wished, but the next form step won't render anymore.
..... above irrelevant code
<div className="mt-3 sm:mt-0 sm:ml-3">
<a
//onClick={nextQuizStep}
onClick={() => nextFormStep(contracts?.[isSelected]), increase }
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
>
Next
</a>
</div>
Basically NextFormStep()which worked before, now is broken. Any ideas why?
Somehow I had to write my function directly inside on onClick:
onClick={() => {
nextFormStep(contracts?.[isSelected]);
{router.push(`/?step=${+1}`, undefined, {
shallow: true
});
};
}
}
I know this code really is ugly. If you have any refractoring suggestions, please welcome!
I'm creating a collapse/accordion component that shows the content when clicked. I want to add a little delay to that action but what I've doesn't seem to work. Here is what I have:
const Accordion = ({ children, open }) => {
const contentSpace = useRef(null);
return (
<div className="flex flex-col">
<div
ref={contentSpace}
className={clsx(
'overflow-auto overflow-y-hidden h-0 transition-height duration-700 ease-in-out',
{
'h-full': open,
}
)}
>
<div className="py-2">{children}</div>
</div>
</div>
);
};
Any ideas?
Seems like you have to use numeric values in order to make the animation work. So I had to change h-full with a numeric height.
I am trying to get the following component to work properly with Twin.Macro:
import "twin.macro";
const Pattern = ({ classes }) => {
return (
<div css={[classes.wrapper]}>
<img
src="..."
css={[classes.img]}
/>
</div>
);
};
In other words, I would like to receive the props via the classes prop and pass the values on to Twin.Macro. However, it is not working properly. For example, here is an implementation of that component:
<Pattern
classes={{
wrapper: "absolute -left-2 z-10 lg:left-0 top-0 h-full bg-contain bg-line-left-md lg:bg-line-left bg-no-repeat xl:bg-line-left-md hidden sm:block",
img: "h-full",
}}
/>
And here is the css that is output:
.css-w36jn9-Pattern {
absolute -left-2 z-10 lg: left-0 top-0 h-full bg-contain bg-line-left-md lg:bg-line-left bg-no-repeat xl:bg-line-left-md hidden sm:block;
}
As you can see, all it does is pass on the values of the tailwind css classes. It does not process those classes in the proper property-value pairs (such as position: absolute; left: -2px, etc).
I have tried different ways to get this to work, but nothing has been successful. Any idea what I am doing wrong and how to fix it?
Thanks.
accordingly to Twin.Macro when passing css property, you need to pass your classes to tw function using tagged template literals. given you are passing a variable use also string interpolation.
finally, your code should look like:
import tw from "twin.macro";
const Pattern = ({ classes }) => {
return (
<div css={[tw`${classes.wrapper}`]}>
<img
src="..."
css={[tw`${classes.img}`]}
/>
</div>
);
};