Before Next.js 12.2 Styling the next/image component’s margins this way doesn’t work in older Next.js versions. See relevant GitHub discussion for more details. Internally to the next/image component, the <img> element and the elements that wrap it have inline styles that override certain values passed through className. As a workaround, you can add a wrapper … Read more
TL;DR: -webkit-text-stroke is still quite unpredictable the text-shadow as proposed by @Satheesh Kumar is probably the most reliable solution. @Luke Taylor’s approach – duplicating text to a background pseudo element – also provides a good workaround. Anatomy of a variable font As @diopside: pointed out this rendering behaviour is related to variable fonts. The reason … Read more
If you use Visual Studio Code, you can use the PostCSS Language Support plugin. Make sure you associate your scss files with PostCSS.
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 … Read more
So after finding out that this way of working is not recommended and that JIT doesn’t support it (Thanks to the generous commenters). I have changed the approach to a more ‘config’ based approach. Basically I define a const with the basic configuration for the different props and apply those to the component. It’s a … Read more
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 … Read more
As shown in the MDN docs: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#using_named_exports Here is the whole github codebase. utils/test.js const getStatusColour = (orderStatus) => { let statusColour=”” switch (orderStatus) { case ‘new’: statusColour=”bg-green-100 text-green-900″ break case ‘preparing’: statusColour=”bg-yellow-400 text-yellow-900″ break case ‘ready’: statusColour=”bg-blue-200 text-blue-800″ break case ‘delivered’: statusColour=”bg-green-300 text-green-800″ break case ‘failed’: statusColour=”bg-red-400 text-red-900″ break default: statusColour=”bg-gray-100 text-gray-800″ } return … Read more
Do it like this: <div className={`absolute inset-0 ${click ? ‘translate-x-0’ : ‘-translate-x-full’} transform z-400 h-screen w-1/4 bg-blue-300`}></div> // Alternatively (without template literals): <div className={‘absolute inset-0 ‘ + (click ? ‘translate-x-0’ : ‘-translate-x-full’) + ‘ transform z-400 h-screen w-1/4 bg-blue-300’}></div> Just keep in mind not to use string concatenation to create class names, like this: <div … Read more