How to add a @tailwind CSS rule to CSS checker
If you use Visual Studio Code, you can use the PostCSS Language Support plugin. Make sure you associate your scss files with PostCSS.
tailwind-css
Text Stroke (-webkit-text-stroke) css Problem
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
Next Image not taking class properties
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
Dynamically build classnames in TailwindCss
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
How to use template literals in tailwindcss to change classes dynamically?
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